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