Exore LTD » jQuery » Многоуровневое выдвигающееся меню — выдвигающееся меню на сайте
Лого SiteHere.ru

Ноябрь 21, 2014 Запись была обновлена

Время чтения: < 1 мин. Прочитать позже

Многоуровневое выдвигающееся меню — выдвигающееся меню на сайте

Многоуровневое выдвигающееся меню

Еще один вариант многоуровневого выдвигающегося меню. Данное меню хорошо тем, что не занимает место на странице и может быть вызвано только когда это нужно пользователю. Уровни меню как бы накладываются один на другой когда посетитель перемещается по пунктам меню. На выбор вам предлагается три вида меню: первый вид — это видно перемещение по уровням, второй — перемещение по уровням и при этом можно возвратиться назад по кнопке «назад», ну и третий — это комбинированный первый и второй вид.

Многоуровневое выдвигающееся меню

По поводу выдвигающихся меню также рекомендую посмотреть следующие уроки:

Посмотреть примерСкачать

Давайте посмотрим как сделать такое меню. Начнем с HTML разметки:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<nav id="mp-menu" class="mp-menu">
    <div class="mp-level">
        <h2 class="icon icon-world">Все категории</h2>
        <ul>
            <li class="icon icon-arrow-left">
                <a class="icon icon-display" href="#">Устройства</a>
                <div class="mp-level">
                <h2 class="icon icon-display">Устройства</h2>
                <ul>
                    <li class="icon icon-arrow-left">
                        <a class="icon icon-phone" href="#">Мобильные телефоны</a>
                        <div class="mp-level">
                            <h2>Мобильные телефоны</h2>
                            <ul>
                                <li><a href="#">Super Smart Phone</a></li>
                                <li><a href="#">Thin Magic Mobile</a></li>
                                <li><a href="#">Performance Crusher</a></li>
                                <li><a href="#">Futuristic Experience</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="icon icon-arrow-left">
                        <!-- -->
                    </li>
                    <li class="icon icon-arrow-left">
			<!-- -->						
                    </li>
                </ul>
            </li> 
        </ul>
        <!-- -->
    </div>
</nav>

Затем добавим основные CSS стили для элементов:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

html,
body,
.container,
.scroller {
    height: 100%;
}
 
.scroller {
    overflow-y: scroll;
}
 
.scroller,
.scroller-inner {
    position: relative;
}
 
.container {
    position: relative;
    overflow: hidden;
    background: #34495e;
}

Это позволяет при выдвижении меню не показывать горизонтальный скролл, тем самым весь контент как бы уезжает вправо.

А затем перед закрывающим тегом </body> подключаем необходимые библиотеки:

1
2
3
4
5

<script src="js/classie.js"></script>
<script src="js/mlpushmenu.js"></script>
<script>
    new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ) );
</script>


Вывод

Сегодня мы рассмотрели еще один вариант выдвигающегося меню. Другие примеры вы можете найти в начале статье. Этот вариант меню также подойдет для сайтов с дизайном Flat.


Успехов!

С Уважением, Юрий Немец

Источник: http://tympanus.net/codrops/2013/08/13/multi-level-push-menu/

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

9 комментариев к записи
  • Евген

    Спасибо! То о чем мечтал!

     
    Ответить
    • Юрий

      Евгений, рад что вам пригодился этот вид меню!

       
      Ответить
  • Георгий

    А есть возможность сделать так чтобы 1-й уровень меню был всегда виден, при этом оставался частью сайта.
    И можно ли например поставить 3 меню на одной странице и чтобы они вызывались по отдельности, но при этом не сдвигали сайт а накладывались на сайт поверх?

     
    Ответить
    • Аноним

      Не много ли хотите, сударь? Делайте уж тогда сами, если шаблоны не устраивают.

       
      Ответить
      • Георгий

        я собственно возможно готов за это и заплатить) тут вопрос желаний и цены)

         
        Ответить
    • Павел

      1. Файле mlpushmenu.js перед 121-ой строчкой или где угодно в этом else добавить строчку 

      $('#'+self.el.id).addClass('open-menu');

      А после 210-ой добавить 

      var d = $('#'+this.el.id);
setTimeout( function() { d.removeClass('open-menu'); }, 500);

      2. В любом css файле прописать 

      .mp-menu {
  display: none;
}
.mp-menu.open-menu {
  display: block;
}

      Крайне простое решение.

       
      Ответить
      • Павел

        Это ответ на вопрос "И можно ли например поставить 3 меню на одной странице и чтобы они вызывались по отдельности"

        "но при этом не сдвигали сайт а накладывались на сайт поверх?" Просто убрать вписать 2 правила

        .mp-menu.open-menu {
    display: block;
    z-index: 99;
    transform: translate3d(0, 0, 0);
}

div#mp-pusher {
    transform: translate3d(0px, 0px, 0px) !important;
}

         

         
        Ответить
  • Евгений

    удобное красивое меню, НО есть один минус: при наличии в подкатегории большого списка ссылок, в мобильной версии не работает прокрутка меню. Если использовать по 5-6 ссылок  то все работает отлично !
    Если кто знает как заставить это меню работать с большим списком в подкатегории — отпишитесь плз.

     
    Ответить
  • Денис

    Один и самый жирный минус этого меню, это то что оно не может выезжать с права экрана!

     
    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *