Dobrovoi Master
сделано с душой

В состоянии постоянного подключения...
Главная » jQuery » Меню "аккордеон" на основе jQuery и CSS

Меню «аккордеон» на основе jQuery и CSS

Меню «аккордеон» на основе jQuery и CSS

Всем, снова здравствуйте.
Давно не обращался к разработке для сайтов, а технологии не стоят на месте, да и наш пытливый ум не дает покоя. В комментариях к записи о способе создания Меню «Аккордеон» без javascript и изображений меня спрашивали, как сделать такое меню с открытием ссылок не при наведении, а при нажатии на пункт меню. Сегодня именно о таком способе построения навигации и пойдет речь, мы рассмотрим технику создания меню в стиле «» на основе и совсем немного .

Обновление от: 24.10.2014

Но для начала, хотелось бы выделить основные преимущества данного меню:
Во первых, это не большие размеры, а стало быть возможность размещения в боковых панелях сайта.
Во вторых, это многоступенчатость вложенных элементов меню.
Третьим и немаловажным фактом является гибкость настройки отображаемых элементов с помощью css, все ограничивается только фантазией разработчика.
 

Меню аккордеон на основе jQuery и CSS

Разметка HTML

Как всегда, свою работу начнем с разметки, непосредственно на странице html. Ничего сверхъестественного и навороченного, наше меню будет выглядеть в виде простого списка с определенными классами, необходимыми для последующей доводки и оформления:
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<ul class="menu  collapsible">
<li><a href="#">Рубрики</a>
<ul class="acitem">
<li><a href="#">Рубрика 1</a></li>
<li><a href="#">Рубрика 2</a></li>
<li><a href="#">Рубрика 3</a></li>
<li><a href="#">Рубрика 4</a></li>
<li><a href="#">Рубрика 5</a></li>
<li><a href="#">Рубрика 6</a></li>
</ul>
</li>
<li><a href="#">Архивы</a>
<ul class="acitem">
<li><a href="#">Январь (10)</a></li>
<li><a href="#">Февраль (15)</a></li>
<li><a href="#">Март (8)</a></li>
<li><a href="#">Апрель (12)</a></li>
<li><a href="#">Май (9)</a></li>
<li><a href="#">Июнь (4)</a></li>
</ul>
</li>
<li><a href="http://dbmast.ru/">Мой Блог (нет подменю)</a></li>
<li><a href="#">Интересное</a>
<ul class="acitem">
<li><a href="#">Пункт меню 1</a></li>
<li><a href="#">Пункт меню 2</a></li>
<li><a href="#">Пункт меню 3</a></li>
<li><a href="#">Пункт меню 4</a></li>
<li><a href="#">Пункт меню 5</a></li>
<li><a href="#">Пункт меню 6</a></li>
</ul>
</li>
<li><a href="#">Ссылки</a>
<ul class="acitem">
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
<li><a href="#">Ссылка 3</a></li>
<li><a href="#">Ссылка 4</a></li>
<li><a href="#">Ссылка 5</a></li>
<li><a href="#">Ссылка 6</a></li>
</ul>
</li>
</ul>

 
Для полноценной работы нам потребуется подключить актуальную версию библиотеки jQuery (свою, или со стороннего ресурса), сам исполняемый плагин accordeon.js и файл стилей accordeon.css, которые вы найдете в архиве с исходниками. В последствии, вы сможете изменить внешний вид и настроить параметры работы меню «аккордеон» исходя из своих потребностей.
В начале документа html, между тегами <head>...</head> размещаете три заветные строчки:
 

<link rel="stylesheet" type="text/css" href="accordeon.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>	
<script src="accordeon.js" type="text/javascript"></script>

 
Как вы видите, html-каркас аккордеона построен в виде простого неупорядоченного списка, основной элемент в меню тег <ul>, который должен иметь класс: "menu". Если меню не будет иметь этого класса, js не подключится в работу и меню просто не станет реагировать, да и потеряется связь с с таблицей стилей css.
Предусмотрена возможность использования дополнительных классов для базового тега <ul>, это: collapsible — меню работает как аккордеон, и при этом раскрывается, и сворачивается при клике, и класс noaccordion, который отключает функциональность аккордеона, т.е. меню становится стандартным списком.
В конечном итоге, мы получаем раздвижной «аккордеон» с функцией открытия и закрытия, непосредственно при нажатии на основные пункты меню.

Для того чтобы, какой-либо из пунктов меню, после загрузки страницы, отображался в развернутом виде, можно воспользоваться другим вспомогательным классом — expand:
 

1
2
3
4
5
6
7
8
9
10
<li class="expand"><a href="#">Рубрики</a>
    <ul class="acitem">
	<li><a href="#">Рубрика 1</a></li>
	<li><a href="#">Рубрика 2</a></li>
	<li><a href="#">Рубрика 3</a></li>
	<li><a href="#">Рубрика 4</a></li>
	<li><a href="#">Рубрика 5</a></li>
	<li><a href="#">Рубрика 6</a></li>
    </ul>
</li>

 

CSS

Теперь наступает самый интересный момент, во всяком случае для меня, это формирование стилей нашего «аккордеона» с помощью css, а с новыми возможностями, добиться можно потрясающих результатов, при этом совсем не используя графических файлов в работе.

