Вертикальное многоуровневое меню-аккордеон на jQuery

Разместил: Apocalypse
Опубликовано: 16 июля 2015

Замечательное многоуровневое меню для вашего сайта Для начала посмотрите ДЕМО Моё тестирование в редакторе: КЛИК Установка: 1#: После /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.6.min.js'></script> 
<script type="text/javascript"> 
$(document).ready(function($){
$('#accordion-1').dcAccordion({
eventType: 'click',
autoClose: true,
saveState: true,
disableLink: true,
speed: 'slow'
});
});
</script>

$(document).ready(function($){

$('#accordion-1').dcAccordion({

eventType: 'click',

autoClose: true,

saveState: true,

disableLink: true,

speed: 'slow'

});

</script>

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

<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>

100

101

102

103

104

105

106

<li><a href="#">Products</a>

<ul>

<li><a href="#">Mobile Phones & Accessories</a>

<ul>

<li><a href="#">Product 1</a>

<ul>

</ul>

</li>

<li><a href="#">Product 2</a>

<ul>

</ul>

</li>

<li><a href="#">Product 3</a>

<ul>

</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>

</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 файл из прикреплённого архива в папку js, все CSS файлы в папку css и картинки в папку images

Автор публикации

не в сети 4 месяца

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Комментарии: 393Публикации: 1096Регистрация: 27-08-2018

Метки: jQuery Аккорде Вертикальное Меню Многоуровневое

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Вам может также понравиться...

9 Комментарий

Старые

Межтекстовые Отзывы

Посмотреть все комментарии

Гость

Аверс

9 лет назад

Нахрена тащить столько мусорных библиотек ?

Ответить

Автор

Apocalypse

9 лет назад

Ответить на Аверс

Ну, скорее всего, автор данного творения посчитал такое решение самым правильным

Ответить

Гость

Анонимно

9 лет назад

Ответить на Apocalypse

Не работает, почему ?

Ответить

Автор

Apocalypse

9 лет назад

Ответить на Анонимно

Была ошибка в одном из файлов. Материал отредактирован

Ответить

Гость

Анонимно

9 лет назад

Меню не работает(((((

Ответить

Автор

Apocalypse

9 лет назад

Ответить на Анонимно

Всё должно работать. jQuery подключен, все файлы залиты на сервер в полном соответствии с описанием?

Ответить

Автор

Apocalypse

9 лет назад

Ответить на Анонимно

В самом деле не работало из-за испорченного js файла. Всё перезалил, добавил второе демо из редактора, поправил описание

Ответить

Гость

VASJA

8 лет назад

Работает частично. Подменю все время открыто.

Ответить

Автор

Apocalypse

8 лет назад

Ответить на VASJA

В демо всё работает нормально. Проверял лично. Ищите проблему на стороне вашего сайта или дайте ссылку на страницу, где данное меню работает некорректно

Ответить

Всевидящее око

Новый комментарий от пользователя Эдуард: «Забыл добавить. Снег появляется то в футере (когда ставил перед закрывающим тегом body), то наоборот почему-то в самом верху (причем сам блог сдвигался вниз), когда ставил его после открывающего тега, как было указано в статье.» в материале Приятный Новогодний снежок на HTML5 Canvas

2024-12-29 16:26:03

VVL99

Всех с новым годом!

2025-01-02 17:46:18

Всевидящее око

Новый комментарий от пользователя Acıbadem su kaçak tespiti: «Acıbadem su kaçak tespiti Kadıköy su kaçağı tespiti: Kadıköy’deki su sızıntılarında noktasal tespit için yanınızdayız. https://www.grand-indonesia.com/author/kacak/» в материале Фон из анимированных самолётов на CSS3

2025-01-02 18:25:49

Всевидящее око

Новый комментарий от пользователя elavil for anxiety reviews: «elavil for anxiety reviews

elavil for anxiety reviews» в материале Крутой анимированный индикатор загрузки в виде снежка на CSS3

2025-01-03 19:51:39

Всевидящее око

Новый комментарий от пользователя how long can you take elavil: «how long can you take elavil

how long can you take elavil» в материале След за курсором из частиц на HTML5 Canvas

2025-01-05 15:00:13

stalker1313

Привет. Может кто-нибудь знает почему не получается зайти на сайт playstation через vpn и как это исправить? Без vpn захожу на сайт, но не могу зарегать акк.
Ошибка:
Страница недоступна
Сайт playstation.com не отправил данных.
ERR_EMPTY_RESPONSE

2025-01-08 18:00:15

Al-Sher

@stalker1313, Привет. Возможно впн блочит их сайт. Попробовал со своим личным впном - сайт открывается

2025-01-08 19:56:24

stalker1313

@Al-Sher, бесплатный, хороший vpn посоветуете?

2025-01-08 22:01:35

stalker1313

Можно как-то сохранить все статьи с сайта wp в отдельные вордовские документы?

2025-01-09 19:50:03

Al-Sher

@stalker1313, Увы, я уже давно пользуюсь только личным впн на своей впске)

2025-01-10 20:41:42

......

Для публикации сообщений в чате необходимо авторизоваться