Що ж саме робить цей скрипт? По-перше, він перемикає клас .active, при натисканні на елементі. Це означає, якщо оболонка не має цей клас, він додає його і потім, якщо активним є інше мене - відповідно видаляє його. По-друге, він дозволяє закривати список при натисканні на будь-якому іншому місці на екрані.
Тепер ми розуміємо, як це працює, і прийшов час для створення деяких списків, що розкриваються!
Давайте почнемо з чогось простого.
Нам потрібно кілька речей: клас wrapper, (прихований), що випадає, і назва, яке помістимо в тег span. Також будемо використовувати якоря.
Давайте подивимося на стилі, на які ми будемо фокусувати нашу увагу. Почнемо з wrapper:
Спочатку ми встановили ширину нашої меню, що випадає і деякі paddings і margins. Далі, ми задали йому деякі стилі. І, нарешті, ми встановлюємо деякі параметри для шрифту. Далі задамо стилі для назви.
Думаю, що все знають, як за допомогою css створити невеликий трикутник. У нас буде кнопка, але без стрілки для розкриває списку, вона не буде грати ніякої ролі. Д Давайте розберемося з нашим списком!
wrapper-dropdown -1 .dropdown
Що ми тільки що зробили? Ми задали для списку абсолютну позицію і поставили його позаду кнопки (top: 100%;). Ми задали для нього таку ж ширину, як і для кнопки з значеннями left і right - о. І що ще є дуже важливим - приховали його, зменшивши прозорість до 0. Властивість pointer-events: none, але це не означає, що його немає.
Наведемо кілька стилів для списку елементів:
Отже, у нас є кнопка і приховані елементи меню, що розкривається. Тепер ми подивимося на відкрите меню, яке випадає при натисканні на кнопку.
Тут відбувається три речі:
- Для початку ми показуємо, що випадає, встановивши opacity на 1. Не забудьте для pointer-event встановить значення auto.
- Далі ми міняємо напрям і колір маленької стрілки.
- Потім змінюємо фон, використовую градієнт.