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

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

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

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

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

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

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

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

<header>
<div class="cd-logo"><a href="#0"><img src="img/cd-logo.svg" alt="Logo"></a></div>
 
<nav class="cd-main-nav-wrapper">
<ul class="cd-main-nav">
<li><a href="#0">About</a></li>
<!-- другие пункты меню расположены здесь -->
<li>
<a href="#0" class="cd-subnav-trigger"><span>Categories</span></a>
 
<ul>
<li class="go-back"><a href="#0">Menu</a></li>
<li><a href="#0">Category 1</a></li>
<!-- другие пункты меню расположены здесь -->
</ul>
</li>
</ul>
</nav> 
<a href="#0" class="cd-nav-trigger">Menu<span></span></a>
</header>
 
<main class="cd-main-content">
<!-- здесь расположен основной контент -->
</main>

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

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

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

header.nav-is-visible {
  transform: translateX(-260px);
}
.cd-main-content.nav-is-visible {
  transform: translateX(-260px);
}
.cd-main-nav {
  position: fixed;
  top: 0;
  right: 0;
  width: 260px;
  visibility: hidden;
}
.cd-main-nav.nav-is-visible {
  visibility: visible;
}
.cd-main-nav li ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: translateX(260px);
}
.cd-main-nav.moves-out > li > a {
  /* перемещаем пункты меню основной навигации влево и уменьшаем прозрачность, когда появляется второстепенная навигация */
  transform: translateX(-100%);
  opacity: 0;
}
.cd-main-nav.moves-out > li > ul {
  /* показываем второстепенную навигацию */
  transform: translateX(0);
}

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

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

@media only screen and (min-width: 1024px) {
  .cd-main-nav {
    height: 80px;
    /* значение левого отступа = размер логотипа + позиционирование логотипа слева */
    padding: 0 5% 0 calc(5% + 124px);
    text-align: right;
  }
  .cd-main-nav li ul {
    height: 80px;
    background-color: #7e4d7e;
    /* значение левого отступа = размер логотипа + позиционирование логотипа слева */
    padding: 0 5% 0 calc(5% + 124px);
    transform: translateY(-80px);
    transition: transform 0.3s 0.2s;
  }
  .cd-main-nav li ul li {
    opacity: 0;
    transform: translateY(-20px);
    transition: transform 0.3s 0s, opacity 0.3s 0s;
  }
  .cd-main-nav .placeholder {
    /* всегда невидимый и некликабельный. Нужен только для выделения такого же пространства, что и элемент с классом .cd-subnav-trigger */
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-event: none;
  }
  .cd-main-nav.moves-out > li > ul {
    transition: transform 0.3s;
    transform: translateY(0);
  }
  .cd-main-nav.moves-out > li ul li {
    opacity: 1;
    transform: translateY(0);
    transition: transform 0.3s 0.2s, opacity 0.3s 0.2s;
  }
}

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

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

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

Автор: Claudia Romano

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

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

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

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

Получить

Метки: , ,

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree