Багаторівневе висувається меню

Ще один варіант багаторівневого висувається меню. Дане меню добре тим, що не займає місце на сторінці і може бути викликано тільки коли це потрібно користувачеві. Схема меню як би накладаються одна на інший коли відвідувач переміщається по пунктам меню. На вибір вам пропонується три види меню: перший вид - це видно переміщення по рівнях, другий - переміщення по рівнях і при цьому можна вернутися тому по кнопці «назад», ну і третій - це комбінований перший і другий вигляд.

Із приводу висуваються меню також рекомендую подивитися такі уроки:

Красиве висувається меню
Анимированное висувається меню
Створення висувається меню

Подивитися прімерСкачать

Давайте подивимося як зробити таке меню. Почнемо з HTML розмітки:

123456789101112131415161718192021222324252627282930313233

id="Mp-menu" class="Mp-menu»gt;lt;div class="Mp-level"gt;lt;h2 class="Icon icon-world"gt; Всі категоріїlt;/h2gt;lt;ulgt;lt;li class="Icon icon-arrow-left"gt;lt;a class="Icon icon-display" href="#"gt; Пристроїlt;/agt;lt;div class="Mp-level"gt;lt;h2 class="Icon icon-display"gt; Пристроїlt;/h2gt;lt;ulgt;lt;li class="Icon icon-arrow-left"gt;lt;a class="Icon icon-phone" href="#"gt; Мобільні телефониlt;/agt;lt;div class="Mp-level"gt;lt;h2gt; Мобільні телефониlt;/h2gt;lt;ulgt;lt;ligt; lt;a href="#"gt; Super Smart Phonelt;/agt; lt;/ligt;lt;ligt; lt;a href="#"gt; Thin Magic Mobilelt;/agt; lt;/ligt;lt;ligt; lt;a href="#"gt; Performance Crusherlt;/agt; lt;/ligt;lt;ligt; lt;a href="#"gt; Futuristic Experiencelt;/agt; lt;/ligt;lt;/ulgt;lt;/divgt;lt;/ligt;lt;li class="Icon icon-arrow-left"gt;lt;/ligt;lt;li class="Icon icon-arrow-left"gt;lt;/ligt;lt;/ulgt;lt;/ligt;lt;/ulgt;lt;/divgt;lt;/navgt;

Потім додамо основні CSS стилі для елементів:

123456789101112131415161718192021

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

Це дозволяє при висуванні меню не показувати горизонтальний скрол, тим самим весь контент як би їде вправо.

Ну а потім перед закриває тегом підключаємо необхідні бібліотеки:

lt;script src="Js / classie.js"gt; lt;/scriptgt;lt;script src="Js / mlpushmenu.js"gt; lt;/scriptgt;lt;scriptgt; new mlPushMenu (document.getElementById ( `mp-menu`), document.getElementById ( `trigger`)) -lt;/scriptgt;

висновок

Сьогодні ми розглянули ще один варіант висувається меню. Інші приклади ви можете знайти на початку статті. Цей варіант меню також підійде для сайтів з дизайном Flat.

Успіхів!

З повагою, Юрій Німець

джерело: https://tympanus.net/codrops/2013/08/13/multi-level-push-menu/

Поділися в соц мережах: