Вертикальное раскрывающееся меню

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Меню с использованием CSS и изображений, оригинальное, красивое и практичное, с наименованиями подразделов. При клике мышью, подраздел открывается, обнажая ссылки. Фон каждой ссылки изменяется при наведении курсора мыши и появляется указатель (стрелочка).

Скриншот меню в обычном состоянии:

Скриншот меню в полностью раскрытом состоянии:

Установка меню на сайт

1. Скачать архив, распаковать в текущую папку на компьютере. Папку sdmenu со всеми файлами закачать в корневую директорию сайта.

Документ demo.html содержит весь необходимый код. В браузере можно посмотреть внешний вид и работу в демо-режиме.

2. Код с вызовом CSS и скрипта в таблице внизу скопировать и поместить в раздел head страницы своего сайта. По умолчанию, эта страница должна находиться в корневой директории, там же, где и папка sdmenu.

  <link rel="stylesheet" type="text/css" href="sdmenu/sdmenu.css"> 
  <script type="text/javascript" src="sdmenu/sdmenu.js"></script> 
  <script type="text/javascript"> 
  // <![CDATA[ 
  var myMenu; 
  window.onload = function() { 
  myMenu = new SDMenu("my_menu"); 
  myMenu.init(); 
  }; 
  // ]]> 
  </script>

3. А этот код скопировать и разместить на странице между тегами body в выбранном Вами месте и заполнить своими данными:

<div style="float: left" id="my_menu" class="sdmenu"> 
  <div> 
  <span>Название меню</span> 
  <a href="ваша ссылка">Название ссылки</a> 
  <a href="ваша ссылка">Название ссылки 2</a> 
  <a href="ваша ссылка">Название ссылки 3</a> 
  <a href="ваша ссылка">Название ссылки 4</a> 
  <a href="ваша ссылка">Название ссылки 5</a> 
  <a href="ваша ссылка">Название ссылки 6</a> 
  </div> 
  <div> 
  <span>Название меню</span> 
  <a href="ваша ссылка">Название ссылки</a> 
  <a href="ваша ссылка">Название ссылки 2</a> 
  <a href="ваша ссылка">Название ссылки 3</a> 
  </div> 
  <div class="collapsed"> 
  <span>Название меню</span>
  <a href="ваша ссылка">Название ссылки</a> 
  <a href="ваша ссылка">Название ссылки 2</a> 
  <a href="ваша ссылка">Название ссылки 3</a> 
  <a href="ваша ссылка">Название ссылки 4</a> 
  </div> 
  <div> 
  <span>Название меню</span> 
  <a href="ваша ссылка">Название ссылки</a> 
  <a href="ваша ссылка">Название ссылки 2</a> 
  <a href="ваша ссылка">Название ссылки 3</a> 
  <a href="ваша ссылка">Название ссылки 4</a> 
  </div> 
  </div> 
 

Спасибо за внимание. Желаю успехов! L.M.