Приложение Д: Многоуровневое раскрывающееся javascript css html меню

Последняя модификация: 10.08.2014 г

Страница загружена с адреса: http://webdesign.site3k.ru/conjuncture/append/d/menutree.html

Многоуровневое раскрывающееся меню.

Помимо способов организации меню (перечислены в «Оглавления для сайтов»), стоит задуматься и над его оформлением. Не над оформлением его ссылок, как таковых (см. «Ссылки и окна. Внешний вид и внутреннее содержание», а над общим оформлением меню. Меню в Интернете встречаются, почти на каждой странице, их миллионы, или, даже, миллиарды. Но все они характеризуются невероятным однообразием.

Фактически, существуют 3 типа меню: меню, основанное на географической карте или какой-то схеме, области которой связаны с адресами или скриптами, меню из кнопок-рисунков и меню в виде простого списка гиперссылок. Все – других меню Интернет не знает.

А напрасно. Избежать этого однообразия, можно, применив интерактивное многоуровневое раскрывающееся меню, аналогичное дереву каталогов. Это меню не только удобно, тем что, позволяет открыть доступ с одной страницы на любую другую, но и выглядит очень эстетично и, что не менее важно, очень полезно для ускорения индексации сайта поисковыми системами (оно ведь открывает доступ сразу ко всем страницам сайта, независимо от уровня их вложенности).

Поскольку это меню едино для всего сайта, его удобно держать в отдельном файле и включать в страницу либо как FRAME, либо как IFRAME, либо как OBJECT, либо как внешний JavaScript (src="menu.js">), либо с помощью SSI-инструкций (). Как именно – дело личных предпочтений, хотя, следует учитывать что, SSI-вариант увеличит размер всех страниц, как раз на размер меню и может значительно замедлить их загрузку, а JavaScript сам по себе не укажет путь для поисковых роботов.

Само меню имеет не слишком сложный текст:

<p><A HREF="javascript:JS(menu1,image1);" title="Развернуть/Свернуть"><img NAME=image1 src="img/minus.gif" alt=""><img src="img/folder.gif" alt=""> Верхний уровень, пункт 1</a></p>
<span id=menu1>
  <p><A HREF="javascript:JS(menu2,image2);" title="Развернуть/Свернуть"><img NAME=image2 src="img/minus.gif" alt=""><img src="img/folder.gif" alt=""> Вложенный уровень, пункт 1</a></p>
  <span id=menu2>
    <p><a href="myfile.html" title="Смотреть"><img src="img/item.gif" alt=""> Ссылка на страницу 1</a></p>
  </span>
  <p><a href="javascript:JS(menu3,image3);" title="Развернуть/Свернуть"><img NAME=image3 src="img/minus.gif" alt=""><img src="img/folder.gif" alt=""> Вложенный уровень, пункт 2</a></p>
  <span id=menu3>
    <p><a href="myfile.html" title="Смотреть"><img src="img/item.gif" alt=""> Ссылка на страницу 2</a></p>
  </span>
</span>
<p><A HREF="javascript:JS(menu4,image4);" title="Развернуть/Свернуть"><img NAME=image4 src="img/minus.gif" alt=""><img src="img/folder.gif" alt=""> Верхний уровень, пункт 2</a></p>
<span id=menu4>
  <p><A HREF="javascript:JS(menu5,image5);" title="Развернуть/Свернуть"><img NAME=image5 src="img/minus.gif" alt=""><img src="img/folder.gif" alt=""> Вложенный уровень, пункт 3</a></p>
  <span id=menu5>
    <p><a href="myfile.html" title="Смотреть"><img src="img/item.gif" alt=""> Ссылка на страницу 3</a></p>
  </span>
  <p><a href="javascript:JS(menu6,image6);" title="Развернуть/Свернуть"><img NAME=image6 src="img/minus.gif" alt=""><img src="img/folder.gif" alt=""> Вложенный уровень, пункт 4</a></p>
  <span id=menu6>
    <p><a href="myfile" title="Смотреть"><img src="img/item.gif" alt=""> Ссылка на страницу 4</a></p>
  </span>
</span>

Идея данного меню заключается в том, что оно состоит из ссылок верхних уровней, щелчок на который инициирует запуск функции на JavaScript, передавая ей в качестве параметров имя следующего за ссылкой контейнера span (следующего уровня вложенности). А функция открывает этот контейнер или закрывает, в зависимости от его текущего состояния, заодно меняя его рисунок. Уровень вложенности и количество элементов на уровень ни чем не ограничивается. Самые нижние ссылки открывают желаемые страницы.

Сама функция очень проста и может быть помещена в тот же файл, в котором описано меню:

<SCRIPT LANGUAGE="JavaScript">
function JS(name,image) {

   if(name.style.display=='none')
   {
   name.style.display='block';
   image.src='img/minus.gif'
   }
   else
   {
   name.style.display='none'
   image.src='img/plus.gif'
   }

}
</SCRIPT>

Для корректного вида неплохо добавить CSS-директив:

IMG {border-style:none; vertical-align:middle}
span {margin:5 0 5 13}

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

<SCRIPT LANGUAGE="JavaScript">
menu1.style.display='none';
menu2.style.display='none';
menu3.style.display='none';
menu4.style.display='none';
menu5.style.display='none';
menu6.style.display='none';
image1.src='img/plus.gif';
image2.src='img/plus.gif';
image3.src='img/plus.gif';
image4.src='img/plus.gif';
image5.src='img/plus.gif';
image6.src='img/plus.gif';
</SCRIPT>

Где в открытых пунктах display='none' заменить на display='block', а src='img/plus.gif' на src='img/minus.gif'. Можно, конечно, сразу на все пункты поставить display='none', а скриптом открыть только текущий пункт, но некоторые поисковики проигнорируют скрытые ссылки и, сайт может остаться не проиндексированным ими. Поэтому лучше скрывать скриптом некоторое количество изначально отображаемых пунктов, чем отображать один из изначально неотображаемых. А чтобы при большом количестве пунктов код скрывающего скрипта не получился слишком большим, можно применить цикл, скрывающий все пункты, по окончании которого, открыть нужный:

<SCRIPT LANGUAGE="JavaScript">
for(i=1;i<=6;i++) // Пока i=1, не достигнет 6 (количество задействованных span), увеличивая его на единицу и сравнивая после прохода цикла
{
eval('menu' + i + '.style.display="none"');
eval('image' + i + '.src="img/plus.gif"');
}
menu1.style.display='block'; // открываем один и меняем рисунок
image1.src='img/minus.gif';
menu2.style.display='block'; // до последнего уровня
image2.src='img/minus.gif';
</SCRIPT>

Если меню хранится в одном отдельном файле, а разделы разложены по каталогам, то код, сворачивающий ветви, удобно выделить в отдельный файл типа "show.js" и положить его в каждый каталог. Тогда на всех страницах он будет инициализироваться одинаково:

<SCRIPT LANGUAGE="JavaScript" src="show.js"></SCRIPT>

Он будет написан (и загружен) в единственном экземпляре для целого раздела, и его не придется повторять отдельно для каждой страницы. Еще более удобным будет разделение кода на сворачивающую часть, которая будет помещаться в файл с меню (чтобы не менять количество задействованных span по нескольким файлам в различных каталогах, при необходимости изменить их количество) и разворачивающую, которая в каждом каталоге будет своя.

Приведенные скрипты рассчитаны на оперу или Internet Explorer, для Netscape требуется иной синтаксис. Netscape не готов принммать объекты в качестве параметров функций и не может ими оперировать. Для управления атрибутами HTML-элементов, Netscape требуется получить ссылку на этот элемент. Для чего в функцию должен передаваться не объект типа javascript:JS(menu6,image6), а его имя: javascript:JS('menu6','image6') (в кавычках). Функция должна получать ссылку на объект методом getElementById() и только через эту ссылку управлять поведением элемента (Эксплорер так же поддерживает такой способ). То есть, приведенные код приобретает вид:

<p><A HREF="javascript:JS('menu6','image6');"><img id=image6 src="img/minus.gif" alt=""><img src="img/folder.gif" alt=""> Литература и поэзия</a></p>
<span id=menu6>
...

<SCRIPT LANGUAGE="JavaScript">
for(i=1;i<=6;i++) // Пока i=1, не достигнет 6 (количество задействованных span), увеличивая его на единицу и сравнивая после прохода цикла
{
nameDiv=eval("document.getElementById('menu' + i)"); // Сворачивание, единое для всего сайта
myimage=eval("document.getElementById('image' + i)");
nameDiv.style.display="none";
myimage.src="img/plus.gif";
}
nameDiv=eval("document.getElementById('menu1')"); // открываем один и меняем рисунок
myimage=eval("document.getElementById('image1')");
nameDiv.style.display='block';
myimage.src='img/minus.gif';
nameDiv=eval("document.getElementById('menu2')"); // до последнего уровня
myimage=eval("document.getElementById('image2')");
nameDiv.style.display='block';
myimage.src='img/minus.gif';

function JS(menu,image) {//
   nameDiv=eval("document.getElementById(menu)");
   myimage=eval("document.getElementById(image)");
   if(nameDiv.style.display=='none')
   {
   nameDiv.style.display='block';
   myimage.src='img/minus.gif';
   }
   else
   {
   nameDiv.style.display='none';
   myimage.src='img/plus.gif';
   }
}
</SCRIPT>

Такой код должен работать в любом браузере, поддерживающем JavaScript.

Смотреть

Другие способы организации ссылочной навигации смотрите в «Оглавления для сайтов», «Ссылки и окна. Внешний вид и внутреннее содержание» и Меню из выпадающих списков.

Комментарии к странице (всего 5)

На главную страницу сайта