Выдвигающееся меню на jQuery

Многоуровневое выдвигающееся меню имеет свои плюсы. Оно не раздражает пользователя своим постоянным присутствием (т.к. может вызываться по желанию самого пользователя) и позволяет сэкономить место на сайте. При такой организации пункты меню накладываются друг на друга во время навигации пользователя.

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

Демо Скачать

Рассмотрим реализацию такого меню. Разметка будет следующей:

<h2 class="icon icon-world">All Categories</h2>

<ul>

<a class="icon icon-display" href="#">Devices</a>

<h2 class="icon icon-display">Devices</h2>

<ul>

<a class="icon icon-phone" href="#">Mobile Phones</a>

<h2>Mobile Phones</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>

</li>

</ul>

</div>

</li>

</ul>

</div>

</nav>

Содержимое .css файла:

html,

body,

.container,

.scroller {

height: 100%;

}

.scroller {

overflow-y: scroll;

}

.scroller,

.scroller-inner {

position: relative;

}

.container {

position: relative;

overflow: hidden;

background: #34495e;

}

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

Осталось в теле документа добавить код, подключающий нужные библиотеки jQuery:

new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ) );

</script>

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

Возможно, Вам будет интересно ↓↓↓

Один комментарий на “Выдвигающееся меню на jQuery”

Оставить комментарий Отменить ответ