Навигация для крупного веб-сайта или Интернет-магазина

Навигация для крупного веб-сайта или Интернет-магазина

От автора: Отзывчивая и легко изменяемая навигация для крупных веб-сайтов или Интернет-магазинов, украшенная изящной CSS анимацией и имеющая поддержку устройств с отключенным JavaScript.

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

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

Над чем нам предстоит поработать: изначально проектируя меню под мобильные устройства, я не захотел создавать эффект «аккордеона» для отображения подменю (как мы это делали в статье Дополнительное выдвижное меню). Поэтому я остановил свой выбор на эффекте «появления». А также учитывая недостаток мега-меню, заключающийся в том, что основные категории обычно не являются кликабельными, я предусмотрел кнопку «посмотреть всё» (если вы посмотрите на демо-пример, то сразу поймете, что я имею в виду).

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

Иконки, которые вы найдете в исходниках, были созданы талантливым человеком, Дарио Феррандо (Dario Ferrando). Вы можете бесплатно скачать их с сайта Freebiesbug.com.

Создание структуры

HTML разметка сложной навигации обычно состоит из вложенных ненумерованных списков. Наш пример не является исключением. Мы создали 4 основных раздела: header, main, nav и div с классом .cd-search. Вас может удивить то, что навигация не обернута в элемент header: на самом деле мы так и сделаем, но только для устройств с большим экраном (где ширина области просмотра (viewport) >= 1170px), используя для этого jQuery. На устройствах с маленьким экраном легче управлять навигацией, как отдельным элементом.

<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 (да, мы может объявлять переменные!):

// цвета
 
$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

Источник: http://codyhouse.co/

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

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

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

Получить

Метки: ,

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

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

Комментарии (3)

  1. алина

    спасибо за статью.
    а можно ли при использовании стандартного меню (которое шло с темой), сделать заголовок активной ссылкой? то есть, у меня есть вертикальное меню с категориями товара. оно назвается «каталог товаров». вот этот «каталог товаров» просто надпись. а можно ли сделать так, чтобы это была ссылка, при нажатии на которую попадать в полный каталог (или магазин ещё называют)?

    • Андрей Кудлай

      Алина, не совсем понятен вопрос, но подозреваю, что речь идет о теме WordPress. Если так, то делается это достаточно просто, в общем случае достаточно обернуть текст заголовка в ссылку — тег a.
      Чтобы конкретнее ответить на Ваш вопрос, необходимо взглянуть на код темы. Можете создать тему на нашем форуме и дать ссылку на архив с темой.

      • алина

        спасибо! вы всё правильно поняли. попробую так сделать, если не получится создам такую тему )

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

Ваш 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