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

129

Всім знову привіт.
Давно не звертався до розробки меню для веб-сайтів, а технології не стоять на місці, та й наш допитливий розум не дає спокою. У коментарях до запису про спосіб створення Меню «Акордеон» без javascript і зображень мене запитували, як зробити таке меню з відкриттям посилань при наведенні, а при натисканні на пункт меню. Сьогодні саме про такому способі побудови навігації і піде мова, ми розглянемо техніку створення меню в стилі «акордеон» на основі CSS і зовсім небагато jQuery.

Оновлення від: 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
  • Рубрики
    • Рубрика 1
    • Рубрика 2
    • Рубрика 3
    • Рубрика 4
    • Рубрика 5
    • Рубрика 6
  • Архіви
    • Січень (10)
    • Лютий (15)
    • Березень (8)
    • Квітень (12)
    • Травень (9)
    • Червень (4)
  • Мій Блог (немає підменю)
  • Цікаве
    • Пункт меню 1
    • Пункт меню 2
    • Пункт меню 3
    • Пункт меню 4
    • Пункт меню 5
    • Пункт меню 6
  • Посилання
    • Посилання 1
    • Посилання 2
    • Посилання 3
    • Посилання 4
    • Посилання 5
    • Посилання 6
  • Рубрики
    • Рубрика 1
    • Рубрика 2
    • Рубрика 3
    • Рубрика 4
    • Рубрика 5
    • Рубрика 6
  • Архіви
    • Січень (10)
    • Лютий (15)
    • Березень (8)
    • Квітень (12)
    • Травень (9)
    • Червень (4)
  • Мій Блог (немає підменю)
  • Цікаве
    • Пункт меню 1
    • Пункт меню 2
    • Пункт меню 3
    • Пункт меню 4
    • Пункт меню 5
    • Пункт меню 6
  • Посилання
    • Посилання 1
    • Посилання 2
    • Посилання 3
    • Посилання 4
    • Посилання 5
    • Посилання 6

Для повноцінної роботи нам знадобиться підключити актуальну версію бібліотеки jQuery (свою, або зі стороннього ресурсу), сам програмний плагін accordeon.js і файл стилів accordeon.css, які ви знайдете в архіві з вихідними кодами. Надалі ви зможете змінити зовнішній вигляд і налаштувати параметри роботи меню «акордеон» виходячи зі своїх потреб.
На початку документа html, теги … розміщуєте три заповітні рядки:


Як ви бачите, html-каркас акордеона побудований у вигляді простого неупорядкованого списку, основний елемент в меню тег

    , який повинен мати клас: “menu”. Якщо меню не буде мати цього класу, js не підключиться в роботу і меню просто не стане реагувати, так і загубиться зв’язок з таблицею стилів css.
    Передбачена можливість використання додаткових класів для базового тега

      це: collapsible — меню працює як акордеон, і при цьому розкривається, і згортається при кліці, і клас noaccordion, який відключає функціональність акордеона, тобто меню стає стандартним списком.
      У кінцевому підсумку, ми отримуємо розсувний «акордеон» з функцією відкриття і закриття, безпосередньо при натисканні на основні пункти меню.

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

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      
    • Рубрики
      • Рубрика 1
      • Рубрика 2
      • Рубрика 3
      • Рубрика 4
      • Рубрика 5
      • Рубрика 6
    • Рубрики
      • Рубрика 1
      • Рубрика 2
      • Рубрика 3
      • Рубрика 4
      • Рубрика 5
      • Рубрика 6
    • 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.5 em;
      /* закруглені кути пунктів меню */
      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.5 em;
      }
      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;
      }

      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.5 em;
      /* закруглені кути пунктів меню */
      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.5 em;
      }
      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 8+, доведеться відмовитися від застосування функції лінійного градієнта, тобто пункти меню в ІЕшке будуть виглядати трохи інакше.

      Змінюючи колірну палітру і експериментуючи з переходами кольору властивості градієнта, ви завжди зможете підвести меню під дизайн свого сайту, у прикладі використані темні тони і контрастний червоний колір, для активних пунктів меню.

      Все це звичайно дуже добре, але все ж не варто забувати про те, що код CSS не вільний від недоліків ( раптом я десь накосячілі ) і представлений в ознайомлювальних цілях. Працюючи над побудовою меню, перевіряйте кінцевий результат на кросбраузерність і тоді все у вас вийде.

      Оновлення від: 24.10.2014

      Завантажити Вихідні Коди

      З Повагою, Андрій .

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