CSS и jQuery Вторичное Расширяемое Меню

jQuery 01.08.2019

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

ДЕМО

ИСХОДНИКИ

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

Преимущества: вторичная навигация скрыта под основным содержанием страницы; щелчок по значку меню позволяет плавно переводить содержимое страницы, открывая скрытую навигацию. Нравится!

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

Мы вставили основную навигацию в элемент <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); к псевдоэлементам. Это сработало!