Адаптивная навигация по сайту на jQuery и CSS

Удобная и легко настраиваемая навигация для мегасайтов, обогащенная тонкой анимацией 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-lang.com для всех наших ресурсов. Если вы этого не сделаете, я настоятельно рекомендую вам попробовать. В качестве стимула проверьте, как легко было бы изменить некоторые параметры навигации с помощью 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.com/2013/11/the-beginners-guide-to-sass может стать хорошей отправной точкой.

 

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

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

 

Вот и всё!

---