---
title: How to Create a Dropdown Menu with CSS and JavaScript
localeTitle: Как создать раскрывающееся меню с CSS и JavaScript
---
## Как создать раскрывающееся меню с CSS и JavaScript
В этом уроке вы узнаете, как создать простое выпадающее меню с ванильным Javascript, HTML и CSS. Мы будем проходить через HTML, CSS и Javascript-код, но уделяем больше внимания программированию, поскольку это учебник JS. Мы будем использовать только простые JS и CSS, без каких-либо фреймворков или препроцессоров. Единственное (вид) исключения будет импортировать файл [шрифта Awesome](https://fontawesome.com/) CSS, потому что мы будем использовать один из его значков.
Это предназначено для разработчиков, которые имеют среднее представление о HTML, CSS и JS. Я попытался сделать его максимально чистым, но я не буду уделять слишком много внимания деталям. Надеюсь, вам понравится.
## Скриншоты
Вот как выглядит результат кода:
Начальный экран:
Откроется окно:
Выпадающее меню с выбранной опцией:
#### HTML:
В этом разделе мы обсудим реализацию HTML-кода для демонстрационной страницы. Чтобы начать, давайте посмотрим код ``
```html
Dropdown Example
```
Это, в основном, HTML headplate, за исключением тегов `link` загружают две таблицы стилей CSS, которые мы будем использовать в этом уроке: стили шрифта Awesome и файл `styles.css` , где мы будем определять стили этой страницы.
Затем есть остальная часть HTML-файла, тело:
```html
Select an option
Option 1
Option 2
Option 3
Option 4
The result is:
```
Этот раздел можно разделить на 3 основные части:
* `.dropdown` div, где будет определена структура элемента выпадающего элемента.
* Элемент `#result` , который будет содержать выбранный параметр пользователем, из раскрывающегося элемента.
* Сценарий написан в `