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. driver:

    Вам всего лишь необходимо вставить в нужном месте вот такую строчку:

    < ?php wp_list_categories('orderby=ID&title_li='); ?>

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

    Ответить
  2. Михаил:

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

    а подскожите пожалуста поподробнее какой файл открывать и куда вставите этот код. Я новичёк в програмировании. Очень хочется иметь на сайте такое меню.

    Ответить
  3. Егор:

    Подскажите пожалуйста, как расположить ссылку по середине (имеется ввиду по горизонтали). Просто когда я увеличил высоту кнопок, текст внутри них располагается не по центру

    Ответить
    • driver:

      Егор.

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

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

    На сколько я понимаю, надо загрузить в сайт скрипты из архива и дать ссылки?

    Ответить
    • driver:

      Правильно понимаете... Только не забудьте при этом про правильную разметку в html

      Ответить
      • kkk:

        А как сделать меню, чуть поменьше? А то кнопочки то солидные, хотелось бы их подрезать. Пример:

        mbear.ucoz.ru/primer.png

        Ответить
        • driver:

          Просто измените параметр width: 15em; в ul.menu, ul.menu ul на любой нужный вам, исходя из картинки это будет примерно так width: 14em;. Не забывайте при этом, что если текст будет слишком длинным, то произойдет перенос и меню будет выглядеть совсем иначе.

  5. kkk:

    Благодарю, получилось. С текстом все отлично.

    Ответить
  6. Евгений:

    Здравствуйте.Еще одно классное меню.Я прошу Вас вернутся к вопросу Егора от 29 02 2012г.Там речь шла о подсветки подменю при наведении курсора.А можно ли что-бы подсветка еще и фиксировалась при кликанье на подменю.Я понимаю,что нужно добавить класс в html и прописать команду в js. но мне слабо.

    Спасибо

    Ответить
  7. Илья:

    Добрый день... Отличный скрипт. Вставил на сайт все работает, осталось внешний вид подогнать.

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

    Рубрика

    -----Суб рубрика

    -------Суб суб рубрика

    -------Суб суб рубрика

    Рубрика 2

    Рубрика 3

    Рубрика 4

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

    Зарание спасибо за ответ.

    Ответить
  8. driver:

    Илья. Спасибо за интерес к статье.

    Приведу пример каркаса html для добавления подрубрик второго уровня:

    <li><a href="#" rel="nofollow">Рубрики</a>
    <ul class="acitem">
    <li><a href="#" rel="nofollow">Рубрика 1</a></li>
    <li><a href="#" rel="nofollow">Рубрика 2</a>
    <ul class="acitem">
    <li><a href="#" rel="nofollow">Суб Рубрика 1</a></li>
    <li><a href="#" rel="nofollow">Суб Рубрика 2</a></li>
    <li><a href="#" rel="nofollow">Суб Рубрика 3</a></li>
    </ul>
    </li>
    <li><a href="#" rel="nofollow">Рубрика 3</a></li>
    <li><a href="#" rel="nofollow">Рубрика 4</a></li>
    <li><a href="#" rel="nofollow">Рубрика 5</a></li>
    <li><a href="#" rel="nofollow">Рубрика 6</a></li>
    </ul>
    </li>

    Все просто, достаточно добавить нужной вам рубрике, очередной неупорядоченный список с классом «acitem», в примере кода это Рубрика 2

    Ответить
  9. Александр:

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

    P.S. Не ожидал изначально, что скрипт будет работать на галерее jquery.1.10.2.js ))

    Ответить
    • driver:

      Спасибо за отзыв. Рад, что вам пригодилась моя работа.

      Ответить
  10. Анатолий:

    Спасибо, отличное меню!

    Как сделать что-бы подсветка, которая при наведении, еще и фиксировалась при кликанье на подменю и переходе на страницу?

    Ответить
  11. Maxim Li:

    Подскажите плиз как делается так что бы блок при прокрутке уходил на верх до определённого момента и останавливался и его было видно но не весь (я не знаю как это называется!) к примеру у вас sidebar тоже прокручивается вверх но останавливается на- Гугл нам поможет и ещё ниже -Рекомндую !буду рад этому научится у вас

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

    Спасибо! Как раз то что нужно, заработало сразу.

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

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