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

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

Установка:

После /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>

В этом коде можно настроить параметры:
eventType

• click - раскрытие подменю при нажатии
• hover - раскрытие подменю при наведении

autoClose

• true - если значение eventType былоустановлено в true, то при уходе курсора меню будет автоматически закрываться
• false - меню будет остаться открытым при уходе курсора

saveState

• true - положение пунктов меню будет сохраняться в куках
• false - положение пунктов меню сохраняться не будет

speed -  скорость раскрытия меню. Имеет значения slow, normal и fast

Следующий код вставьте в то место, где будет располагаться само меню:

<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

Скачать архив