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

Многоуровневое меню с эффектом lavalamp на jQuery
23.06.14, 09:09:57

Скачать файл




Довольно-таки качественное многоуровневое меню.

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

Установка:

После /head на нужных страницах вставляйте:
Код
<link type="text/css" href="/css/menu.css" rel="stylesheet" />
  <script type="text/javascript" src="/js/menu.js"></script>
  <style type="text/css">
  div#menu {  
  margin-left:120px;  
  position:relative;  
  top:25px;  
  }  
  div#copyright { display: none; }  
  </style>


Далее вставляйте в то место, где будет само меню:
Код
<div id="menu">
<ul class="menu">
<li><a href="#" class="parent"><span>Home</span></a>
<div><ul>
<li><a href="#" class="parent"><span>Sub Item 1</span></a>
<div><ul>
<li><a href="#" class="parent"><span>Sub Item 1.1</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 1.1.1</span></a></li>
<li><a href="#"><span>Sub Item 1.1.2</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Sub Item 1.2</span></a></li>
<li><a href="#"><span>Sub Item 1.3</span></a></li>
<li><a href="#"><span>Sub Item 1.4</span></a></li>
<li><a href="#"><span>Sub Item 1.5</span></a></li>
<li><a href="#"><span>Sub Item 1.6</span></a></li>
<li><a href="#" class="parent"><span>Sub Item 1.7</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 1.7.1</span></a></li>
<li><a href="#"><span>Sub Item 1.7.2</span></a></li>
</ul></div>
</li>
</ul></div>
</li>
<li><a href="#"><span>Sub Item 2</span></a></li>
<li><a href="#"><span>Sub Item 3</span></a></li>
</ul></div>
</li>
<li><a href="#" class="parent"><span>Product Info</span></a>
<div><ul>
<li><a href="#" class="parent"><span>Sub Item 1</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 1.1</span></a></li>
<li><a href="#"><span>Sub Item 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>Sub Item 2.1</span></a></li>
<li><a href="#"><span>Sub Item 2.2</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Sub Item 3</span></a></li>
<li><a href="#"><span>Sub Item 4</span></a></li>
<li><a href="#"><span>Sub Item 5</span></a></li>
<li><a href="#"><span>Sub Item 6</span></a></li>
<li><a href="#"><span>Sub Item 7</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Help</span></a></li>
<li class="last"><a href="#"><span>Contacts</span></a></li>
</ul>
  </div>


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

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