Главная
К библиотеке

Навигация с помощью элемента <SELECT>

Рассмотрим как сделать подобие pull-down меню для навигации по сайту с помощью стандартных элементов форм. За основу возьмем элемент <SELECT>.

Надо заметить, что Internet Explorer позволяет расположить любой элемент формы вне тэгов <FORM> и </FORM>. Это возможно в случае, если форма не предназначена для передачи данных во внешний скрипт. Netscape Navigator требует обязательного наличия тэгов формы.

Вот код данного элемента:

<SELECT NAME="navSelect"
  ONCHANGE="top.location.href =
    this.options[this.selectedIndex].value">
  <OPTION>Выбор раздела</OPTION>
  <OPTION VALUE="html.phtml">WEB: HTML</OPTION>
  <OPTION VALUE="dhtml.phtml">WEB: DHTML</OPTION>
  <OPTION VALUE="css.phtml">WEB: CSS</OPTION>
  <OPTION VALUE="forms.phtml">WEB: Формы</OPTION>
  <OPTION VALUE="scripts.phtml">WEB: Скрипты</OPTION>
  <OPTION VALUE="misc.phtml">WEB: Разное</OPTION>
  <OPTION VALUE="graf.phtml">Графика</OPTION>
  <OPTION VALUE="stuff.phtml">Полезное</OPTION>
  <OPTION VALUE="author.phtml">От автора</OPTION>
  <OPTION VALUE="links.phtml">Другие ресурсы</OPTION>
  <OPTION VALUE="errata.phtml">Ошибки и опечатки</OPTION>
</SELECT>

Основную работу выполняет обработчик события ONCHANGE. top ссылается на окно браузера, активное в данный момент. top.location.href - URL документа, отображаемого этим окном. Одним из свойств объекта SELECT является коллекция options, которая содержит параметры элементов выбора. Например navSelect.option[1].value содержит значение "index.html". Свойство элемента SELECT selectedIndex - номер выбранного пункта. Элемент this внутри элемента ссылается именно на этот элемент. Вместо него можно было использовать (в Internet Explorer) ссылку document.all.navSelect, но this гораздо короче и работает в обоих браузерах. Я советую вам всегда использовать элемент this, когда это возможно.

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

Вот код:

<FORM>
SELECT NAME="navSelect"<>
  <OPTION>Выбор раздела</OPTION>
  <OPTION VALUE="html.phtml">WEB: HTML</OPTION>
  <OPTION VALUE="dhtml.phtml">WEB: DHTML</OPTION>
  <OPTION VALUE="css.phtml">WEB: CSS</OPTION>
  <OPTION VALUE="forms.phtml">WEB: Формы</OPTION>
  <OPTION VALUE="scripts.phtml">WEB: Скрипты</OPTION>
  <OPTION VALUE="misc.phtml">WEB: Разное</OPTION>
  <OPTION VALUE="graf.phtml">Графика</OPTION>
  <OPTION VALUE="stuff.phtml">Полезное</OPTION>
  <OPTION VALUE="author.phtml">От автора</OPTION>
  <OPTION VALUE="links.phtml">Другие ресурсы</OPTION>
  <OPTION VALUE="errata.phtml">Ошибки и опечатки</OPTION>
</SELECT><BR>
<INPUT TYPE=BUTTON NAME="go" VALUE="Go!"
 ONCLICK="top.location.href =
 this.form.navSelect.options[this.form.navSelect.selectedIndex].value">
</FORM>

Здесь необходимо пояснить, что каждый элемент формы имеет свойство form, которое содержит ссылку на его родительскую форму. Таким образом можно сослаться на любой элемент формы из любого другого элемента, чем мы здесь и воспользовались: this.form.navSelect ссылается именно на элемент выбора.