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

Оригинальное вертикальное многоуровневое меню на jQuery
23.06.14, 14:16:06

Скачать файл




Замечательное многоуровневое меню для вашего сайта

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

Установка:

После /head на нужных страницах вставляйте:
Код
<link href="/css/dcaccordion.css" rel="stylesheet" type="text/css" />
  <link href="/css/graphite.css" rel="stylesheet" type="text/css" />

  <script type='text/javascript' src='/js/jquery.cookie.js'></script>
  <script type='text/javascript' src='/js/jquery.hoverIntent.minified.js'></script>
  <script type='text/javascript' src='/js/jquery.dcjqaccordion.2.1.js'></script>
  <script type="text/javascript">
  $(document).ready(function($){  
$('#accordion-1').dcAccordion({  
eventType: 'click',  
autoClose: true,  
saveState: true,  
disableLink: true,  
speed: 'slow'  
});  

  });  
  </script>


Следующий код в то место, где будет располагаться само меню:
Код
<div class="graphite demo-container">
  <ul class="accordion" id="accordion-1">
  <li><a href="#">Home</a></li>
  <li><a href="#">Products</a>
  <ul>
  <li><a href="#">Mobile Phones & Accessories</a>
  <ul>
  <li><a href="#">Product 1</a>
  <ul>
  <li><a href="#">Part A</a></li>
  <li><a href="#">Part B</a></li>
  <li><a href="#">Part C</a></li>
  <li><a href="#">Part D</a></li>
  </ul>
  </li>
  <li><a href="#">Product 2</a>
  <ul>
  <li><a href="#">Part A</a></li>
  <li><a href="#">Part B</a></li>
  <li><a href="#">Part C</a></li>
  <li><a href="#">Part D</a></li>
  </ul>
  </li>
  <li><a href="#">Product 3</a>
  <ul>
  <li><a href="#">Part A</a></li>
  <li><a href="#">Part B</a></li>
  <li><a href="#">Part C</a></li>
  <li><a href="#">Part D</a></li>
  </ul>
  </li>
  </ul>
  </li>
  <li><a href="#">Desktop</a>
  <ul>
  <li><a href="#">Product 4</a></li>
  <li><a href="#">Product 5</a></li>
  <li><a href="#">Product 6</a></li>
  <li><a href="#">Product 7</a></li>
  <li><a href="#">Product 8</a></li>
  <li><a href="#">Product 9</a></li>
  </ul>
  </li>
  <li><a href="#">Laptop</a>
  <ul>
  <li><a href="#">Product 10</a></li>
  <li><a href="#">Product 11</a>
  <ul>
  <li><a href="#">Part E</a></li>
  <li><a href="#">Part F</a></li>
  <li><a href="#">Part G</a></li>
  <li><a href="#">Part H</a></li>
  </ul>
  </li>
  <li><a href="#">Product 12</a></li>
  <li><a href="#">Product 13</a></li>
  </ul>
  </li>
  <li><a href="#">Accessories</a>
  <ul>
  <li><a href="#">Product 14</a></li>
  <li><a href="#">Product 15</a></li>
  </ul>
  </li>
  <li><a href="#">Software</a>
  <ul>
  <li><a href="#">Product 16</a></li>
  <li><a href="#">Product 17</a></li>
  <li><a href="#">Product 18</a></li>
  <li><a href="#">Product 19</a></li>
  </ul>
  </li>
  </ul>
  </li>
  <li><a href="#">About Us</a>
  <ul>
  <li><a href="#">About Page 1</a></li>
  <li><a href="#">About Page 2</a></li>
  </ul>
  </li>
  <li><a href="#">Services</a>
  <ul>
  <li><a href="#">Service 1</a>
  <ul>
  <li><a href="#">Service Detail A</a></li>
  <li><a href="#">Service Detail B</a></li>
  </ul>
  </li>
  <li><a href="#">Service 2</a>
  <ul>
  <li><a href="#">Service Detail C</a></li>
  </ul>
  </li>
  <li><a href="#">Service 3</a>
  <ul>
  <li><a href="#">Service Detail D</a></li>
  <li><a href="#">Service Detail E</a></li>
  <li><a href="#">Service Detail F</a></li>
  </ul>
  </li>
  <li><a href="#">Service 4</a></li>
  </ul>
  </li>
  <li><a href="#">Contact us</a></li>
  </ul>
  </div>


Осталось лишь залить скрипт из прикреплённого архива в папку js, все стили в папку css и картинки в папку images

Материал подготовлен Apocalypse

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