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

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

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

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

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

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

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

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

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

…где каждый уровень обернут в раздел с классом mp-level. В норме мы применили бы к меню такого рода фиксированное позиционирование, но так как с этим весьма необычная «проблема» (преобразования заставят его вести себя как элемент с абсолютным позиционированием), то нам придется использовать абсолютное позиционирование, которое поставит нас лицом к проблеме некоторого нежелательного поведения сайта (прокрутке меню и зависимости от высоты документа). Поэтому мы применим небольшую хитрость, чтобы избежать прокрутки меню и его отсечения, если содержимое сайта окажется слишком коротко, взяв следующую структуру страницы:

Где назначаем элементам следующие стили:

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

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

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

Автор: Mary Lou

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

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

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

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree