— заметки разработчиков студии

Всплывающее меню — это отличное решение для построения полноценной навигации с различными уровнями вложенности, которое зарекомендовало себя еще лет 10 назад. При разработке сайтов в нашей студии мы также используем этот прием для реализации удобного перемещения по разделам веб-ресурса: medprem.ru, okphoto.ru.
Сегодня я хочу предложить вашему вниманию готовый способ реализации горизонтального и вертикального всплывающего меню с помощью javascript и css.

Всего лишь с помощью одной строчки javascript-кода ваш список, размеченный с помощью тэгов <ul> и <li> превращается в выпадающий список. Не забываем подключить jquery-фреймворк и файл slidemenu.js. Если вы хотите создать горизонтальное меню, то в функции buildmenu в третьем параметре нужно указать цифру «1», если вертикальное — «2».

<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="slidemenu.js"></script>
<script>
jqueryslidemenu.buildmenu("myslidemenu", arrowimages, 1)
</script>

А вот и код разметки.

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О компании</a></li>
<li><a href="#">Публикации</a>
  <ul>
  <li><a href="#">Новости</a></li>
  <li><a href="#">Статьи</a></li>
  <li><a href="#">Интервью</a></li>
  <li><a href="#">Репотражи</a></li>
  </ul>
</li>
<li><a href="#">Блоги</a></li>
<li><a href="#">Разделы</a>
  <ul>
  <li><a href="#">Раздел 2.0</a></li>
  <li><a href="#">Раздел 2.1</a>
    <ul>
    <li><a href="#">Раздел 2.1.1</a></li>
    <li><a href="#">Раздел 2.1.2</a></li>
    <li><a href="#">Раздел 3.1.1</a>
		<ul>
    		<li><a href="#">Раздел 3.1.1.1</a></li>
    		<li><a href="#">Раздел 3.1.1.2</a></li>
    		<li><a href="#">Раздел 3.1.1.3</a></li>
    		<li><a href="#">Раздел 3.1.1.4</a></li>
    		<li><a href="#">Раздел 3.1.1.5</a></li>
		</ul>
    </li>
    <li><a href="#">Раздел 2.1.4</a></li>
    </ul>
  </li>
  </ul>
</li>
<li><a href="#">Форум</a></li>
</ul>
<br style="clear: left" />
</div>

С помощью такого метода можно реализовать меню с любым уровнем вложенности.
Смотрим примеры:
Горизонтальное меню
Вертикальное меню