Как да създадем CSS базирано акордеон
В днешния урок ще научим как можем да създадем a хоризонтално и вертикално хармонично съдържание, като се използва само CSS3. Има много jQuery плъгини, които могат да свършат тази работа вместо вас, но какво правите, ако посетителят е изключил Javascript, а акордеонът няма да работи правилно. Ако акордеонът ви е изцяло в CSS, той ще работи за всички ваши посетители.
Ще създадем a хоризонтален и вертикален съдържание на акордеон. При щракване върху текста на заглавието слайда ще се отвори с пълно съдържание, а ето и бърз преглед (снимки на екрани) как изглеждат.
Като това, което виждате? Нека кодирането започне!
1. Подготовка на HTML и съдържание
Като начало ще създадем HTML за акордеон.
Структурата се нуждае от контейнер Разделение и след това да има раздел за всеки слайд в акордеона. В този пример ще имаме 5 слайда. Всяко от слайдовете ще има заглавие и абзац за съдържанието.
За нас
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi Tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Аликвам sempre mauris sit amet justo tempor не lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Аликвамът е арестуван, но иакулис justo. Etiam mattis dignissim gravida. Аликвам не е просто анте, не е semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed followat. Phasellus eu erat enim. Представя се в магната non massa dapibus scelerisque в eu lorem.
Услуги
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi Tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Аликвам sempre mauris sit amet justo tempor не lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Аликвамът е арестуван, но иакулис justo. Etiam mattis dignissim gravida. Аликвам не е просто анте, не е semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed followat. Phasellus eu erat enim. Представя се в магната non massa dapibus scelerisque в eu lorem.
Блог
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi Tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Аликвам sempre mauris sit amet justo tempor не lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Аликвамът е арестуван, но иакулис justo. Etiam mattis dignissim gravida. Аликвам не е просто анте, не е semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed followat. Phasellus eu erat enim. Представя се в магната non massa dapibus scelerisque в eu lorem.
Портфолио
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi Tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Аликвам sempre mauris sit amet justo tempor не lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Аликвамът е арестуван, но иакулис justo. Etiam mattis dignissim gravida. Аликвам не е просто анте, не е semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed followat. Phasellus eu erat enim. Представя се в магната non massa dapibus scelerisque в eu lorem.
контакт
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi Tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Аликвам sempre mauris sit amet justo tempor не lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Аликвамът е арестуван, но иакулис justo. Etiam mattis dignissim gravida. Аликвам не е просто анте, не е semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed followat. Phasellus eu erat enim. Представя се в магната non massa dapibus scelerisque в eu lorem.
Сега ние имаме нашите слайдове, можем да започнем да оформяме акордеона.
2. Стайлинг на CSS
Първо трябва да оформим съдържанието Разделение на акордеон. Това ще ни даде представа как да се показват всеки от слайдовете и всяка от заглавията.
/ * Дефиниране на кутия за акордеони * / .accordion ширина: 830px; препълване: скрит; марж: 10px авто; цвят: # 474747; фон: # 414141; подложка: 10px;
След това ще създадем заглавия за всеки от слайдовете.
.раздел на акордеон плувка: ляво; препълване: скрит; цвят: # 333; курсора: указател; фон: # 333; марж: 3px; .аккордионна секция: hover background: # 444;
Задаваме цвета на фона да бъде тъмно сив в раздела, за да бъде заглавието, където посетителите ще кликнат, за да покажат слайда. Използваме този раздел както за заглавието, така и за съдържанието, което означава, че можем да използваме по-малко HTML код и да използваме заглавието на слайда като заглавие на съдържанието.
.раздел акордеон p (дисплей: няма;
В момента всички слайдове ще бъдат затворени, затова трябва да сме сигурни, че абзацът е скрит от изгледа, докато слайдът е отворен, така че за сега задайте показването на абзаца на нищо.
.раздел акордеон: след позиция: относителна; шрифта: 24px; цвят: # 000; шрифт тегло: удебелен шрифт; .ccordion раздел: nth-дете (1): след съдържание: '1'; .аккордионна секция: nth-child (2): след content: '2'; .аккордионна секция: nth-child (3): след content: '3'; .ccordion раздел: nth-дете (4): след съдържание: '4'; .ccordion раздел: nth-дете (5): след съдържание: '5';
С затворените слайдове искаме да покажем номер в долната част на заглавието, за да кажем кой номер е слайд. За това ще използваме CSS за добавяне на съдържание след заглавието на раздела, това може да стане с помощта на :след селектор на псевдоклас.
Сега създадохме заглавието на слайда, за да направим кликване събитие, за да покажем слайда в акордеона. Но има проблем, CSS няма събитие за щракване, поради което акордеонът обикновено се създава с помощта на jQuery, така че можем да прикачим събитие за щракване към текста на заглавието..
Трябва да имитираме събитие при щракване в CSS, което може да се направи с помощта на :мишена селектор на псевдоклас.
3. Използване :мишена селектор от псевдоклас
:мишена ни позволява да оформим идентификатора на фрагмента. Понякога използваме привързан етикет на страницата, за да сочи към място на страницата. При кликване върху връзката документ за самоличност в котвения маркер става целта и можете да го оформите с помощта на :мишена селектор.
За да добавите това в акордеон, трябва да добавим връзка около заглавието, сочеща към документ за самоличност на слайда.
За нас
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi Tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Аликвам sempre mauris sit amet justo tempor не lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Аликвамът е арестуван, но иакулис justo. Etiam mattis dignissim gravida. Аликвам не е просто анте, не е semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed followat. Phasellus eu erat enim. Представя се в магната non massa dapibus scelerisque в eu lorem.
.раздел акордеон: цел фон: #FFF; подложка: 10px; секция: .ccordion: target: hover background: #FFF; секция за съгласуване: целеви h2 ширина: 100%; .ccordion раздел: целеви h2 a цвят: # 333; подложка: 0; .аккордионна секция: цел p display: block; секция за съгласуване h2 a запълване: 8px 10px; езика: блок; шрифта: 16px; шрифт тегло: нормално; Цвят: #eee; текстови декорация: няма;
Горният код ще промени размера на слайда, за да пасне на останалата част от акордеона и ще промени цвета на фона на бял. Параграфът е бил скрит, така че сега трябва да покажем абзаца.
Сега, когато кликнете върху заглавието на акордеона, слайда ще промени стила си, за да покаже съдържанието на слайда.
4. Хоризонтална акордеон
Горният код ще създаде общата акордеон, сега можем да започнем да правим CSS промени за разликите между хоризонталната и вертикалната акордеон. И двете хармони имат еднаква функционалност, но стайлингът на заглавието ще бъде различен.
.хоризонтална част ширина: 5%; Височина: 250 пиксела; -moz-transition: width 0.2s; -webkit-transition: ширина 0.2s се улеснява; -о-преход: ширината 0.2s се улеснява; преход: широчина 0.2s;
Първо поставихме широчина на заглавния раздел до 5%, така че е затворен слайд. Тъй като разделът е както заглавието, така и съдържанието на слайда, трябва да добавим анимация, за да покаже съдържанието, като използваме свойството на прехода..
/ * Позиционирайте номера на слайда * / .хоризонтална секция: след top: 140px; лява: 15px;
Позицията на номера на слайда ще бъде една и съща позиция на всяко затворено заглавие, те са позиционирани различно от вертикалните заглавия.
/ * Заглавие на затворен слайд * / хоризонтална секция h2 -webkit-transform: rotate (90deg); -moz трансформация: върти (90deg); -o-transform: завъртане (90deg); transform: rotate (90deg); ширина: 240 пиксела; позиция: относителна; лява: -100px; отгоре: 85px; / * При мишката върху отворения слайд * / .horizontal: target width: 73%; височина: 230px; .хоризонтално: целево h2 top: 0px; лява: 0; -webkit трансформация: завъртане (0deg); -moz трансформация: завъртане (0deg); -o-transform: завъртане (0deg); преобразуване: завъртане (0deg);
Горният код ще промени размера на слайда, за да пасне на останалата част от акордеона. Заглавието бе завъртяно вертикално, за да стигне до заглавието, но сега с отворения слайд трябва да сменим текста назад, за да бъде хоризонтален, като върнем текста до 0 градуса.
5. Вертикална акордеон
Вертикалната акордеон работи по същия начин като хоризонталния акордеон, с изключение на това, че трябва да сменим височина вместо широчина и не е необходимо да променяме подравняването на текста.
.вертикална секция ширина: 100%; височина: 40px; -webkit - преход: височина 0.2s; -moz-transition: height 0.2s; -о-преход: височината 0.2s се улеснява; преход: височина 0.2s; / * Задайте височина на слайда * / .vertical: target height: 250px; ширина: 97%;
На мишена случай на вертикална акордеон ще променим височина на заглавието, за да покаже слайда.
.вертикален раздел h2 позиция: относителна; лява: 0; отгоре: -15px; / * Задайте позиция на номера на слайда * / .vertical секция: след top: -60px; лява: 810px; .vertical раздел: цел: след left: -9999px;
По-горе ще промените позиция на заглавния текст на затворения слайд. С затворен слайд трябва да настроим позиция от номера, който се намира отдясно на акордеона. Когато слайдът е отворен, трябва да скрием този номер при заглавието, когато целта е зададена, за да сменим лявата позиция от екрана.
Сега, когато кликнете върху заглавието на акордеона, слайда ще промени стила си, за да покаже съдържанието на слайда.
Бележка на редактора: Тази публикация е написана от Пол Ъндърууд за Hongkiat.com. Пол е PHP уеб разработчик от Бристол, Великобритания. Той пише уроци за Web Development: основните теми са PHP, jQuery, CSS3 и HTML5. Той също така записва полезни кодови фрагменти в Paulund.co.uk.
