Как создать Off-Canvas меню с использованием CSS и немного JavaScript

Дата публикации: 2018-03-19

От автора: в этом руководстве мы рассмотрим простой, но эффективный способ создания Off Canvas меню с использованием HTML, CSS и JavaScript.

Чтобы получить представление о том, что мы будем создавать, ознакомьтесь с соответствующей демо-версией на CodePen (для лучшего понимания ознакомьтесь с большей версией):

Примечание. В этом руководстве я не буду уделять внимание тому, как сделать Off-Canvas меню доступным или адаптивным, поэтому это, безусловно, будет правильным следующим шагом.

1. Начнем с разметки

Наша разметка состоит из двух элементов контейнеров:

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

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

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

элемент .top-banner

элемент .top-nav

Вот код HTML:

<section class="top-banner">
  <div class="top-banner-overlay">
    <!-- content here -->
  </div>
</section>
 
<nav class="top-nav">
  <div class="menu-wrapper">
    <!-- content here -->
  </div>
  <div class="fixed-menu">
    <!-- content here -->
  </div>
</nav>

</div>

</section>

</div>

</div>

</nav>

2. Далее нам нужны стили CSS

После того, как разметка готова, мы рассмотрим наиболее важные стили, которые требуются для нашего меню.

Примечание. Для удобства чтения этот CSS-код не оптимизирован — вы увидите повторяющиеся свойства, которые вы в своей версии можете сократить.

Стили элемента top-banner

Элемент .top-banner выглядит так:

Что касается его стилей, мы делаем следующее:

Устанавливаем его ширину равной ширине окна минус ширина элемента .menu-wrapper.

Устанавливаем его высоту, равной высоте окна.

Определяем его как flex-контейнер. Таким образом он будет перекрывать всю высоту родительского элемента.

Используем flexbox для вертикального центрирования наложенного контента.

Вот стили, с помощью которых это достигается:

.top-banner {
  display: flex;
  width: calc(100% - 150px);
  height: 100vh;
  transform: translateX(150px);
  background: url(IMAGE_PATH) no-repeat center / fixed;
}
 
.top-banner-overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 350px;
  padding: 20px;
  transition: transform .7s;
  color: white;
  background: rgba(0, 0, 0, .7);
}

.top-banner {

display: flex;

width: calc(100% - 150px);

height: 100vh;

transform: translateX(150px);

background: url(IMAGE_PATH) no-repeat center / fixed;

}

.top-banner-overlay {

display: flex;

flex-direction: column;

justify-content: center;

width: 350px;

padding: 20px;

transition: transform .7s;

color: white;

background: rgba(0, 0, 0, .7);

}

Стили элемента top-nav

Элемент .top-nav выглядит так:

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

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

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

Для этого мы делаем следующее:

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

Используем flexbox для вертикального выравнивания элемента .fixed-menu.

Скрываем по умолчанию элемент .menu-wrapper. Но для этого мы не задаем для него значение свойства наподобие display: none. На самом деле мы используем функцию translate(), чтобы переместить его на 200 пикселей влево. Имейте в виду, что ширина элемента составляет 350 пикселей, поэтому его часть все еще находится в области просмотра. Однако ее не видно, потому что элемент расположен под элементом .fixed-menu.

Скрываем список меню.

Вот стили CSS:

.top-nav .menu-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 350px;
  padding: 20px;
  transform: translateX(-200px);
  transition: transform .7s;
  background: #B1FFE5;
}
 
.top-nav .menu-wrapper .menu {
  opacity: 0;
  transition: opacity .4s;
}
 
.top-nav .fixed-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 150px;
  padding: 20px;
  background: aquamarine;
}

.top-nav .menu-wrapper {

position: fixed;

top: 0;

left: 0;

bottom: 0;

width: 350px;

padding: 20px;

transform: translateX(-200px);

transition: transform .7s;

background: #B1FFE5;

}

.top-nav .menu-wrapper .menu {

opacity: 0;

transition: opacity .4s;

}

