От автора: Отзывчивая и легко изменяемая навигация для крупных веб-сайтов или Интернет-магазинов, украшенная изящной CSS анимацией и имеющая поддержку устройств с отключенным JavaScript.
В предыдущих статьях на сайте CodyHouse мы уже рассматривали несколько вариантов создания навигации для сайта. Они подойдут для небольших или средних веб-сайтов, где нет необходимости в сложной системе навигации. Но на этот раз мы хотели бы поработать над созданием чего-то более сложного: мега-меню!
Над чем нам предстоит поработать: изначально проектируя меню под мобильные устройства, я не захотел создавать эффект «аккордеона» для отображения подменю (как мы это делали в статье Дополнительное выдвижное меню). Поэтому я остановил свой выбор на эффекте «появления». А также учитывая недостаток мега-меню, заключающийся в том, что основные категории обычно не являются кликабельными, я предусмотрел кнопку «посмотреть всё» (если вы посмотрите на демо-пример, то сразу поймете, что я имею в виду).
На устройствах с большим экраном я постарался избежать эффекта нескончаемой вложенности подменю, когда вы вынуждены перемещаться с одной появляющейся колонки к другой в поисках нужного пункта меню. Мне кажется, если сразу же показывать дополнительные пункты меню, то это только улучшит пользовательский опыт взаимодействия.
Иконки, которые вы найдете в исходниках, были созданы талантливым человеком, Дарио Феррандо (Dario Ferrando). Вы можете бесплатно скачать их с сайта Freebiesbug.com.
Создание структуры
HTML разметка сложной навигации обычно состоит из вложенных ненумерованных списков. Наш пример не является исключением. Мы создали 4 основных раздела: header, main, nav и div с классом .cd-search. Вас может удивить то, что навигация не обернута в элемент header: на самом деле мы так и сделаем, но только для устройств с большим экраном (где ширина области просмотра (viewport) >= 1170px), используя для этого jQuery. На устройствах с маленьким экраном легче управлять навигацией, как отдельным элементом.
|
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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<header class="cd-main-header"> <a class="cd-logo" href="#0"><img src="img/cd-logo.svg" alt="Logo"></a> <ul class="cd-header-buttons"> <li><a class="cd-search-trigger" href="#cd-search">Search<span></span></a></li> <li><a class="cd-nav-trigger" href="#cd-primary-nav">Menu<span></span></a></li> </ul> <!-- cd-header-buttons --> </header> <main class="cd-main-content"> <!—здесь расположен контент --> <div class="cd-overlay"></div> </main> <nav class="cd-nav"> <ul id="cd-primary-nav" class="cd-primary-nav is-fixed"> <li class="has-children"> <a href="#0">Clothing</a> <ul class="cd-secondary-nav is-hidden"> <li class="go-back"><a href="#0">Menu</a></li> <li class="see-all"><a href="#0">All Clothing</a></li> <li class="has-children"> <a href="#0">Accessories</a> <ul class="is-hidden"> <li class="go-back"><a href="#0">Clothing</a></li> <li class="see-all"><a href="#0">All Accessories</a></li> <li class="has-children"> <a href="#0">Beanies</a> <ul class="is-hidden"> <li class="go-back"><a href="#0">Accessories</a></li> <li class="see-all"><a href="#0">All Benies</a></li> <li><a href="#0">Caps</a></li> <li><a href="#0">Gifts</a></li> <li><a href="#0">Scarves</a></li> </ul> </li> <li><!-- ... --></li> </ul> </li> <li><!-- ... --></li> <li><!-- ... --></li> <li><!-- ... --></li> </ul> </li> <li class="has-children"> <!-- ... --> </li> <li class="has-children"> <!-- ... --> </li> <li><a href="#0">Standard</a></li> </ul> <!-- основная навигация --> </nav> <!-- cd-nav --> <div id="cd-search" class="cd-search"> <form> <input type="search" placeholder="Search..."> </form> </div> |
Добавление стилей
CSS код довольно простой. Однако количество кода, требующееся для оформления этого небольшого полезного примера, значительно превышает код, который мы пишем для наших обычных примеров. Вы можете скачать исходники и посмотреть, как нам удалось создать красивую анимацию для данного меню.
Один важный момент: я создал 2 класса, которые можно использовать, чтобы немного изменить поведение нашей навигации. Обратите внимание на то, что оба класса должны быть назначены элементу body:
nav-is-fixed – если вы хотите фиксированную навигацию
nav-on-left – если вы хотите, чтобы навигация отображалась с левой стороны на мобильных устройствах
Я не знаю, используете ли вы, друзья, CSS препроцессоры или нет (мы используем для всех наших примеров SASS). Если вы не используете их, то я вам рекомендую попробовать. В качестве стимула покажу, как легко можно изменить некоторые настройки навигации с помощью SASS (да, мы может объявлять переменные!):
|
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 |
// цвета $color-1: #2e3233; // темно-серый $color-2: #69aa6f; // зеленый $color-3: #e2e3df; // светло-серый $color-4: #ffffff; // белый // шрифты $primary-font: sans-serif; // размер «шапки» $header-height-S: 50px; $header-height-L: 80px; // размер навигации $nav-width-S: 260px; // размер поиска $search-height-S: 50px; $search-height-L: 120px; // z-index $below-content: 1; $content: 2; $above-content: 3; |
Если это пока выглядит пугающе, то данное руководство на сайте WebDesignerDepot послужит для вас хорошей отправной точкой.
Обработка событий
В jQuery нам не потребуется писать много кода, за исключением добавления классов для отдельных событий. Единственный важный момент — обратить внимание на то, что в исходной HMTL разметке навигация распложена за пределами элемента header. Поскольку мы создавали навигацию вначале для мобильных устройств, мы хотели сделать так, чтобы навигация находилась с какой-то одной стороны и была изначально скрыта, поэтому нам было легче ей управлять вне «шапки» (хедера). На компьютерных мониторах (где ширина области просмотра больше 1170px) мы используем jQuery, чтобы поместить навигацию внутрь «шапки».
Автор: Sebastiano Guerriero
Источник: //codyhouse.co/
Редакция: Команда webformyself.
Комментарии (3)