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

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

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

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

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

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

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

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

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

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

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

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

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

Добавление стилей

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

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

nav-is-fixed – если вы хотите фиксированную навигацию

nav-on-left – если вы хотите, чтобы навигация отображалась с левой стороны на мобильных устройствах

Я не знаю, используете ли вы, друзья, CSS препроцессоры или нет (мы используем для всех наших примеров SASS). Если вы не используете их, то я вам рекомендую попробовать. В качестве стимула покажу, как легко можно изменить некоторые настройки навигации с помощью SASS (да, мы может объявлять переменные!):

Если это пока выглядит пугающе, то данное руководство на сайте WebDesignerDepot послужит для вас хорошей отправной точкой.

Обработка событий

В jQuery нам не потребуется писать много кода, за исключением добавления классов для отдельных событий. Единственный важный момент — обратить внимание на то, что в исходной HMTL разметке навигация распложена за пределами элемента header. Поскольку мы создавали навигацию вначале для мобильных устройств, мы хотели сделать так, чтобы навигация находилась с какой-то одной стороны и была изначально скрыта, поэтому нам было легче ей управлять вне «шапки» (хедера). На компьютерных мониторах (где ширина области просмотра больше 1170px) мы используем jQuery, чтобы поместить навигацию внутрь «шапки».

Автор: Sebastiano Guerriero

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

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

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

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

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

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

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

Получить

Метки: ,

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

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

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

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

  1. алина

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

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

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

      • алина

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

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

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