Эта простая адаптивная навигация позволяет пользователям сосредоточиться на нескольких важных пунктах меню, в то время как вся навигация по-прежнему доступна, всего одним щелчком мыши.
Навигация всегда должна быть доступна пользователям. Но есть случаи, когда в заголовке недостаточно места для отображения всех элементов меню, или вы просто хотите придать больше значения некоторым элементам, а не другим. В этих случаях вторичная навигация может сделать работу!
Преимущества: вторичная навигация скрыта под основным содержанием страницы; щелчок по значку меню позволяет плавно переводить содержимое страницы, открывая скрытую навигацию. Нравится!
Создание структуры
Мы вставили основную навигацию в элемент <header>
и использовали элемент <main>
, чтобы обернуть весь наш контент. Мы вставили вторичную навигацию за пределы элемента <main>
, чтобы она не влияла на CSS-перевод основного содержимого.
<header>
<!-- logo here -->
<nav id="cd-top-nav"><!-- your primary navigation here --></nav>
<a id="cd-menu-trigger" href="#0"><span class="cd-menu-text">Menu</span><span class="cd-menu-icon"></span></a>
</header>
<main class="cd-main-content">
<!-- put your content here -->
</main>
<nav id="cd-lateral-nav"><!-- your secondary navigation here --></nav>
Во вторичной навигации мы создали два отдельных неупорядоченных списка, один для элементов с элементами подменю и один для простых элементов. Также был добавлен контейнер .socials
для ваших социальных ссылок.
<nav id="cd-lateral-nav">
<ul class="cd-navigation">
<li class="item-has-children">
<a href="#0">Products</a>
<ul class="sub-menu">
<!-- all its children here -->
</ul>
</li>
<!-- other .item-has-children here -->
</ul>
<ul class="cd-navigation cd-single-item-wrapper">
<li><a href="#0">Info</a></li>
<!-- other simple items here -->
</ul>
<div class="cd-navigation socials">
<a class="cd-twitter cd-img-replace" href="#0">Twitter</a>
<a class="cd-github cd-img-replace" href="#0">Git Hub</a>
<a class="cd-facebook cd-img-replace" href="#0">Facebook</a>
<a class="cd-google cd-img-replace" href="#0">Google Plus</a>
</div>
</nav>
Добавление стиля
Чтобы анимировать элемент <main>
, мы объединили Преобразование CSS3 с Переходом CSS3:
.cd-main-content {
/* set a min-height and a z-index to be sure that the main element completely covers the lateral menu */
min-height: 100%;
z-index: 2;
transition-property: transform;
transition-duration: 0.4s;
}
.cd-main-content.lateral-menu-is-open {
transform: translateX(-260px);
}
Мы сделали то же самое, чтобы оживить <header>
.
Обратите внимание, что для назначения минимальной высоты элементу <main>
мы устанавливаем height: 100%; в <body>
и <html>
. Но в конечном итоге у вас будет содержимое прямо под заголовком, поэтому эти свойства могут не понадобиться.
По умолчанию основная навигация прокручивается вместе с содержимым. Чтобы переключить навигацию прокрутки формы (в позиции: absolute;
) на фиксированную навигацию, добавьте класс .is-fixed
к элементу <header>
.
Интересное примечание: значок гамбургера и значок «X»
, который заменяет его при отображении меню, были созданы в CSS. Мы использовали элемент <span>
и 2 псевдоэлемента (:: before
и :: after
). Теперь, когда «X»
видим, мы скрываем элемент <span>
, устанавливая видимость: hidden;
в то время как для псевдоэлементов мы устанавливаем visibility: visible;
- поскольку свойство видимости не наследуется по умолчанию (в отличие от свойств Display и Opacity). Это сработало ... за исключением IE, где, похоже, псевдоэлементы наследуют родительское свойство видимости. Хитрость заключалась в том, чтобы использовать функцию rgba
, чтобы придать цвет фона: rgba (255, 255, 255, 0);
элементу <spann>
, тогда как background-color: rgba (255, 255, 255, 1);
к псевдоэлементам. Это сработало!
Обработка событий
Ничего особенного в файле jQuery, кроме добавления / удаления классов в соответствии с конкретными событиями. В следующий раз будет лучше!