Автор

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

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


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

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

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


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

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


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

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


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

Вам необходимо организовать сетку для изображений, с динамической подгрузкой изображений, аналогом можно привести стену вконтакте по подгружаемости контента. В данном уроке мы рассмотрим как реализовать данный эффект.  На самом деле возможностей реализовать этот эффект достаточно много, и мы бы хотели поделиться своим опытом. Некоторые эффекты позаимствованы от CSS3 scroll effects, написанных Hakim El Hattab. Для распределения изображений в сетке, воспользуемся библиотекой Masonry.


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close