Как создать раскрывающееся меню с CSS и JavaScript

Автор оригинала: FreeCodeCamp Community Member.

В этом руководстве вы узнаете, как создать простое раскрывающееся меню с помощью Vanilla JavaScript, HTML и CSS. Мы пройдем через HTML, CSS и JavaScript код, но уделяя больше внимания программированию, поскольку это учебник JS. Мы будем использовать просто обычные JS и CSS без кадров или препроцессоров. Единственное (вроде) исключение будет импортировать Шрифт потрясающий CSS-файл, потому что мы будем использовать одну из его значков.

Это нацелено на разработчиков, которые имеют среднее понимание HTML, CSS и JS. Я пытался сделать это как можно более чистым, но я не буду сосредоточиться на деталях здесь. Я надеюсь, что вы все наслаждаетесь.

Скриншоты

Так выглядит результат кода:

Начальный экран:

Раскрывающийся список открыл:

Выпадающий с опцией выбран:

HTML:

В этом разделе мы обсудим реализацию HTML-кода для демонстрационной страницы. Начать, давайте посмотрим код

Это в основном HTML-головная котельная, за исключением ссылка Теги Загрузка двух стилей CSS стилей мы будем использовать в этом руководстве: шрифт потрясающие стили и styles.csss Файл, где мы определим стили этой страницы.

Затем есть остальная часть HTML-файла, тело:

	

		
Select an option 
		
		

			
Option 1
			
Option 2
			
Option 3
			
Option 4
		

	
	The result is: 
	

Этот раздел может быть разделен на 3 основных запчасти:

• .падать Div, где будет определена структура раскрывающегося элемента.
• #result Элемент, который будет содержать выбранный вариант пользователем, из раскрывающегося элемента.
• Сценарий, написанный в

Оригинал: “https://www.freecodecamp.org/news/how-to-create-a-dropdown-menu-with-css-and-javascript/”