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

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

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

Код

<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-level.

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

Код

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

Код

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'
} );

Конец.

Комментариев: 0

Просмотров: 969

Вернуться назад