Създаване - акордеон - css3 меню
В този урок ще създадем меню "акордеон". Докато създаваме менюто в чист css, то ще работи в браузъри, които поддържат селектора на псевдоклас :target.
Стъпка 2 – Оформление на менюто и основен стил Първо, ще добавим малко стил, за да изчистим полетата, подложките и други.
.accordion, .accordion ul, .accordion li, .accordion a, .accordion span margin: 0; пълнеж: 0; рамка: няма; очертание: няма; > .accordion li list-style: няма; >
Сега добавяме CSS3 градиент, сенки и основни стилове за текста.
Менюто няма да има фиксирана ширина. Той ще заеме цялата ширина на своя родител, така че ако искате да му дадете ширина от 300px, просто създайте div и му дайте желаната ширина. Ще зададем минималната ширина на 160px (110px ширина + 50px подложка).
.accordion li > дисплей: блок; позиция: относителна; мин. ширина: 110px; подложка: 0 10px 0 40px;
За диапазон, който ще съдържа някои числа, ще дефинираме сив цвят на фона, сенки и заоблени ъгли.
.accordion li > педя
Стъпка 3 - Икони За да вмъкнем икони, ще използваме селектора :before. Трябва да се вмъкне преди дадения елемент. По този начин можем да вмъкнем икони. Иконите, които ще използваме, са 24px широки и 24px високи. Ще ги поставим в горния ляв ъгъл и ще зададем малки полета.
.акордеон > li > a: преди позиция: абсолютна; отгоре: 0; ляво: 0; съдържание: "; ширина: 24px; височина: 24px; поле: 4px 8px; фоново повторение: без повторение; фоново изображение: url(../img/icons.png); позиция на фона: 0px 0px; >
Създайте спрайтизображения, които ще съдържат всички икони (нормален изглед и изглед при задържане). Предимството на използването на спрайтове е, че можем да заредим всички икони едновременно с по-малко заявки. И тъй като имаме само едно изображение, което ще съдържа всички икони, размерът също ще бъде съответно по-малък.
.accordion li.files > a:преди < фонова позиция: 0px 0px; > .accordion li.files:hover > a:before, .accordion li.files:target > а: преди
.accordion li.mail > a:преди < фонова позиция: -24px 0px; > .accordion li.mail:hover > a:before, .accordion li.mail:target > а: преди
.accordion li.cloud > a:преди < фонова позиция: -48px 0px; > .accordion li.cloud:hover > a:before, .accordion li.cloud:target > а: преди
.accordion li.sign > a:преди < фонова позиция: -72px 0px; > .accordion li.sign:hover > a:before, .accordion li.sign:target > a:преди < background-position: -72px -24 Стъпка 4 - Подменю
HTML За да създадетеподменю добавете друг неподреден списък с клас подменю вътре в елемента от списъка, който искате да имате подменю. Стъпка 4 - Подменю За да създадем подменю, създаваме друг списък с класа на подменюто, вътре в който ще бъдат елементите, които трябва да бъдат поставени в подменюто.
CSS стилове Стиловете за връзки към подменюто са почти еднакви. Нека просто променим малко цветовете и сенките. Нека добавим и "em" с някои настройки.
.подменю li:последно дете a
.подменю li > цвят на диапазона: #797979; text-shadow: 1px 1px 0px rgba(255,255,255, .2); фон: прозрачен; контур: 1px плътен #c9c9c9;
> .подменю em позиция: абсолютна; отгоре: 0; ляво: 0; маржин-ляво: 14px; цвят: #a6a6a6; шрифт: нормален 10px/32px Arial, sans-serif; >
Стъпка 5 - Задържане и активиране Когато задържаме курсора на мишката върху основния елемент от списъка, ще променим цвета на градиента и стила на обхвата на зелено.
.акордеон > li: задържи > a, .акордеон > li:цел > цвят: #3e5706; text-shadow: 1px 1px 1px rgba(255,255,255, .2);
.акордеон > li: задържи > педя, .акордеон > li:цел > цвят на интервала: #fdfdfd; text-shadow: 0px 1px 0px rgba(0,0,0, .35); фон: #3e5706; > .подменю li:hover a
Стъпка 6 - Показване и скриване на подменюто Задайте височината на подменюто на 0px, за да го скриете и да добавите ефект на преход. За да работи преходът между слайдовете, трябва да настроим подменюто на фиксирана височина. Следователно, ако искате да добавите различен брой връзки към всяко подменю, трябва да дадете на всяко подменю различна височина в зависимост от броя на връзките. Тъй като в примера има само три връзки, задаваме височина на 98px. Можете да зададете височината на 100%, но в този случай слайдът няма да работи.
.accordion li > .височина на подменюто: 0; преливане: скрито;
> .accordion li:target > .височина на подменюто: 98px; >
Краен резултат
