Автор

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

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


Удобная и легко настраиваемая навигация для мегасайтов, обогащенная тонкой анимацией 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

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


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

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

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


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

Любой вебразработчик или дизайнер сайтов, которому когда-либо доводилося ознакомиться со стилевою системою Twitter Bootstrap, уж конечно помнит, что в ней применяются значки Glyphicons (120 штук) для оформления кнопок, и панелей инструментов, и пунктов в списках, и так далее. Распространяются эти значки бесплатно и свободно (по лицензии CC BY 3.0).


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

Сегодня мы рассмотрим еще один вариант слайдеров для сайта, все это имеет вид автоматического аккордеона с возможностью подписи изображений, а так же с возможностью выбора и нумерации слайда. Для всего этого мы будем использовать liteAccordion - небольшой плагин jQuery для быстрого создания горизонтального аккордеона. Он имеет размер ~1.4kb (в минимизированном варианте) и может выводить любые элементы HTML (изображения, тексты, видео, Flash..). Давайте посмотрим какой все это имеет вид..


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

В передыдущих уроках «Интересные кнопки поделиться в соцсетях на CSS3»  и «Анимация кнопки читать в Twitter на CSS3» я писал как можно сделать интересные и необычные кнопки для соцсетей, а самое главное, что без скриптов и на чистом CSS. Продолжая эту тему хочу поделиться очередной рпример оформления своего сайта!


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close