X
Юрий Немец

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

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

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

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

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

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

Категории: jQuery