Лого www.SiteHere.ru

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

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

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

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

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

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

Давайте посмотрим как сделать такое меню. Начнем с 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/

Многоуровневое выдвигающееся меню — выдвигающееся меню на сайте 3.00/5 (60.00%) 1 голос(ов)

Понравилась статья - расскажи друзьям! :)

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

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

     
    • Юрий

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

       
  • Георгий

    А есть возможность сделать так чтобы 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;
        }

         

         

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

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