Главная » Файлы » Прочие скрипты » jQuery

Замечательное многоуровневое горизонтальное меню на jQuery
23.06.14, 08:57:22

Скачать файл




Замечательное многоуровневое меню на jQuery. Смотрится очень стильно

Для начала посмотрите ДЕМО

Установка:

После /head на нужных вам страницах вставляйте:
Код
<link type="text/css" href="/css/menu.css" rel="stylesheet" />
  <script type="text/javascript" src="/js/menu.js"></script>  
  <style type="text/css">
  * { margin:0;  
padding:0;}  
  div#menu { margin:20px auto; }  
  </style>


Далее следующий код в то место, где должно быть меню:
Код
<div id="menu">
<ul class="menu">
<li><a href="#" class="parent"><span>Главная</span></a>
<div><ul>
<li><a href="#" class="parent"><span>Подменю 1</span></a>
<div><ul>
<li><a href="#" class="parent"><span>Подменю 1.1</span></a>
<div><ul>
<li><a href="#"><span>Подменю 1.1.1</span></a></li>
<li><a href="#"><span>Подменю 1.1.2</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Подменю 1.2</span></a></li>
<li><a href="#"><span>Подменю 1.3</span></a></li>
<li><a href="#"><span>Подменю 1.4</span></a></li>
<li><a href="#"><span>Подменю 1.5</span></a></li>
<li><a href="#"><span>Подменю 1.6</span></a></li>
<li><a href="#" class="parent"><span>Подменю 1.7</span></a>
<div><ul>
<li><a href="#"><span>Подменю 1.7.1</span></a></li>
<li><a href="#"><span>Подменю 1.7.2</span></a></li>
</ul></div>
</li>
</ul></div>
</li>
<li><a href="#"><span>Подменю 2</span></a></li>
<li><a href="#"><span>Подменю 3</span></a></li>
</ul></div>
</li>
<li><a href="#" class="parent"><span>Продукция</span></a>
<div><ul>
<li><a href="#" class="parent"><span>Подменю 1</span></a>
<div><ul>
<li><a href="#"><span>Подменю 1.1</span></a></li>
<li><a href="#"><span>Подменю 1.2</span></a></li>
</ul></div>
</li>
<li><a href="#" class="parent"><span>Sub Item 2</span></a>
<div><ul>
<li><a href="#"><span>Подменю 2.1</span></a></li>
<li><a href="#"><span>Подменю 2.2</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Подменю 3</span></a></li>
<li><a href="#"><span>Подменю 4</span></a></li>
<li><a href="#"><span>Подменю 5</span></a></li>
<li><a href="#"><span>Подменю 6</span></a></li>
<li><a href="#"><span>Подменю 7</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Помощь</span></a></li>
<li class="last"><a href="#"><span>Контакты</span></a></li>
</ul>
  </div>


Нам осталось лишь залить файлы из прикреплённого архива следующим образом:
menu.js - в папку js
menu.css - в папку css
Все картинки в папку images

Материал подготовлен Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: горизонтальное, Замечательное, на, JQuery, Меню, Многоуровневое
Просмотров: 297 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: