4 начина да създадете страхотни CSS само акордеони
Съдържанието на акордеоните е полезен дизайн модел. Можете да ги използвате за много различни неща: за менюта, списъци, изображения, откъси от статии, текстови фрагменти и дори видеоклипове
Повечето акордеони там разчитат JavaScript, главно на jQuery, но тъй като използването на модерни CSS3 техники стана широко разпространено, можем да намерим и хубави примери използвайте само HTML и CSS, които ги правят достъпни в среди с деактивиран JavaScript.
Създаването на CSS само акордеони може да бъде трудна задача, така че в този пост ще се опитаме да разберат основните понятия, които разработчиците използват, когато трябва да създадат такава.
При създаването на разделите само за CSS обикновено има два основни подхода, като всеки от тях има два случая на честа употреба. Първият подход използва скрити елементи на форма, докато втората използва CSS псевдоселектори.
1. Метод на радио бутона
Методът за радио бутон добавя скрит радиовход и съответстващ етикет на етикета към всеки табет на акордеона. Логиката е проста: когато потребителят избере раздел, те основно проверяват радио бутона, който принадлежи на този раздел, по същия начин, когато попълват формуляр. Когато кликнат върху следващия раздел в акордеона, те избират следващия бутон за избор и т.н..
В този метод, само един раздел може да бъде отворен по същото време. Логиката на HTML изглежда така:
Заглавие на съдържанието (не използвайте h1 маркер тук)
Съдържание…
р>
Ти трябва да добавете отделна двойка радио-етикети за всеки раздел в акордеон. Само HTML няма да даде желаното поведение, трябва да добавите и подходящите CSS правила, да видим как можете да постигнете това.
Фиксирани вертикални раздели на височина
В това решение (вижте скрийншота по-долу) разработчикът е скрил радио бутона с помощта на дисплей: няма; след това той даде относително положение към етикета на етикета, който съдържа заглавието на всеки раздел, и абсолютна позиция спрямо съответния етикет: след псевдо-елемент.
Последният държи дръжката, маркирана със зелен знак +, която отваря разделите. Затворените раздели също използват дръжка, маркирана със зелено “-” знаци. В CSS затворените раздели се избират с помощта на селектора елемент + елемент.
Също така трябва да дадете на съдържанието на отворения раздел фиксирана височина. За да направите това, изберете тялото на отворения раздел (отбелязано с класа съдържание на раздела в HTML по-горе) с помощта на CSS селектора element1 ~ element2.
Основната логика на CSS тук е следната:
вход [type = radio] display: none; етикет position: relative; дисплей: блок; етикет: след content: "+"; позиция: абсолютна; вдясно: 1em; input: checked + label: след content: "-"; вход: проверено ~ .tab-content height: 150px;
Можете да разгледате пълния CSS тук на Codepen. CSS първоначално е написана на Sass, но ако кликнете върху “Преглед компилиран” можете да видите компилирания CSS файл.
Акордеон с радио бутони
Това красиво изображение на акордеон използва същия бутон за избор, но вместо етикети, разработчикът тук използва HTML маркера с надпис да постигнем поведение на акордеон.
CSS е малко по-различен, главно защото в този случай табовете не са поставени вертикално, а хоризонтално. Разработчикът използва CSS селектора за елемент + елемент (който бе използван в предишния случай, за да избере превключвателите), за да гарантира, че краищата на покритите изображения остават видими..
Прочетете подробното ръководство за това как да създадете този елегантен CSS само акордеон.
2. Метод на отметка
Методът на квадратчето за отметка използва типа за въвеждане вместо квадратчето за избор. Когато потребителят избере раздел, те основно проверяват съответното квадратче.
Разликата в сравнение с метода на радио бутона е, че е възможно е да отворите повече от един раздел едновременно, точно както е възможно да проверите повече от един квадратчета за отметка във формуляра.
От друга страна, разделите няма да се затварят сами, когато потребителят кликне върху друг. Логиката на HTML е същата като преди, само в този случай трябва да използвате квадратчето за въвеждане.
Заглавие на съдържанието (не използвайте h1 маркер тук)
Съдържание…
р>
Fixed Height Checkbox Accordion
Ако искате табулатори с фиксирана височина, логиката на CSS е почти същата като в случая с бутоните за избор, това е само типът вход, който се е променил от радиото към квадратчето за отметка. В тази писалка Codepen можете да разгледате кода.
Поле за проверка на височината на флуида Accordion
Когато повече от един отвори са отворени едновременно, показването на фиксирани височини може да повлияе негативно на потребителския опит, тъй като височината на акордеона може значително да нарасне. Това може да се подобри, ако вие променете фиксираната височина на височината на флуида; това означава, че височината на отворените раздели се разширява или свива в съответствие с размера на съдържанието, което притежават.
За да направите това, трябва да промените фиксираната височина на съдържанието на табулацията до максимална височина, и използват относителни единици:
вход: проверено ~ .tab-съдържание max-height: 50em;
Ако искате да разберете по-добре как работи този метод, можете да разгледате този Codepen.
3. Методът: target
: target е един от псевдоселекторите на CSS3. С негова помощ можете да свържете HTML елемент с прикрепен маркер по следния начин:
Заглавие на раздела
Съдържание на раздела
Когато потребителят кликне върху заглавието на раздел, цялата секция ще се отвори благодарение на :мишена псевдоселектор и URL адресът ще бъде променен на следния формат: www.some-url.com/#tab-1.
Отвореният раздел може да бъде оформен в CSS с помощта на section: target … се произнесе. Имаме чудесен урок тук на hongkiat за това как можете да създадете хубави CSS само акордеони с :мишена както в вертикални, така и в хоризонтални оформления.
Основният недостатък на :мишена метод той променя URL адреса, когато потребителят кликне върху разделите. Това се отразява на историята на браузъра и бутонът за връщане на браузъра няма да отведе потребителя до предишната страница, а до предишното състояние на акордеона.
4. Методът: hover
Последният недостатък може да бъде преодолян, ако използваме : навъртам CSS псевдоселектор вместо :мишена, но в този случай разделите няма да реагират на кликването, а на събитието за навъртане. Номерът тук е, че трябва или скривате непокритите елементи, или намаляване на тяхната ширина или височина - в зависимост от оформлението на разделите
Покритият елемент трябва да бъде видим, или да бъде настроен на пълна ширина / височина, за да може акордеонът да работи.
Следващите 3 CSS само акордеони бяха направени с метода: hover, щракнете върху връзките под снимките на екрана, за да разгледате кода..
Хоризонтална хармония с изображения
Изкривено акордеон
Активиран с навигация хармонично устройство със стандартно състояние
