Горизонтальное многоуровневое меню на CSS и jQuery

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

Это меню использует вложенный список UL для создания многоуровнего горизонтального подменю.

Демо-пример

Демо-пример будет работать только при включенном Интернете, так как файл последней версии библиотеки jQuery загружается удаленно с сайта Google API. О подключении библиотеки прочтите здесь.

Установка на сайт

1. Код с вызовом файла CSS, подключения библиотеки jQuery и скриптами (в таблице внизу) вставить в раздел head:

Для выделения текста сделайте щелчок мышью.
Для увеличения окна, «подцепите» мышью правый нижний угол.


<link rel="stylesheet" type="text/css" href="droplinebar.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="droplinemenu.js" type="text/javascript"></script>
<script type="text/javascript">
//build menu with DIV ID="myslidemenu" on page:
droplinemenu.buildmenu("mydroplinemenu")
</script>

Если у Вас уже подключена библиотека jQuery последней или более поздней версии (на сегодняшний день - версия 3.1.1) или Вы используете удаленное подключение последней версии с сайта jQuery или Google API, разумеется, вторично подключать её не стоит.

2. А этот код скопируйте и расположите в разделе body в том месте, где желаете видеть меню:


<div id="mydroplinemenu" class="droplinebar">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">CSS</a>
  <ul>
  <li><a href="#">CSS-библиотека</a></li>
  <li><a href="#">CSS-форум</a></li>
  <li><a href="#">CSS-практика</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="#">FAQ</a></li>
  </ul>
</li>
<li><a href="#">Программы</a></li>
<li><a href="#">Домен и хостинг</a>
  <ul>
  <li><a href="#">Домен</a></li>
  <li><a href="#">Хостинг</a></li>
  <li><a href="#">FTP</a></li>
  <li><a href="#">Базы MySql</a>
	  <ul>
	  <li><a href="#">Ссылка 1</a></li>
	  <li><a href="#">Ссылка 2</a></li>
	  <li><a href="#">Ссылка 3</a></li>
	  <li><a href="#">Ссылка 4</a>
		  <ul>
		  <li><a href="#">Ссылка 1</a></li>
		  <li><a href="#">Ссылка 2</a></li>
		  <li><a href="#">Ссылка 3</a></li>
		  <li><a href="#">Ссылка 4</a></li>
		  <li><a href="#">Ссылка 5</a></li>
		  </ul>
		</li>
	  </ul>
	</li>
  <li><a href="#">FAQ</a></li>
  </ul>
</li>
<li><a href="#">Галерея</a></li>
</ul>
</div>

Впишите свои URL и названия ссылок.

Вспомогательные файлы

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

droplinebar.css (внутри этого файла подтвердите пути к двум синим градиентным изображениям);
droplinemenu.js (внутри этого файла подтвердите путь к изображению стрелки).

Откройте и скопируйте содержимое этих файлов, вставьте в созданный новый текстовой документ. Переименуйте документ соответственно содержимому.

Используемые изображения:

Сохраните эти изображения в папку img, которая должна находиться в одной директории с файлом, в котором расположено меню.

Спасибо за внимание. Посещайте мой сайт. Пока! L.M.

Ваше мнение по материалу, изложенному на сайте

Служба поддержки