.top-nav .fixed-menu {

position: fixed;

top: 0;

left: 0;

bottom: 0;

display: flex;

flex-direction: column;

width: 150px;

padding: 20px;

background: aquamarine;

}

Теперь немного JavaScript

На этом этапе мы будем использовать простой код JavaScript для управления состоянием off-canvas меню. Ниже приводится описание необходимых действий:

Когда нажата кнопка .menu-open, меню должно выводиться с красивым эффектом слайда, а элемент наложения должен одновременно сдвигаться вправо. По желанию мы можем сделать больше вещей. В нашем примере мы добавляем тень к псевдо-элементу ::before для элемента наложения и выводим список меню, используя эффект проявления.

Когда нажата кнопка .menu-close, меню должно скрываться с красивым эффектом слайда, а элемент наложение должен одновременно смещаться влево.

Вот код JavaScript, с помощью которого реализуется такое поведение:

const menuOpen = document.querySelector(".top-nav .menu-open");
const menuClose = document.querySelector(".top-nav .menu-close");
const menuWrapper = document.querySelector(".top-nav .menu-wrapper");
const topBannerOverlay = document.querySelector(".top-banner-overlay");
 
function toggleMenu() {
  menuOpen.addEventListener("click", () => {
    menuWrapper.classList.add("is-opened");
    topBannerOverlay.classList.add("is-moved");
  });
   
  menuClose.addEventListener("click", () => {
    menuWrapper.classList.remove("is-opened");
    topBannerOverlay.classList.remove("is-moved");
  });
}
 
toggleMenu();

const menuOpen = document.querySelector(".top-nav .menu-open");

const menuClose = document.querySelector(".top-nav .menu-close");

const menuWrapper = document.querySelector(".top-nav .menu-wrapper");

const topBannerOverlay = document.querySelector(".top-banner-overlay");

function toggleMenu() {

menuOpen.addEventListener("click", () => {

menuWrapper.classList.add("is-opened");

topBannerOverlay.classList.add("is-moved");

});

menuClose.addEventListener("click", () => {

menuWrapper.classList.remove("is-opened");

topBannerOverlay.classList.remove("is-moved");

});

}

toggleMenu();

Ниже приводятся связанные стили CSS:

.top-banner-overlay.is-moved {
  transform: translateX(350px);
}
 
.top-banner-overlay.is-moved::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 20px;
  box-shadow: 0 0 10px black;
}
 
.top-nav .menu-wrapper.is-opened {
  transform: translateX(150px);
}
 
.top-nav .menu-wrapper.is-opened .menu {
  opacity: 1;
  transition-delay: .6s;
}

.top-banner-overlay.is-moved {

transform: translateX(350px);

}

.top-banner-overlay.is-moved::before {

content: '';

position: absolute;

top: 0;

bottom: 0;

right: 100%;

width: 20px;

box-shadow: 0 0 10px black;

}

.top-nav .menu-wrapper.is-opened {

transform: translateX(150px);

}

.top-nav .menu-wrapper.is-opened .menu {

opacity: 1;

transition-delay: .6s;

}

4. Поддержка браузерами

Эта демо-версия нормально работать только в стационарных браузерах. Для мобильных устройств потребуется другой макет страницы, но это выходит за рамки данного руководства. Как обычно, мы используем Babel для компиляции кода ES6 в ES5.

Единственная небольшая проблема, с которой я столкнулся при тестировании, — это изменение текста, которое происходит при анимации элемента наложения. Хотя я пробовал различные подходы, я не смог найти простое решение для всех операционных систем и браузеров. Поэтому имейте в виду, что вы можете столкнуться с небольшими проблемами, связанными с отображением шрифтов.

Заключение

Вот и все, ребята! Нам удалось создать off-canvas меню с использованием относительно простого кода. Надеюсь, вам понравился конечный результат, и вы используете его для вдохновения при создании других, более функциональных off-canvas меню. И, конечно, если вы их создадите, не забудьте поделиться с нами!

Автор: George Martsoukos

Источник: //webdesign.tutsplus.com/

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

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

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

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