Полноэкранная всплывающая навигация на CSS и jQuery

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

ДЕМО

ИСХОДНИКИ

Распространенным подходом становится скрыть навигацию, сделать ее доступной после щелчка по ссылке меню. Некоторые из вас могут возразить: «На один щелчок больше, чем необходимо». Это действительно зависит от конкретного случая ИМО. Я имею в виду, что Amazon никогда не сможет скрыть всю навигацию на большом устройстве. Но если у вас есть веб-сайт с относительно скромным объемом контента, огромным меню с несколькими важными кнопками с призывом к действию, имеет смысл сначала привлечь внимание пользователя к этим кнопкам, а затем позволить ему / ей изучить остальное.

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

Изображение предоставлено: Unsplash.

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

Мы создали элемент <header>, чтобы обернуть логотип, вторичную навигацию (вход / регистрация) и триггер для первичной навигации (.cd-primary-nav-trigger). Основная навигация находится за пределами заголовка, что упрощает обработку эффектов преобразования CSS. И первичная, и вторичная навигация представляют собой неупорядоченные списки, семантически завернутые в элемент <nav>.

<header class="cd-header">
   <div class="cd-logo"><!-- ... --></div>

   <nav>
      <ul class="cd-secondary-nav">
         <li><a href="#0">Log In</a></li>
         <li><a href="#0">Register</a></li>
      </ul>
   </nav> <!-- cd-nav -->

   <a class="cd-primary-nav-trigger" href="#0">
      <span class="cd-menu-text">Menu</span><span class="cd-menu-icon"></span>
   </a> <!-- cd-primary-nav-trigger -->
</header>

<nav>
   <ul class="cd-primary-nav">
      <li class="cd-label">About us</li>
      <li><a href="#0">The team</a></li>
      <li><a href="#0">Our services</a></li>
      <li><a href="#0">Our projects</a></li>
      <li><!-- ... --></li>
   </ul>
</nav>

<main>
   <!-- content -->
</main>

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

Прежде всего, чтобы создать эффект вставки основной навигации, мы используем комбинацию переходов и преобразований CSS3. По умолчанию навигация скрывается, если нажать ее прямо над окном просмотра (translateY (-100%)). Когда пользователь нажимает на элемент триггера (.cd-primary-nav-trigger), мы используем jQuery для добавления класса .is-visible в навигацию. Переход, примененный к свойству преобразования, сглаживает движение.

.cd-primary-nav {
  /* by default it's hidden - on top of the viewport */
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  transform: translateY(-100%);
  transition-property: transform;
  transition-duration: 0.4s;
}

.cd-primary-nav.is-visible {
  transform: translateY(0);
}

Для эффекта вставки заголовка, который активируется, когда пользователь меняет направление прокрутки с вниз на вверх, нам нужно было создать несколько классов и обработать их через jQuery. По умолчанию заголовок находится в абсолютном положении: это означает, что он прокручивается вместе с содержимым (он находится в абсолютном положении, поэтому мы можем разместить его поверх фонового изображения). Как только заголовок больше не виден, мы даем ему .is-fixed class, тем самым изменяя его положение с абсолютного на фиксированное и помещая его прямо над окном просмотра (top: -80px). Когда пользователь прокручивает вверх, заголовок возвращается: мы даем ему класс .is-visible, таким образом мы перемещаем его вниз по оси Y (translate3d (0, 100%, 0)).

.cd-header {
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
  height: 80px;
  width: 100%;
  transition: background-color 0.3s;
}

.cd-header.is-fixed {
  /* when the user scrolls down, we hide the header right above the viewport */
  position: fixed;
  top: -80px;
  background-color: rgba(2, 23, 37, 0.96);
  transition: transform 0.3s;
}

.cd-header.is-visible {
  /* if the user changes the scrolling direction, we show the header */
  transform: translate3d(0, 100%, 0);
}

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

Когда пользователь начинает прокрутку, нам нужно определить, прокручивает ли он вверх или вниз, и соответственно добавить / удалить классы в основную навигацию:

$(window).on('scroll',
   {
      previousTop: 0
   }, 
   function () {
      var currentTop = $(window).scrollTop();
      //check if user is scrolling up
      if (currentTop < this.previousTop ) {
         //if scrolling up...
         //add class 'is-visible' to the main navigation
         //if currentTop == 0, remove 'is-fixed' and 'is-visible' classes 
      } else {
         //if scrolling down...
         //add the 'is-fixed' class to the main navigation as soon as it is no longer visible
         //add class 'is-visible' to the main navigation
      }
      //set previousTop for the next iteration
      this.previousTop = currentTop;
   }
);

Конец! 🎬

---

Автор Себастьяно Герриеро