Выпадающие меню — это обычная функция в веб-разработке, которая позволяет пользователям выбирать вариант из списка. В этом посте я покажу вам, как создать выпадающее меню с помощью HTML и JavaScript, которое перенаправляет на определенный URL-адрес при выборе параметра. Это может быть полезно при создании навигационных меню или предоставлении пользователям выбора внешних ссылок.
Давайте погрузимся в пошаговый процесс создания этой функциональности.
Настройка структуры HTML
Для начала нам нужно настроить базовую структуру HTML для нашего выпадающего меню. Откройте новый HTML-документ и создайте следующую структуру:
<!DOCTYPE html>
<html>
<head>
<title>Dropdown Menu Redirect</title>
</head>
<body>
<h1>Select a website to visit:</h1>
<select id="dropdown">
<option value="">Select an option...</option>
<option value="https://www.google.com">Google</option>
<option value="https://www.facebook.com">Facebook</option>
<option value="https://www.twitter.com">Twitter</option>
</select>
<script>
// JavaScript code will be added here
</script>
</body>
</html>
В этой структуре HTML мы создали элемент <select> с идентификатором «выпадающий список». Внутри элемента <select> у нас есть <option> элементов, представляющих различные параметры веб-сайта. Атрибут value каждой опции устанавливается на соответствующий URL-адрес.
Добавление функциональности JavaScript
Чтобы выпадающее меню перенаправляло на выбранный URL-адрес, мы добавим код JavaScript. Внутри тега <script> добавьте следующий код:
// Get the dropdown element
var dropdown = document.getElementById("dropdown");
// Add event listener to redirect when option is selected
dropdown.addEventListener("change", function() {
var selectedOption = dropdown.options[dropdown.selectedIndex].value;
if (selectedOption !== "") {
window.location.href = selectedOption;
}
});
Этот код JavaScript сначала извлекает элемент раскрывающегося списка, используя его идентификатор («выпадающий список»). Затем мы добавляем прослушиватель событий в раскрывающийся список, который прослушивает событие «изменение», указывая, когда выбран параметр.