Код стилей CSS нашего меню, кому-то может показаться слишком объемным, так что к некоторым разделам я добавил пояснения:
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
ul.menu, ul.menu ul {
list-style-type:none;
margin: 0;
padding: 0;
width: 15em;
}
ul.menu a {
display: block;
text-decoration: none;
text-align: left;
}
ul.menu li {
margin-top: 1px;
}
ul.menu li a, ul.menu ul.menu li a { 
padding: 0.5em;
/* закругленные углы пунктов меню */
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color: #d7d7d7;
border: solid 1px #333;
background: #333;
/* функция градиента для Webkit - браузеров */
background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
/* функция градиента для Firefox + */
background: -moz-linear-gradient(top,  #666,  #000);
/* функция градиента для Opera 11 + */
background-image: -o-linear-gradient(top,rgb(102,102,102),rgb(0,0,0));
}
ul.menu li a:hover, ul.menu ul.menu li a:hover {
/* фон и градиент пунктов меню при наведении */
background: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
background: -moz-linear-gradient(top,  #444,  #000);
background-image: -o-linear-gradient(top,rgb(68,68,68),rgb(0,0,0));
}
ul.menu li ul li a, ul.menu ul.menu li ul li a {
background: #ccc;
color: #000;
padding-left: 20px;
}
ul.menu li ul li a:hover, ul.menu ul.menu li ul li a:hover {
background: #aaa;
border-left: 5px #000 solid;
padding-left: 15px;
}
ul.menu ul.menu li a:hover {
border-left: 0;
padding-left: 0.5em;
}
ul.menu ul.menu {
border-left: 5px #f00 solid;
}
ul.menu a.active, ul.menu ul.menu li a.active, ul.menu a.active:hover, ul.menu ul.menu li a.active:hover {
/* фон и градиент активных пунктов меню */
text-decoration: none;
color: #faddde;
border: solid 1px #980c10;
background: #d81b21;
background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
background: -moz-linear-gradient(top,  #ed1c24,  #aa1317);
background-image: -o-linear-gradient(top,  #ed1c24,  #aa1317);
}
div.panel {
border: 1px #000 solid;
padding: 5px;
margin-top: 1px;
}
ul.menu div.panel a, ul.menu div.panel li a:hover  {
display :inline;
color: #666;
background: none;
margin: 0;
padding: 0;
border: none;
font-weight: bold;
}
ul.menu div.panel a:hover {
color: #000;
text-decoration: underline;
}

 
Оформляя основные пункты меню, добавил функцию градиента для фона, благо с недавних пор, практически все современные браузеры поддерживают это свойство CSS3. Ну, а для притормаживающего IE не помогает даже специальный фильтр, с помощью которого, градиент отображается более или менее нормально, в силу своей испорченности и врожденной ненависти к веб-дизайнерам, этот браузер переносит градиент главных пунктов меню на выпадающие списки подменю. Так что применять свойство градиента или нет, решать только вам, а я так думаю, пошел он, этот IEшка в @оппу...
Для корректного отображения данного меню в IE 8+, придется отказаться от применения функции линейного градиента, то есть пункты меню в IEшке будут выглядеть немного иначе.

Изменяя цветовую палитру и экспериментируя с переходами цвета свойства градиента, вы всегда сможете подвести меню под дизайн своего сайта, в примере использованы темные тона и контрастный красный цвет, для активных пунктов меню.

Все это конечно очень даже хорошо, но все же не стоит забывать о том, что код CSS не свободен от недостатков ( вдруг я где то накосячил ) и представлен в ознакомительных целях. Работая над построением меню, проверяйте конечный результат на кроссбраузерность и тогда все у вас получится.

Обновление от: 24.10.2014

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

64 комментария
  1. Глеб:

    Здравствуйте! Скажите, как подправить код css для того, чтобы при наведении на подпункты фон у них становился как у главных пунктов (то есть черными и с градиентами), а ссылки между тегами белыми?

    Ответить
    • driver:

      Здравствуйте Глеб.

      Все довольно просто, конечно если я вас правильно понял, немного подкорректируйте и внесите дополнительные параметры в стили css. Приведу пример кода:

      ul.menu li a:hover, ul.menu ul.menu li a:hover { /* фон и градиент пунктов меню при наведении */
        background: #000;
        background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
        background: -moz-linear-gradient(top,  #444,  #000);
        background-image: -o-linear-gradient(top,rgb(68,68,68),rgb(0,0,0));
      }
       
      ul.menu li ul li a, ul.menu ul.menu li ul li a {
        background: #ccc;
        background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#777));
        background: -moz-linear-gradient(top,  #ccc,  #777);
        background-image: -o-linear-gradient(top,rgb(204,204,204),rgb(119,119,0119));
        color: #000;
        padding-left: 20px;
      }
       
      ul.menu li ul li a:hover, ul.menu ul.menu li ul li a:hover {
        background: #000;
        background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
        background: -moz-linear-gradient(top,  #444,  #000);
        background-image: -o-linear-gradient(top,rgb(68,68,68),rgb(0,0,0));
        color: #fff;
      }

      В результате получите меню аккордеон такого вида: ( см. скрин ).

      Вообще вариантов оформления масса, нужно только не бояться экспериментировать и все получится.

      Удачи!

      Ответить
  2. Доброе время суток.

    Очень отличный блог.

    Добавил ето меню себе на сайт, сайт на юкозе, долго сидел розбирался с настройками ccs, читал учебники но розобрался немножко.

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

    Если есть возможность отпишыте как исправить проблему, а то очень хочется меню акордеон на сайт.

    Ответить
  3. Fktrctq:

    подскажите в меню для чего это — div.panel ? Спасибо!

    Ответить
    • driver:

      Fktrctq, div.panel параметр используемый при блочной верстке меню, вы можете его не использовать, так как данное меню построено в виде простого списка )))

      Ответить
  4. Fktrctq:

    Как можно сделать чтобы при клике по категории когда страничка обновилась меню оставалось раскрытым с этой категорией? Спасибо!

    Ответить
    • driver:

      Я уже отвечал на похожий вопрос, но повторюсь.

      Состояние аккордеона с открытым подменю при загрузке, достигается путем добавления дополнительного класса CSS — expand.

      Пункту меню, который при загрузке вы хотите видеть раскрытым, присваиваете класс «expand» li class="expand" <a href="#" rel="nofollow">Рубрики</a>.

      Ответить
  5. Fktrctq:

    Состояние аккордеона с открытым подменю при загрузке, достигается путем добавления дополнительного класса CSS — expand. Пункту меню, который при загрузке вы хотите видеть раскрытым, присваиваете класс «expand» li class="expand" Рубрики.

    Я имел в виду совсем другое мне не нужно чтобы оно было постоянно раскрытым Допустим я кликнул по Любой категории у меня страничка обновилась и меню закрылось Нужно чтобы оно оставалось раскрытым Кликнул по другой категории, страница обновляется и чтобы осталось раскрытым та категория по которой кликнул перед обновлением страницы Как такое возможно сделать?

    Ответить
  6. Дмитрий:

    А как сделать так, чтобы при переходе в субкатегорию состояние родительской категории сохранялось (т.е. оставалась открытой) и текущая субкатегория соответственно подсвечивалась, чтобы юзер знал где находится.

    Ответить
  7. Дмитрий:

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

    Я имел в виду совсем другое мне не нужно чтобы оно было постоянно раскрытым Допустим я кликнул по Любой категории у меня страничка обновилась и меню закрылось Нужно чтобы оно оставалось раскрытым Кликнул по другой категории, страница обновляется и чтобы осталось раскрытым та категория по которой кликнул перед обновлением страницы Как такое возможно сделать?
    но в ответа — нет. Такое ощущение, что или так сделать нельзя или сами авторы не в курсе как достичь такого эффекта.

    Ответить
  8. Сергей:

    Поставил слайдшоу на базе jquery 1.7.1 — конфликтуют с меню. Т.е. меню под 1.7.1 разворачивает и не реагирует, а слайдшоу глючит под 1.4.2 =(

    Ответить
    • driver:

      Сергей, не нужно подключать jquery два раза. Это одна и та же библиотека, просто разных версий. Попробуйте подключить одну, последнюю версию. Еще как вариант, вставьте сразу после подключения библиотеки jQuery скрипт:

      <script type="text/javascript">jQuery.noConflict();</script>

      Ответить
  9. Алексей:

    Хорошее меню, спасибо большое, но вот есть вопрос.

    Для родительского меню

    <a href="#" rel="nofollow">Рубрика 1</a>

    работает выделение a.аctive, а для выпадающего эл-та в этом меню

    <a href="#" rel="nofollow">Рубрика 1</a>

    hover работает, а active нет.Если я правильно понял — нужно подкорректировать js (я не оч силён в этом вопросе) Подскажите пожалуйста, что изменить... Или где можно скачать изменённый js файл...

    Спасибо.

    Ответить
  10. Сергей:

    Не знаю,у меня нигде нет класса

    class="expand"
    ,а меню всё равно не сворачивается. В чём может быть дело?

    Ответить
    • driver:

      Я тоже не знаю почему у вас не сворачивается. Вы же видите рабочий пример, все сворачивается и разворачивается во всех браузерах замечательно. Возьмите исходники меню из демо-страницы и поставьте как есть. Проверьте правильно ли подключается javascript. Хотя, если бы к документу не подключался js, то вообще все пункты загружались бы в развернутом виде.

      Тяжело быть телепатом, вот это факт ))))

      Ответить
  11. Алексей:

    driver, подскажите, пожалуйста. Как сделать, что бы не только главный эл-т меню был выделен, а и дочерний. При наведении мышью дочерний работает, а при нажатии мышью на него, его стиль не меняется, не фиксируется нажатие... В стилях пробовал и active — работает только для родительского эл-та меню...

    Ответить
    • driver:

      В конкретном случае класс .active к ссылкам основных пунктов меню добавляется с помощью функции js. При добавлении ссылкам класса с таким же именем, происходит наследование значений родительского элемента и подпункты при наведении формируются как основные.

      Ответить
  12. виктор:

    а подскажите пожалуйста,какой надо вставить код в wordpress'е для того что бы рубрики и подрубрики добавлялись автоматически?

    Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться без комментирования

Обновления комментариев по RSS RSS комментариев к этой записи »

Рейтинг@Mail.ru