Второстепенная выдвигающаяся навигация на CSS и jQuery

Второстепенная выдвигающаяся навигация на CSS и jQuery

От автора: Смелая реализация второстепенного меню, которое плавно появляется поверх основного меню. Сегодня мы расскажем о простом и полезном приеме: второстепенная навигация плавно выдвигается вниз, заменяя собой ссылки основного меню.

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

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

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

В HTML содержится 2 основных элемента: элемент <header>, служащий оберткой для основного меню, и элемент <main>, содержащий контент страницы.

Основная навигация состоит из 2 вложенных ненумерованных списков, обернутых в семантических целях в элемент <nav>.

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

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

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

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

На небольших экранах основная навигация будет расположена справа и будет скрыта по умолчанию; когда пользователь кликает по иконке меню, элементы <main> и <header> перемещаются влево (происходит добавление класса .nav-is-visible), чтобы отобразить навигацию.

Когда пользователь кликает по элементу с классом .cd-subnav-trigger, основная навигация отодвигается влево и заменяется второстепенной навигацией.

На настольных компьютерах (у которых ширина экрана больше 1024px) второстепенная навигация расположена вверху элемента header (за пределами области видимости), и плавно выезжает сверху, закрывая собой основную навигацию. Мы задали для элемента с классом .cd-logo и элемента с классом .cd-subnav-trigger более высокое значение для свойства z-index, чтобы они оставались видимыми даже после появления подменю.

Кроме этого мы назначили такой же внутренний отступ (padding) для подменю, как и для элемента с классом .cd-main-nav и добавили в качестве последнего элемента списка элемент с классом .placeholder, который занимает столько же места, сколько и элемент с классом .cd-subnav-trigger: таким образом мы можем быть уверены в том, что элементы списка в подменю не перекроют собой ни логотип, ни элемент с классом .cd-subnav-trigger.

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

Мы используем jQuery, чтобы добавить/удалить классы в зависимости от определенных событий.

Единственное, на что следует обратить внимание, – это то, что в исходной HTML структуре навигация расположена внутри тега <header>. На мобильных устройствах мы решили расположить навигацию слева, и нам было бы проще управлять ею, если бы она располагалась вне элемента header. Поэтому мы используем jQuery, чтобы переместить навигацию за пределы элемента header на устройствах с небольшим экраном.

Автор: Claudia Romano

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

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

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

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

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

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки: , ,

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

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

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

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

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