Многоуровневое выдвижное меню

Многоуровневое выдвижное меню

От автора: экспериментальное выдвижное меню с многоуровневой функциональностью, позволяющее бесконечное вложение навигационных элементов.

Сегодня мы хотим поделиться с вами еще одним экспериментальным меню. Конечно, вы уже знакомы с так называемой off-canvas-навигацией (скрытой и открывающейся по требованию, например, при нажатии на кнопку) в мобильных приложениях и его реализацией для адаптивных вебсайтов вроде этого, созданного Дэвидом Бушелом (David Bushell). Мы пытались исследовать возможность создания вложенного многоуровневого меню, что могло оказаться весьма кстати для меню с большим количеством контента (такого, как навигация онлайн-магазинов). Результатом стало «выдвижное» меню, способное (теоретически) содержать бесконечные вложенные подменю. При открытии подуровня навигации все содержимое сдвигается еще больше, при этом видимым остается кусочек родительского меню. На выбор – его можно оставить видимым, а можно убрать, в таком случае подменю просто закроет родительский элемент.

скачать исходникидемо

Работать с вложенными элементами довольно сложно, потому что, например, при перемещении родительского элемента вместе с ним, естественно, перемещаются и все дочерние. Поэтому мы применим парочку приемов, которые будут поддерживать нужные 3D-трансляции подменю и их дочерних элементов. Основная мысль заключается в увеличении значения для трансляции с тем, чтобы гарантировать, что подуровни не будут показываться, когда мы все немного сдвинем для демонстрации краев родительских элементов. Конечно, это не является необходимым в том случае, когда подменю закрывает родительский элемент.
Пожалуйста, обратите внимание, что мы используем 3D-преобразования, которые работают только в современных браузерах. Пример альтернативного варианта для неподдерживающих браузеров вы найдете в конце файла component.css, где просто показано меню первого уровня. То же самое мы делаем в случае отсутствия JS.

Для меню мы используем следующую вложенную структуру:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
<!-- 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;
}

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

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

Или, если подменю должны закрывать предыдущие уровни:

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

Для демо-примеров мы пользуемся прекрасными иконными шрифтами Linicons Сергея Шмидта (Sergey Shmidt), созданными с помощью приложения IcoMoon. Надеемся, что это меню вам понравится и окажется полезным.

Автор: Mary Lou

Источник: http://tympanus.net/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree