Выпадающее меню при помощи javascript

Объект элемента select и Javascript. Выпадающее меню.

Интернет или всемирная паутина, на сегодняшний день, представляет из себя огромнейшую сеть разнообразных ресурсов, перемещаться по которой без удобной или, по крайней мере, вменяемой навигации, было бы если не невозможно, но весьма затруднительно. Представьте себе, если для перехода с одной страницы сайта на другую, приходилось бы каждый раз пользоваться адресной строкой, вручную вбивая точное местонахождение страницы. Да ну, бред какой-то!

Именно поэтому, для нашего с вами удобства и разрабатываются различные варианты навигации по страницам того или иного ресурса. Одним из таких, между прочим, может стать выпадающее меню с различными ссылками, когда для того, чтобы перейти с одной страницы на другую, достаточно просто выбрать необходимую из выпадающего списка.

Как создать выпадающее меню при помощи Javascript

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

Как же создать выпадающее меню навигации, используя JavaScript? На самом деле, здесь нет особых трудностей.

Конечно, нам понадобится функция такого типа:

<script type="text/javascript">
function perehod(){
var list = document.forms[0].urlList;
location.href = list.options[list.selectedIndex].value;
}

Разберем код этой функции подробнее

Объект элемента select и Javascript. Выпадающее меню.

КодОписание
script type="text/javascript">Вызываем Javascript, давая системе понять, что последует в блоке
function perehod(){Объявляем функцию с именем perehod (произвольное название)
var list = document.forms[0].urlList;Объявляем переменную list, которая ссылается на объект select
location.href = list.options[list.selectedIndex].value;
}
Ссылка, по которой следует перейти будет получена из переменной list

Со скриптом разобрались. Теперь нам остается лишь дополнить это html кодом в теле (<body>) страницы, указав ссылки и возможные вариации меню.

<form>
Выберите место для перехода
<select name="urlList" onchange="perehod()">
<option selected value="#">
<option value="https://nukeap.ru">Главная
<option value="https://vk.com/nukeap">Группа ВК
<option value="https://nukeap.ru/about/">О сайте
<option value = "#">Ссылка
</select>

</form>

Как видно из кода выше, делается это также, как мы это делали, когда надо было выполнить проверку на галочку при помощи JavaScript, а именно при помощи формы (<form>).

<form>создаем форму
Выберите место для переходаТекст перед выпадающим меню
<select name="urlList" onchange="perehod()">
&ltoption selected value="#">
имя объекта select (произвольно, но должно быть связано с кодом Javascript выше). При выборе должна запускаться функция "perehod()".
<option selected value="#">Настраиваем значение изначально выбранной опции. Я в данном случае выбрал для этого пустую строку без ссылки
<option value="https://nukeap.ru">Главная
<option value="https://vk.com/nukeap">Группа ВК
<option value="https://nukeap.ru/about/">О сайте
<option value = "#">Ссылка
Выпадающее меню со ссылками и их подписями может иметь гораздо больше значений, в зависимости от потребностей. Для примера создадим лишь 4
</select>
</form>
закрываем объект и форму

Таким образом, получившийся код целиком:

<html>
<head>
<title>Навигация посредством select</title>
<script type="text/javascript">
function perehod(){
var list = document.forms[0].urlList;
location.href = list.options[list.selectedIndex].value;
}
</script>
</head>
<body>
<form>
Выберите место для перехода
<select name="urlList" onchange="perehod()">
<option selected value="#">
<option value="https://nukeap.ru">Главная
<option value="https://vk.com/nukeap">Группа ВК
<option value="https://nukeap.ru/about/">О сайте
<option value = "#">Ссылка
</select>

</form>
</body>
</html>

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

Однако, как сделать так, чтобы это выпадающее меню открывало новую вкладку с выбранной страницей, а текущая так и оставалась открытой?

Как сделать чтобы выпадающее меню открывало новую вкладку браузера?

С этой задачей нам поможет справиться статья Создание кнопки и нового окна при помощи Javascript, в которой мы затрагивали эту тему. Там описаны основные моменты, которыми сегодня и воспользуемся. Именно, речь снова пойдет о window.open(параметры), которое следует лишь добавить к строке  location.href = list.options[list.selectedIndex].value; нашего скрипта, чтобы получилось

window.open().location.href = list.options[list.selectedIndex].value;

Вот и все! Теперь выбранный элемент меню будет открываться в новой вкладке.

Вот ссылка на файл с итоговым результатом и пример работы конечного меню с открытием новой вкладки

Выберите место для перехода