Главная » 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 и поделитесь ссылкой на запись в своих соц-сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

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

64 комментария
  1. Здравствуйте. Когда искал меню в стиле аккордеон, то Вашему меню я не нашел альтернатив (остальные либо не IC, либо заморочено). Поставил, подкорректировал, все заработало. Сейчас стоит проблема в том, чтобы сделать подменю (еще вложения). Прочитав комментарии, попробовал Ваши советы, но ничего не пошло. Прошу помощи в корректировке, может что-то изменил не то.Прилагаю меню и css.

    Ответить
  2. Здравствуйте (извините, в предыдущем комментарии есть ошибки). Когда искал меню в стиле аккордеон, то Вашему меню я не нашел альтернатив (остальные либо не ICE, либо заморочено). Поставил, подкорректировал, все заработало. Сейчас стоит проблема в том, чтобы сделать подменю (еще вложения). Прочитав комментарии, попробовал Ваши советы, но ничего не пошло. Прошу помощи в корректировке, может что-то изменил не то.Прилагаю меню и css.

    Ответить
    • driver:

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

      Посмотрел, от моего меню у вас остался только html-каркас, да набор правил css. Скрипт сторонний, работает в связке с jquery.cookie, работает хорошо, но не прокатывает скрытие подпунктов суб-меню, т.е. добавить их не составляет труда, а вот организовать их появление и закрытие по клику, это задача. Не прокатывают мои советы по добавлению подпунктов в ваше меню потому, что советы мои заточены под исполняемый js jQuery, меню расписанного в статье. Посмотрю что можно сделать и отпишусь. Кстати, это не единственный аккордеон, который можно найти в моем блоге.

      Ответить
      • Спасибо за ответ и помощь. Про Ваш аккордеон: да я его изменял, были проблемы с куками и т.п., но идея именно шла с Вашего сайта, доступность изложения и дизайн для нашего школьного сайта (скругленные прямоугольники) самое то. Так что за это и благодарю, ведь вовремя и качественно поданная идея это уже пол дела! Еще раз спасибо и буду признателен, если что выйдет с моей проблемой.

        Ответить
      • Driver, это снова я. Прошу помощи по вопросу, описанному выше (сделать из Вашего многоуровневое меню). Хоть направление что менять, где почитать? Потому что на данный момент меню выглядит убого (руководству срочно нужно было сделать меню в соответствии с шаблоном). Спасибо и извините что докучаю.

        Ответить
        • driver:

          Здравствуйте.

          Вариантов много, попробуйте например это: Тынц, измените цвет, прикрутите cookie, кстати, в CSS Menu Maker, можно практически любое меню подогнать под свой дизайн

  3. Здравствуйте! Меню ваше понравилось . Но теперь хотелось бы чтобы он всегда было в развернутом виде и не складывалось гармошкой. Нравится все остальное.

    Ответить
    • driver:

      В статье подробно расписано как включать и отключать функцию аккордеона

      Предусмотрена возможность использования дополнительных классов для базового тега <ul>, это: collapsible — меню работает как аккордеон, и при этом раскрывается, и сворачивается при клике, и класс noaccordion, который отключает функциональность аккордеона, т.е. меню становится стандартным списком.

      Если вы хотите превратить аккордеон в стандартное вертикальное меню, просто исключите из работы accordeon.js в html закомментируйте подключение плагина:

      <!-- исполняемый плагин <script src="accordeon.js" type="text/javascript"></script> -->

      в последствии вы всегда сможете вернуться к использованию аккордеона просто раскомментировав плагин.

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

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