Другорядна висувається навігація на CSS та jQuery

16

Від автора: Смілива реалізація другорядного меню, яке плавно з’являється поверх основного меню. Сьогодні ми розповімо про простому і корисному прийомі: другорядна навігація плавно висувається вниз, замінюючи собою посилання основного меню.

Другорядна висувається навігація на CSS та jQueryДругорядна висувається навігація на CSS та jQuery

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

Створення структури

В HTML міститься 2 основних елементи: елемент , службовець обгорткою для основного меню, і елемент , що містить контент сторінки.

Основна навігація складається з 2 вкладених ненумерованих списків, обгорнутих в семантичних цілях елемент .

Другорядна висувається навігація на CSS та jQuery
  • About
  • Categories

    • Menu
    • Category 1

Menu

Додавання стилів

На невеликих екранах основна навігація буде розташована праворуч і буде приховано за замовчуванням; коли користувач клікає по іконці меню, елементи і переміщуються вліво (відбувається додавання класу .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 ul li {
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 ul li {
height: 80px;
background-color: #7e4d7e;
/* значення лівого відступу = розмір логотипу + позиціонування логотипу зліва */
padding: 0 5% 0 calc(5% + 124px);
transform: translateY(-80px);
transition: transform 0.3 s 0.2 s;
}
.cd-main-nav li ul li {
opacity: 0;
transform: translateY(-20px);
transition: transform 0.3 s 0s, opacity 0.3 s 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.3 s;
transform: translateY(0);
}
.cd-main-nav.moves-out > li ul li {
opacity: 1;
transform: translateY(0);
transition: transform 0.3 s 0.2 s, opacity 0.3 s 0.2 s;
}
}

Обробка подій

Ми використовуємо jQuery, щоб додати/видалити класи в залежності від певних подій.

Єдине, на що слід звернути увагу, – це те, що у вихідній HTML структурі навігація розташована всередині тега . На мобільних пристроях ми вирішили розташувати навігацію зліва, і нам було б простіше управляти нею, якби вона розташовувалася поза елемента header. Тому ми використовуємо jQuery, щоб перемістити навігацію за межі елемента header на пристроях з невеликим екраном.