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 !

65 комментариев
  1. Дмитрий:

    Здравствуйте! Можете подсказать как это меню использовать для отображения категорий virtuemart. Буду благодарен за помощь.

    Ответить
    • driver:

      Дмитрий

      Спасибо за интерес к статье. С различного рода джумловскими модулями я как то не в особой дружбе, если я правильно понял virtuemart как раз к таким и относится. По сути в такое меню можно прикрутить все что угодно, или нет, точнее само меню вписать практически в любой дизайн. А для этого необходимо хотя бы знать что куда и зачем. На основе каркаса этого меню используя стили и прикрутив библиотеку jQuery, можно попытаться изменить вывод категорий в virtuemart. С тонкостями этой процедуры я к сожалению не знаком.

      !дачи!

      Ответить
  2. артур:

    Подскажите пожалуйста как сделать чтоб меню было ссылкой а не появлялось и изчезало?

    Ответить
    • driver:

      артур

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

      Ответить
  3. Роман:

    Спасибо за статью, очень полезная вещь. Вы в статье написали: «Для того чтобы какой-либо из пунктов меню автоматически после загрузки страницы отображался в развернутом виде, можно воспользоваться другим дополнительным классом, например «expand».», можете подробние описать, как и что сделать чтобы меню сохранялось в таком самом виде после загрузки страницы, что и до? Буду благодарен если ответите.

    Ответить
    • driver:

      Роман, вечер добрый.

      На демо — странице, показано обо варианта вывода меню, как с открытым списком подменю, так и с закрытым. Можно все проделать так же как в исходниках демо. Предвидя, что такой вопрос не последний, опишу немного подробнее:

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

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

      Все никаких дополнительных телодвижений не требуется, так как в файле menu.js, предусмотрительно прописана данная функция.

      В статью добавил пример кода пункта меню с классом «expand».

      Удачи, все у вас получится!

      Ответить
  4. Роман:

    Спасибо за ответ. Хотелось бы ищо узнать, можно ли зделать так, што б при нажатие на любой пункт меню нам открывалось подменю етаво пункта, и мы переходили по какому либа подменю, што б после загрузки страницы подменю несварачивалось? Извените за ошыбки, руссий неучил 🙂

    Ответить
  5. Анна:

    Меню замечательное, все очень хорошо и красиво. Только у меня почему-то, при размещении на сайте, в опере перестает работать. Впрочем, как и в хроме. В Мозилле работает.

    Самое интересное, что на Вашем сайте все работает без нареканий.

    Может быть, это с joomla конфликт?..

    Ответить
    • driver:

      Анна, спасибо.

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

      Ответить
  6. Анна:

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

    Опера меня вообще разочаровывает последнее время. Даже после очистки кэша она продолжает показывать то, что было до; изменения отображаются только спустя какое-то время.

    И еще вопрос. Можно ли сделать, чтобы класс expand автоматически присваивался активной ссылке? То есть: у меня на сайте CMS joomla, там нет возможности прописать меню на каждой страничке (оно выводится модулем). Пполучается так: перехожу по ссылке в меню, попадаю на новую страничку, где меню благополучно «схлопывается», оставляя меня в растерянности: куда же я попала?..

    Ответить
    • driver:

      Анна, здравствуйте.

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

      Удачи в работе над проектом.

      Ответить
  7. Анна:

    Спасибо большое за участие!

    Насколько я понимаю, там дело в проверке current url, но, поскольку мое знакомство с jQuery только начинается, увязать одно с другим я не могу, поэтому пока оставлю, как есть.

    Вам также удачи в работе! Отдельная благодарность за этот блог — много полезного и интересного; я сюда периодически попадаю, когда ищу что-либо (нахожу это здесь).

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

    Я тестировал это меню на сайте и у меня это меню постоянно в открытом виде, не сворачивается почему-то, подскажи пожалуйста что мне сделать чтоб меню работала корректно. (просматривал на мазиле и эксплорере)

    Ответить
    • driver:

      Сергей

      Сначала с Новым годом!!!

      Теперь посмотрите не присутствует ли у вас class="expand", если прописан в каком либо пункте, то просто удалите и все должно работать, т.е меню будет загружаться в закрытом виде. При работе никто не мешает обращаться к исходникам демо-страницы, для сравнения.

      Удачи в новом году и заглядывайте временами в гости, надеюсь будет много нового и интересного.

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

    спасибо!С новым годом теперь все работает!

    Ответить
  10. wertssx:

    Отличное меню с отличным исполнением!

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

    Подскажите как сделать чтобы меню отображалось в IE ? СПАСИБО!

    Ответить
    • driver:

      Алексей, доброго вам времени суток и спасибо за интерес к статье.

      Опять этот IEшка, как он достал уже со своей корявостью...

      как сделать чтобы меню отображалось в IE ?

      В данном виде никак! Меню отображается, но криво, нормально этот бррузерррр не отображает ничего, ломает всю картину. Если вы хотите, что бы меню работало корректно, то придется отказаться от функции градиента главных пунктов меню, но только лишь для IE. Просто удалите из кода css все фильтры для IE.

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

      Удачи!

      Ответить
  12. MaxCheet:

    у меня не получилось на свой шаблон приделать можете посмотреть на код html страницы чтобы понять в чем причина

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

Отправляя к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