Сайт ищет нового владельца по разумной цене :) По всем вопросам: promonik1@ya.ru, skype: nik-luck007, https://vk.com/promonik
2
Вы не авторизованы!
Присоединяйтесь к нашему сообществу :)
авторизация
Вакансии
На сайт требуется контент-менеджер
смотреть вакансии
Многоуровневое боковое меню

Многоуровневое боковое меню

Скрипты меню 2013-Авг-26 OkJkeee 5.9k 269 4
Сегодня я продолжу демонстрировать вам интересные экспериментальные скрипты. Как-то раз нами были опубликованы исходники меню. Теперь, мы его немного преобразовали и готовы поделиться с вами его нынешним состоянием. На этот раз меню появляется с боку страницы и там же раскрывается.
Сразу хотим обратить ваше внимание на то, что мы используем 3D Трансформации, так что меню работает только в современных браузерах. Для более старых версий, мы предусмотрели специальный код. То же самое и с JS.

Вот как выглядит HTML структура меню:

Код
<!-- 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 -->


…каждый уровень меню обвёрнут в контейнер с классом mp-level.

Для того чтобы меню не прокручивалось в высоту, мы воспользовались некоторой уловкой, и тут структура страницы будет такой:

Код
<div class="container">
  <!-- Push Wrapper -->
  <div class="mp-pusher" id="mp-pusher">

  <!-- mp-menu -->
  <nav id="mp-menu" class="mp-menu">
  <!-- ... -->
  </nav>
  <!-- /mp-menu -->

  <div class="scroller"><!-- this is for emulating position fixed of the nav -->
  <div class="scroller-inner">
  <!-- site content goes here -->
  </div>
  </div><!-- /scroller-inner -->
  </div><!-- /scroller -->

  </div><!-- /pusher -->
</div><!-- /container -->


И указываем следующие стили:

Код
html,
body,
.container,
.scroller {
  height: 100%;
}

.scroller {
  overflow-y: scroll;
}

.scroller,
.scroller-inner {
  position: relative;
}

.container {
  position: relative;
  overflow: hidden;
  background: #34495e;
}


Это позволит нам сохранить размеры меню на всю страницу, даже при её прокручивании. В общем, мы имитируем фиксированную позицию.

Вот так происходит вызов плагина:

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


Или так, если необходимо чтобы уровни меню оставались в вкладках:

Код
new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ), {
  type : 'cover'
} );


Конец.
Источник: не указан
4 комментария
avatar
1
А что так тихо? biggrin
avatar
2
Ну лить не всегда должно быть громко! biggrin
avatar
4
biggrin
avatar
3
Отлично!)
avatar