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

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

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

Демо-пример

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

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

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

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


<link rel="stylesheet" type="text/css" href="jqueryslidemenu.css">

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jqueryslidemenu.js"></script>

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

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


<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Folder 3.1.1</a>
		<ul>
    		<li><a href="#">Sub Item 3.1.1.1</a></li>
    		<li><a href="#">Sub Item 3.1.1.2</a></li>
    		<li><a href="#">Sub Item 3.1.1.3</a></li>
    		<li><a href="#">Sub Item 3.1.1.4</a></li>
    		<li><a href="#">Sub Item 3.1.1.5</a></li>
		</ul>
    </li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
  </ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<br style="clear: left">
</div>

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

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

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

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

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

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

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

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

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

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