Сегодня мы хотим поделиться с вами еще одним необычным меню для мобильной версии сайта. Нам потребовалось создать вложенное многоуровневого меню с большим количеством контента (такого, как навигация интернет-магазинов). Результатом стало «выдвижное» меню, способное (если браузер не умрет) содержать бесконечные вложенные подменю. При открытии подуровня навигации все содержимое сдвигается так, что видимым остается кусочек родительского меню. Конечно, его можно оставить видимым, а можно убрать. В этом случае подменю просто закроет родительский элемент.
Работать с вложенными элементами непросто, потому что, скажем, при перемещении родительского элемента вместе с ним, перемещаются и все дочерние. Поэтому мы применим несколько приемов, которые будут поддерживать нужные 3D-трансляции подменю и их дочерних элементов. Основная мысль заключается в увеличении значения для трансляции с тем, чтобы гарантировать, что подуровни не будут показываться, когда мы все немного сдвинем для демонстрации краев родительских элементов. Конечно, это не является необходимым в том случае, когда подменю закрывает родительский элемент.
Пожалуйста, обратите внимание, что мы используем CSS свойства (transform, transition), которые работают только в современных браузерах. Пример альтернативного варианта для н еподдерживающих браузеров вы найдете в конце файла component.css, где просто показано меню первого уровня. То же самое мы делаем в случае отсутствия JS.
Для меню нам потребуется следующая вложенная структура:
<nav id="mp-menu" class="mp-menu"><!-- mp-menu -->
<div class="mp-level">
<h2 class="icon icon-world">Все категории</h2>
<ul>
<li class="icon icon-arrow-left">
<a class="icon icon-display" href="#">Устройства</a>
<div class="mp-level">
<h2 class="icon icon-display">Устройства</h2>
<ul>
<li class="icon icon-arrow-left">
<a class="icon icon-phone" href="#">Мобильные телефоны</a>
<div class="mp-level">
<h2>Мобильные телефоны</h2>
<ul><li><!-- ... --></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 -->
Здесь каждый уровень обернут тегом div с классом mp-level
. Мы не сможем применить к меню такого рода фиксированное позиционирование, так как преобразования заставят его вести себя как элемент с абсолютным позиционированием, поэтому нам придется использовать абсолютное позиционирование, которое приведет к проблеме нежелательного поведения сайта (прокрутке меню и зависимости от высоты документа).
Чтобы избежать прокрутки меню и его отсечения, если содержимое сайта окажется слишком коротким, мы применим небольшую хитрость, взяв следующую структуру страницы:
<div class="container">
<!-- Нажмите на обертку -->
<div class="mp-pusher" id="mp-pusher">
<!-- mp-menu -->
<nav id="mp-menu" class="mp-menu">
<!-- ... -->
</nav>
<!-- /mp-menu -->
<!-- .scroller - для эмуляции фиксированного
положения навигации -->
<div class="scroller">
<div class="scroller-inner">
<!-- Содержание сайта будет здесь -->
</div><!-- /scroller-inner -->
</div><!-- /scroller -->
</div><!-- /pusher -->
</div><!-- /container -->
Теперь назначаем элементам следующие CSS стили:
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'}
);
Вот, взгляните какое у нас получилось мобильное меню для сайта!