От автора: Смелая реализация второстепенного меню, которое плавно появляется поверх основного меню. Сегодня мы расскажем о простом и полезном приеме: второстепенная навигация плавно выдвигается вниз, заменяя собой ссылки основного меню.
Данный подход может стать альтернативой создания стандартных выпадающих меню, в частности, если вы хотите сделать акцент на подменю. Кроме этого вы легко можете изменить приведенный нами пример и использовать выдвигающуюся панель для формы поиска или регистрации (это лишь пара идей на будущее).
Создание структуры
В HTML содержится 2 основных элемента: элемент <header>, служащий оберткой для основного меню, и элемент <main>, содержащий контент страницы.
Основная навигация состоит из 2 вложенных ненумерованных списков, обернутых в семантических целях в элемент <nav>.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<header> <div class="cd-logo"><a href="#0"><img src="img/cd-logo.svg" alt="Logo"></a></div> <nav class="cd-main-nav-wrapper"> <ul class="cd-main-nav"> <li><a href="#0">About</a></li> <!-- другие пункты меню расположены здесь --> <li> <a href="#0" class="cd-subnav-trigger"><span>Categories</span></a> <ul> <li class="go-back"><a href="#0">Menu</a></li> <li><a href="#0">Category 1</a></li> <!-- другие пункты меню расположены здесь --> </ul> </li> </ul> </nav> <a href="#0" class="cd-nav-trigger">Menu<span></span></a> </header> <main class="cd-main-content"> <!-- здесь расположен основной контент --> </main> |
Добавление стилей
На небольших экранах основная навигация будет расположена справа и будет скрыта по умолчанию; когда пользователь кликает по иконке меню, элементы <main> и <header> перемещаются влево (происходит добавление класса .nav-is-visible), чтобы отобразить навигацию.
Когда пользователь кликает по элементу с классом .cd-subnav-trigger, основная навигация отодвигается влево и заменяется второстепенной навигацией.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
header.nav-is-visible { transform: translateX(-260px); } .cd-main-content.nav-is-visible { transform: translateX(-260px); } .cd-main-nav { position: fixed; top: 0; right: 0; width: 260px; visibility: hidden; } .cd-main-nav.nav-is-visible { visibility: visible; } .cd-main-nav li ul { position: absolute; top: 0; left: 0; width: 100%; transform: translateX(260px); } .cd-main-nav.moves-out > li > a { /* перемещаем пункты меню основной навигации влево и уменьшаем прозрачность, когда появляется второстепенная навигация */ transform: translateX(-100%); opacity: 0; } .cd-main-nav.moves-out > li > ul { /* показываем второстепенную навигацию */ transform: translateX(0); } |
На настольных компьютерах (у которых ширина экрана больше 1024px) второстепенная навигация расположена вверху элемента header (за пределами области видимости), и плавно выезжает сверху, закрывая собой основную навигацию. Мы задали для элемента с классом .cd-logo и элемента с классом .cd-subnav-trigger более высокое значение для свойства z-index, чтобы они оставались видимыми даже после появления подменю.
Кроме этого мы назначили такой же внутренний отступ (padding) для подменю, как и для элемента с классом .cd-main-nav и добавили в качестве последнего элемента списка элемент с классом .placeholder, который занимает столько же места, сколько и элемент с классом .cd-subnav-trigger: таким образом мы можем быть уверены в том, что элементы списка в подменю не перекроют собой ни логотип, ни элемент с классом .cd-subnav-trigger.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
@media only screen and (min-width: 1024px) { .cd-main-nav { height: 80px; /* значение левого отступа = размер логотипа + позиционирование логотипа слева */ padding: 0 5% 0 calc(5% + 124px); text-align: right; } .cd-main-nav li ul { height: 80px; background-color: #7e4d7e; /* значение левого отступа = размер логотипа + позиционирование логотипа слева */ padding: 0 5% 0 calc(5% + 124px); transform: translateY(-80px); transition: transform 0.3s 0.2s; } .cd-main-nav li ul li { opacity: 0; transform: translateY(-20px); transition: transform 0.3s 0s, opacity 0.3s 0s; } .cd-main-nav .placeholder { /* всегда невидимый и некликабельный. Нужен только для выделения такого же пространства, что и элемент с классом .cd-subnav-trigger */ display: block; visibility: hidden; opacity: 0; pointer-event: none; } .cd-main-nav.moves-out > li > ul { transition: transform 0.3s; transform: translateY(0); } .cd-main-nav.moves-out > li ul li { opacity: 1; transform: translateY(0); transition: transform 0.3s 0.2s, opacity 0.3s 0.2s; } } |
Обработка событий
Мы используем jQuery, чтобы добавить/удалить классы в зависимости от определенных событий.
Единственное, на что следует обратить внимание, – это то, что в исходной HTML структуре навигация расположена внутри тега <header>. На мобильных устройствах мы решили расположить навигацию слева, и нам было бы проще управлять ею, если бы она располагалась вне элемента header. Поэтому мы используем jQuery, чтобы переместить навигацию за пределы элемента header на устройствах с небольшим экраном.
Автор: Claudia Romano
Источник: //codyhouse.co/
Редакция: Команда webformyself.
