Многоуровневое выдвигающееся меню имеет свои плюсы. Оно не раздражает пользователя своим постоянным присутствием (т.к. может вызываться по желанию самого пользователя) и позволяет сэкономить место на сайте. При такой организации пункты меню накладываются друг на друга во время навигации пользователя.
Можно выбрать один из трех вариантов: в первом варианте навигация идет на различных уровнях, во втором — навигация по различным уровням с возможностью возврата при помощи кнопки «назад» и третий — комбинация первых двух вариантов.
Рассмотрим реализацию такого меню. Разметка будет следующей:
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 34 35 36 37 38 39 40 |
<!-- mp-menu --> <nav id="mp-menu" class="mp-menu"> <div class="mp-level"> <h2 class="icon icon-world">All Categories</h2> <ul> <li class="icon icon-arrow-left"> <a class="icon icon-display" href="#">Devices</a> <div class="mp-level"> <h2 class="icon icon-display">Devices</h2> <ul> <li class="icon icon-arrow-left"> <a class="icon icon-phone" href="#">Mobile Phones</a> <div class="mp-level"> <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 class="icon icon-arrow-left"> <!-- ... --> </li> <li class="icon icon-arrow-left"> <!-- ... --> </li> </ul> </div> </li> <li><!-- ... --></li> <!-- ... --> </ul> </div> </nav> <!-- /mp-menu --> |
Содержимое .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; } |
Благодаря этому содержимое меню будет отображаться справа и позволит избежать появления полосы прокрутки.
Осталось в теле документа добавить код, подключающий нужные библиотеки jQuery:
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> |
Особо актуальна такая организация выдвигающегося меню для сайтов с плоским дизайном.
Очень красиво сделано!