Разветвленное динамическое меню для сайта

Разветвленное динамическое меню для сайтаВсем, кто когда-либо начинал подготовительную работу над персональным проектом, домашней страничкой или прочими веб-ресурсами, наверняка знакома ситуация выбора варианта отображения навигационного меню. Рассортировать рубрики вашего сайта можно по-разному: в текстовом или графическом виде, вертикально или горизонтально, в виде развернутого рубрикатора или указания основных разделов. Осознание того, что динамика привлекает внимание посетителей гораздо больше, чем статичные объекты, заставляет веб-мастеров придумывать самые разнообразные меню. Об одном таком динамическом навигационном меню и пойдет речь.

Представьте, что у вас есть несколько основных разделов, каждый из которых, в свою очередь, включает ряд подразделов. А последние, возможно, состоят еще из пары-тройки подрубрик. Подходя к процессу создания навигационного меню, можно пойти тремя путями: разместить ссылки только на основные разделы (после перехода на которые посетителю будет предложено выбрать один из существующих подразделов), указать названия основных разделов и ниже — их составные рубрики или сделать разветвленное динамическое меню в виде иерархической структуры вашего сайта (наподобие дерева каталогов в любом файловом менеджере). Первые два варианта нам не очень подходят в силу того, что заставляют посетителя тратить время на поиск нужного раздела, несколько раз переходя по ссылкам веб-узла. Последний вариант подходит больше всего, т.к. выбор второстепенных рубрик происходит в пределах одной страницы и не требует дополнительного перехода по ссылкам.

Для начала откройте любой графический редактор, создайте два небольших изображения: одно для пиктограммы закрытого списка рубрик, другое — для иконки открытого списка (например, в виде обычной и открытой папки, соответственно) и сохраните их под именами 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'»>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href=»#»>Подраздел № 1</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href=»#»>Подраздел № 2</a><br>
</span>

В коде для открытого списка вы можете указывать свои собственные ссылки (вместо #) и варьировать расстояние, на котором относительно основного раздела будут отображаться названия подразделов меню. В зависимости от количества разделов и подразделов, в код добавляются аналогичные конструкции (span id=»menu2″, span id=»menu3″…, menu2outline, menu3outline…, menu2sign, menu3sign и т.д.). Чтобы ваше динамическое навигационное меню имело более приглядный вид, укажите в разделе HEAD документа соответствующие атрибуты каскадных таблиц стилей CSS.

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Наши контакты

⚑ г. Москва Пресненская наб.
стр.12 (Башня Федерация).


☏ +7(495) 908-63-63
✉️ mail@vebpro.ru
Яндекс.Метрика

Дизайн-студия и агенство интернет рекламы vebpro.ru © 2019 – Все права защищены