Създайте акордеон, като използвате само CSS

В този урок ще видим как да създадем популярния елемент за дизайн на уеб страница с акордеон, използвайки само HTML и CSS (ще добавим малко CSS3 за преход между слайдове). В резултат на това ще получим кода за два варианта на акордеона - хоризонтален и вертикален.

хоризонтален акордеон

Нека започнем с маркирането за хоризонталния акордеон. Не съдържа нищо конкретно, просто обикновен HTML код:

Използваме прост неподреден списък, който съдържа няколко елемента с класове. Всичко е просто. И CSS кодът превръща маркирането в това, от което се нуждаем:

Всичко е съвсем просто и очевидно. Първо дефинираме класа .accordion за елемента

, който задава ширината и скриването на елемента на преливащо съдържание, както и някои други правила за стилизиране на външния вид.

След това изместваме елементите от списъка наляво, задаваме ширината им на 20% (100% ÷ 5 = 20% ) и задаваме свойството overflow:hidden; така че нищо да не стърчи извън елемента. Той също така задава фиксирана височина, което е чудесно за позициониране на съдържание при разширяване на елемент от списък.

За динамичния ефект, когато елементът от списъка се разширява, задаваме времето за преход на 0,2 секунди и ефекта на избледняване.

След това много полезните селектори :first- и :last-of-type се използват за указване на заоблени ъгли в горния ляв и долния край за първия елемент от списъка и съответно в горния десен и долния десен ъгъл за последния елемент от списъка.

След това задаваме padding на 10 px за елемента

Сега инсталираме функционалността на акордеона:

Това правило гласи следното: веднага щом курсорът на мишката е над елемента

, трябва да направите всички елементи 10% широки.

Така получаваме5 × 10% = 50%. 5 слайда с ширина 10% в списъка. Тоест имаме 50% свободно място, за да го запълним с елемента от списъка, над който е курсорът на мишката.

10% елемент от списък + 50% свободно пространство = 60%

Сега просто задаваме правилото: елементът от списъка, над който е курсорът на мишката, трябва да бъде направен 60% широк:

Като цяло функционалността използва две правила и се декодира по следния начин: когато курсорът на мишката е над списъка, трябва да зададете ширината на всички елементи от списъка на 10% от ширината на елемента

, но елементът, над който е курсорът на мишката, трябва да бъде направен 60% широк.

10% + 10% + 10% + 10% + 60% = 100%

Последният блок от код просто задава цветовете за нашите слайдове.

вертикален акордеон

Сега нека се заемем с вертикалния акордеон. За целта ще използваме идентично HTML маркиране с единственото добавяне на ID за елемента

.:

Сега закачаме елементите от списъка един към друг вертикално. Задаваме тяхната ширина на 100% и използваме логиката 10% / 60%, за да зададем височината. CSS кодът изглежда така:

Ние изрично задаваме ширината на 100% в правилото за селектора :hover, но логиката за изчисляване на стойностите на височината не се е променила.

Този урок е подготвен за вас от екипа на ruseller.com Източник на урока: csswizardry.com/2011/02/pure-css3-accordion/ Превод: Сергей Фастунов Урокът е създаден: 4 март 2011 г. Преглеждания: 38718 Правила за препечатване

5 последни урока от категорията "CSS"

Забавни ефекти за букви

Малък ефект с интерактивна анимация на букви.

Изпълнение на забавни съвети

Малка концепция за смешноподсказки, които са внедрени в SVG и anime.js. В допълнение към специален стил, примерът реализира анимация и трансформация на графични обекти.

Анимирани букви

Експеримент: анимирани SVG букви, базирани на библиотеката anime.js.

POV слънчеви очила

Страхотен експеримент на уеб страница, която се показва „от първо лице“ през слънчеви очила.

Навигация в падащо меню

Експериментален навигационен скрипт за падащо меню.

---