Всем, кто когда-либо начинал подготовительную работу над персональным проектом, домашней страничкой или прочими веб-ресурсами, наверняка знакома ситуация выбора варианта отображения навигационного меню. Рассортировать рубрики вашего сайта можно по-разному: в текстовом или графическом виде, вертикально или горизонтально, в виде развернутого рубрикатора или указания основных разделов. Осознание того, что динамика привлекает внимание посетителей гораздо больше, чем статичные объекты, заставляет веб-мастеров придумывать самые разнообразные меню. Об одном таком динамическом навигационном меню и пойдет речь.
Представьте, что у вас есть несколько основных разделов, каждый из которых, в свою очередь, включает ряд подразделов. А последние, возможно, состоят еще из пары-тройки подрубрик. Подходя к процессу создания навигационного меню, можно пойти тремя путями: разместить ссылки только на основные разделы (после перехода на которые посетителю будет предложено выбрать один из существующих подразделов), указать названия основных разделов и ниже — их составные рубрики или сделать разветвленное динамическое меню в виде иерархической структуры вашего сайта (наподобие дерева каталогов в любом файловом менеджере). Первые два варианта нам не очень подходят в силу того, что заставляют посетителя тратить время на поиск нужного раздела, несколько раз переходя по ссылкам веб-узла. Последний вариант подходит больше всего, т.к. выбор второстепенных рубрик происходит в пределах одной страницы и не требует дополнительного перехода по ссылкам.
Для начала откройте любой графический редактор, создайте два небольших изображения: одно для пиктограммы закрытого списка рубрик, другое — для иконки открытого списка (например, в виде обычной и открытой папки, соответственно) и сохраните их под именами closed.gif и open.gif.
Далее в раздел HEAD страницы с навигационным меню нужно вставить следующий код JavaScript-сценария:
<script language=»Javascript»>
<!—
var Open = «»
var Closed = «»
function preload(){
if(document.images){
Open = new Image(24,24)
Closed = new Image(22,17)
Open.src = «open.gif»
Closed.src = «closed.gif»
}}
function showhide(what,what2){
if (what.style.display==’none’){
what.style.display=»;
what2.src=Open.src
}
else{
what.style.display=’none’
what2.src=Closed.src
}
}
—>
</script>
Обратите внимание на следующие строки:
Open = new Image(24,24) Closed = new Image(22,17)
Цифры в скобках соответствуют параметрам ширины и высоты графических изображений для открытого и закрытого списков меню.
Open.src = "open.gif" Closed.src = "closed.gif"
Здесь необходимо указать названия файлов пиктограмм для обоих видов списка (в нашем случае это open.gif и closed.gif).
После этого необходимо инициализировать скрипт в «теле» документа: добавляем в BODY инструкцию onLoad=»preload()». Теперь нужно задать параметры для самих списков.
Закрытый список:
<span id=»menu1″ onClick=»showhide(menu1outline,menu1sign)» style=»cursor:hand; font-Family:Verdana; text-decoration:none; font-weight:bold»>
<img id=»menu1sign» src=»closed.gif»>РАЗДЕЛ № 1
</span>
Открытый список:
<span id=»menu1outline» style=»display:’none'»>
<a href=»#»>Подраздел № 1</a><br>
<a href=»#»>Подраздел № 2</a><br>
</span>
В коде для открытого списка вы можете указывать свои собственные ссылки (вместо #) и варьировать расстояние, на котором относительно основного раздела будут отображаться названия подразделов меню. В зависимости от количества разделов и подразделов, в код добавляются аналогичные конструкции (span id=»menu2″, span id=»menu3″…, menu2outline, menu3outline…, menu2sign, menu3sign и т.д.). Чтобы ваше динамическое навигационное меню имело более приглядный вид, укажите в разделе HEAD документа соответствующие атрибуты каскадных таблиц стилей CSS.
