Автор

Навигация по сайту

Навигация по сайту


Удобная и легко настраиваемая навигация для мегасайтов, обогащенная тонкой анимацией CSS и поддержкой устройств с отключенным javascript.

 

ДЕМО
ИСХОДНИКИ

 

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

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

На больших устройствах я старался избегать бесконечного вложенного подхода, когда вы переходите от одного столбца к другому при просмотре подпозиций. Прямое отображение дополнительных вариантов навигации выглядит как лучшее решение UX.

 

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

Структура HTML сложной навигации обычно состоит из вложенных неупорядоченных списков. Этот не делает исключения. Мы создали 4 основных раздела: header, main, nav и .cd-search. Вы можете удивиться, почему навигация не упакована в элемент header: мы перемещаем его внутри для более крупных устройств (ширина области просмотра = 1170 пикселей) с помощью 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">
<!-- your content here -->

<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> <!-- primary-nav -->
</nav> <!-- cd-nav -->

<div id="cd-search" class="cd-search">
<form>
<input type="search" placeholder="Search...">
</form>
</div>

 

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

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

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

  1. Nav-is-fixed - если вы хотите фиксированную навигацию
  2. Nav-on-left - если вы хотите навигацию с левой стороны на мобильных устройствах

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

// colors
 
$color-1: #2e3233; // grey dark
$color-2: #69aa6f; // green
$color-3: #e2e3df; // grey light 
$color-4: #ffffff; // white
 
// fonts 
 
$primary-font: sans-serif;
 
// header size
 
$header-height-S: 50px;
$header-height-L: 80px;
 
// Navigation size
 
$nav-width-S: 260px;
 
// Search size
 
$search-height-S: 50px;
$search-height-L: 120px;
 
// z-index
 
$below-content: 1;
$content: 2;
$above-content: 3;

Если это звучит страшно, это руководство WebDesignerDepot может стать хорошей отправной точкой.

 

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

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

 

Вот и всё!


Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

Навигация по сайту

Предлагаю вам, на мой взгляд, стильные и креативные SVG иконки с длинными тенями (46 шт.). Это коллекция иконок, распространяемых под лицензионным соглашением Creative Commons Attribution, а это значит, что вы можете использовать их бесплатно как в личных, так и в коммерческих проектах.


Навигация по сайту

Обычные тени легко реализовать с помощью box-shadow или text-shadow. Но как быть, если необходимо сделать внутренние тени? В этой статье описывается, как сделать такие тени с помощью всего нескольких строчек кода.


Навигация по сайту

Отображение морфинга, которое оживляет в соответствии с размером его содержимого.


Навигация по сайту

В этой статье подготовлены 8 интересных эффектов для изображений, которые Вы можете применить на своем сайте. Каждый эффект состоит из HTML разметки и стилей CSS. Вам остается только скопировать и добавить в свой исходный код.


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close