Инструменты, которые вам понадобятся
Прежде чем приступить к созданию выпадающего меню на CSS и JavaScript, убедимся, что у нас есть всё необходимое. На самом базовом уровне вам нужен любой текстовый редактор (подойдёт даже Notepad, но лучше использовать редакторы с подсветкой синтаксиса, например VS Code), браузер для тестирования и базовые знания HTML, CSS и JavaScript. Никаких фреймворков вроде React или Vue использовать не будем — сделаем dropdown меню с нуля.
Однако, если вы хотите немного выйти за рамки стандартных решений, можно подключить библиотеку анимаций (например, Animate.css) или использовать Intersection Observer API для более продвинутых взаимодействий. Но об этом чуть позже.
Пошаговое создание dropdown меню
1. Разметка HTML — основа структуры
Начнём с простой HTML-разметки. Представьте, что у вас есть кнопка, которая при клике должна открывать список ссылок. Вот базовый шаблон:
```html
```
На этом этапе вы уже заложили основу, чтобы создать dropdown меню. Главное — задать классы, с которыми мы сможем работать в стилях и скриптах.
2. Добавляем стили с CSS
Теперь оформим меню с помощью CSS. По умолчанию список должен быть скрыт, и появляться только при определённом действии (например, при клике на кнопку).
```css
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-toggle {
padding: 10px 20px;
background-color: #3498db;
border: none;
color: #fff;
cursor: pointer;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
display: none;
background-color: #fff;
box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
list-style: none;
padding: 0;
margin: 0;
z-index: 1000;
}
.dropdown-menu li a {
display: block;
padding: 10px 15px;
color: #333;
text-decoration: none;
}
.dropdown-menu li a:hover {
background-color: #f1f1f1;
}
```
Заметили? У нас меню исчезает благодаря `display: none`. Это классический подход, который используется во многих выпадающих меню примеры кода.
3. Поведение на JavaScript
Теперь добавим немного "магии". Напишем скрипт, который будет переключать отображение меню при клике на кнопку:
```javascript
document.addEventListener('DOMContentLoaded', function () {
const toggle = document.querySelector('.dropdown-toggle');
const menu = document.querySelector('.dropdown-menu');
toggle.addEventListener('click', function (e) {
e.stopPropagation(); // чтобы клик не доходил до body
menu.style.display = (menu.style.display === 'block') ? 'none' : 'block';
});
document.addEventListener('click', function () {
menu.style.display = 'none';
});
});
```
Такой подход достаточно прост, но эффективен. Главное — не забыть закрыть меню при клике вне его области.
4. Нестандартные решения для dropdown
Теперь давайте усложним задачу. Ведь научиться, как сделать выпадающее меню, — это одно, а сделать его оригинальным — совсем другое.
Вот несколько идей:
- Добавьте анимацию появления. Вместо простого `display: block`, используйте классы с анимацией. Например, подключите Animate.css и при открытии добавляйте класс `animate__fadeInDown`.
- Сделайте меню контекстным. С помощью события `contextmenu` (правый клик) вы можете показать меню в любом месте страницы — отличное решение для веб-приложений.
- Используйте Intersection Observer. Хотите, чтобы dropdown появлялся только при попадании кнопки в видимую область экрана? С этим справится этот API.
- Многоуровневые меню. Добавьте подменю внутри выпадающего списка, и покажите их при наведении — как в классических сайтах с каталогами товаров.
Вот пример с анимацией через CSS:
```css
.dropdown-menu {
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.3s ease, transform 0.3s ease;
pointer-events: none;
}
.dropdown-menu.show {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
```
И соответствующий JS:
```javascript
toggle.addEventListener('click', function (e) {
e.stopPropagation();
menu.classList.toggle('show');
});
```
Устранение неполадок
Создать dropdown меню — это только полдела. Часто возникают ситуации, когда оно работает некорректно. Вот на что стоит обратить внимание:
1. Меню не закрывается при клике вне
Проверьте, добавили ли вы `e.stopPropagation()` при клике на кнопку. Иначе событие "прокапывает" до body и сразу всё закрывает.
2. Не работает в мобильной версии
Если вы тестируете на мобильном устройстве и меню не открывается — убедитесь, что используете `click`, а не `hover`. Hover не работает на тач-устройствах.
3. Конфликты с другими скриптами
Если у вас на странице используются фреймворки или библиотеки, они могут перехватывать события. В таких случаях используйте делегирование событий или изолируйте ваш скрипт.
4. Проблемы с z-index
Иногда меню оказывается под другими элементами. Убедитесь, что у блока `.dropdown-menu` достаточно высокий `z-index`.
Подводим итоги
Теперь вы знаете, как сделать выпадающее меню, используя только CSS и JavaScript. Мы рассмотрели, как создать dropdown меню с нуля, добавили стили, скрипты и даже нестандартные фишки вроде анимаций и контекстного вызова. Важно не просто следовать шаблонам, а экспериментировать. Меняйте расположение, пробуйте разные способы открытия, внедряйте современные веб-API — и вы получите уникальный пользовательский опыт.
Не бойтесь отходить от стандартов. Иногда именно неочевидные решения делают интерфейс удобным и запоминающимся.
