HtmlGuide.ru

Создание выпадающего списка ссылок – 2

Автор admin | Дата: 07.06.2008

На этот раз мы усложним или облегчим, кому как, наш предыдущий пример с выпадающим списком ссылок. Данный вид навигации работает только на JavaScript. А создатель - лучший, и первый из авторов, чьи книги я прочитал по HTML, автор помимо этой еще десятков других книг Пол Макфедрис.

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

Наш пример работает на JavaScript, что накладывает на него некоторые ограничения. Дело в том, что JavaScript зависит от настроек пользователя. А точнее настроек его браузера, если пользователь отключил поддержку JavaScript, то и список работать не будет. Поэтому можете продублировать навигацию в нижней части страницы или как то иначе предложить альтернативный вариант навигации.

<FORM>
<SELECT WIDTH=”20″ onChange=”JumpToIt(this)”>
<OPTION VALUE=”None”>Select a JavaScript resource from this list —>
<OPTION VALUE=”http://www.mcfedries.com/UsingJavaScript/”>SE Using JavaScript
<OPTION VALUE=”http://www.geocities.com/SiliconValley/7116/”>The JavaScript Planet
<OPTION VALUE=”http://javascript.internet.com/”>The JavaScript Source
<OPTION VALUE=”http://www.javascripts.com/”>JavaScripts.com
<OPTION VALUE=”http://developer.netscape.com/docs/manuals/communicator/jsref/index.htm”>Netscape’s Online JavaScript Reference Manual
<OPTION VALUE=”http://www.scriptsearch.com/”>ScriptSearch
<OPTION VALUE=”http://www.wsabstract.com/”>Website Abstraction
<OPTION VALUE=”http://dir.yahoo.com/Computers_and_Internet/JavaScript/”>Yahoo! JavaScript Index
</SELECT>
</FORM>

И JavaScript код, который перенаправляет посетителя

<SCRIPT LANGUAGE=”JavaScript” TYPE=”text/javascript”>
<!–
function JumpToIt(list)
{
var selection = list.options[list.selectedIndex].value
if (selection != “None”)
location.href = selection
}
//–>
</SCRIPT>

Как всегда результат работы в тестовом разделе

Выпадающий список на JavaScript

И на последок …

Спасибо вам Пол Макфедрис.