Створюємо акордеон - меню на css3
У цьому уроці ми створюватимемо «акордеон»-меню. Скільки ми створюватимемо меню на чистому css, воно буде працювати в браузерах, які підтримують селектор псевдо-класу :target.
Крок 2 — Розташування меню та основні стилі Перш за все, ми додамо деякі стилі, щоб очистити margins, paddings та інші.
.accordion, .accordion ul, .accordion li, .accordion a, .accordion span margin: 0; padding: 0; border: none; outline: none; > .accordion li list-style: none; >
Тепер додаємо CSS3 градієнт, тіні та основні стилі для тексту.
Меню не матиме фіксованої ширини. Воно займе всю ширину свого батька, тому якщо ви хочете, задати йому ширину 300px просто створіть див і задайте йому потрібну ширину. Ми задамо мінімальну ширину 160px (110 пікселів ширина + 50px відступ).
.accordion li > a display: block; position: relative; min-width: 110px; Padding: 0 10px 0 40px;
Для span, який міститиме деякі цифри, ми визначимо сірий колір фону, тіні та закруглені кути.
.accordion li > a span
Крок 3 — Іконки Щоб вставити іконки, ми будемо використовувати селектор :before. Його слід вставити перед заданим елементом. Таким чином, ми можемо вставити іконки. Іконки, які ми будемо використовувати, мають ширину і висоту 24px на 24px. Ми розміщуватимемо їх у лівому верхньому кутку і задаватимемо невеликі поля.
.accordion > li > a:before position: absolute; top: 0; Left: 0; content: »; width: 24px; height: 24px; margin: 4px 8px; background-repeat: no-repeat; background-image: url(../img/icons.png); background-position: 0px 0px; >
Створюємо спрайтзображень, який міститиме всі іконки (нормальний вигляд і вид при наведенні). Перевага використання спрайтів у тому, що ми можемо завантажити всі іконки одночасно за меншої кількості запитів. І так як у нас є лише одне зображення, яке міститиме всі іконки, розмір відповідно теж буде меншим.
.accordion li.files > a:before < background-position: 0px 0px; > .accordion li.files:hover > a:before, .accordion li.files:target > a:before
.accordion li.mail > a:before < background-position: -24px 0px; > .accordion li.mail:hover > a:before, .accordion li.mail:target > a:before
.accordion li.cloud > a:before < background-position: -48px 0px; > .accordion li.cloud:hover > a:before, .accordion li.cloud:target > a:before
.accordion li.sign > a:before < background-position: -72px 0px; > .accordion li.sign:hover > a:before, .accordion li.sign:target > a:before < background-position: -72px -24 Крок 4 - Sub-меню
HTML Щоб створитипідменю додати ще один невпорядкований список із класом підменю всередині елемента списку, який ви хочете мати підменю. Крок 4 – Sub-меню Щоб створити підменю, створюємо ще один список із класом sub-menu, всередині якого будуть елементи, які потрібно розмістити у підменю.
CSS стилі Стилі для посилань підменю майже аналогічні. Тільки трохи змінимо кольори та тіні. Також додамо “em” з деякими опціями.
.sub-menu li:last-child a
.sub-menu li > a span color: #797979; text-shadow: 1px 1px 0px rgba(255,255,255, .2); background: transparent; border: 1px solid #c9c9c9;
> .sub-menu em position: absolute; top: 0; Left: 0; margin-left: 14px; color: #a6a6a6; font: normal 10px/32px Arial, sans-serif; >
Крок 5 — Hover та Active При наведенні на елемент основного списку ми змінюватимемо колір градієнта та стиль span на зелений.
.accordion > li:hover > a, .accordion > li:target > a color: #3e5706; text-shadow: 1px 1px 1px rgba(255,255,255, .2);
.accordion > li:hover > a span, .accordion > li:target > a span color: #fdfdfd; text-shadow: 0px 1px 0px rgba(0,0,0, .35); background: #3e5706; > .sub-menu li:hover a
Крок 6 — Показати та приховати підменю Для підменю задаємо висоту 0px, щоб приховати його та додаємо ефект переходу. Для того, щоб перехід слайду працював, нам потрібно задати фіксовану висоту підменю. Тому, якщо ви побажаєте до кожного підменю додати різну кількість посилань, ви повинні задати різну висоту кожного підменю залежно від кількості посилань. Оскільки в прикладі лише три посилання, задаємо висоту 98px. Ви можете зробити висоту 100%, але в цьому випадку слайд не працюватиме.
.accordion li > .sub-menu height: 0; overflow: hidden;
> .accordion li:target > .sub-menu height: 98px; >
Кінцевий результат
