Тайны и секреты компьютера

       

Выпадающее меню


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

Вот пример такого скрипта:

<form><select name="P1" size="1" onchange="top.location.href = this.options[this.selectedIndex].value; this.selectedIndex=0">

<option selected>Выберите раздел сайта для перехода:</option>

<option value="page1.htm">Страница 1</option>

<option value="page2.htm">Страница 2</option>

...

</select></form>

Рис.22.6. Выпадающее меню - удобный способ ориентации на сайте.

А для того, чтобы при выборе того или иного пункта меню происходило открытие выбранной страницы в новом окне, первая строка сценария должна иметь вид

<form><select name="P2" size="1" onchange="window.open (this.options[this.selectedIndex].value); this.selectedIndex=0">

 

Событие onchange происходит при изменении значения меню - при выборе того или иного его пункта. Команда top.location.href="адрес" заставляет браузер перейти по указанному адресу, а команда window.open="адрес" открывает web-страницу по этому адресу в отдельном окне. "This" - это заменитель имени обьекта select. Свойство этого обьекта this.selectedIndex принимает значение порядкового номера выбранного пункта, а если ему задать значение 0, то выбранным станет самый первый пункт. Команда this.options[this.selectedIndex]. value принимает значение, указанное в свойстве value выбранного пункта.

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



Содержание раздела