Как создать CSS на основе аккордеона
В сегодняшнем уроке мы узнаем, как мы можем создать горизонтальный и вертикальный аккордеон с помощью CSS3. Существует множество плагинов jQuery, которые могут выполнить эту работу за вас, но что вы будете делать, если у посетителя отключен Javascript, тогда аккордеон не будет работать правильно. Если ваш аккордеон написан исключительно на CSS, он будет работать для всех ваших посетителей..
Мы собираемся создать горизонтальный а также вертикальный контент аккордеон. При нажатии на текст заголовка откроется слайд с полным содержанием, и вот быстрый предварительный просмотр (скриншоты) того, как они выглядят..
Как то, что вы видите? Пусть начнется кодирование!
1. Подготовка HTML и контента
Для начала мы собираемся создать HTML для аккордеона.
Структура нуждается в контейнере ДИВ а затем есть раздел за каждый слайд в аккордеоне. В этом примере у нас будет 5 слайдов. Каждый из слайдов будет иметь заголовок и абзац для содержания.
Насчет нас
Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Suspendisse id lobortis massa. Нун виверра велит лео, сиди амет элементум ми. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget ee placerat. Aliquam Semper Mauris Sit Amet Justo Tempor Nac Lacinia Magna Molestie. Etiam Placerat Congue Dolor Vitae Adipiscing. Aliquam ac erat lorem, ut iaculis justo. Этиам Маттис Дигнисим Гравида. Aliquam nec justo ante, не semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicleula elementum nulla sed consequat. Phasellus eu erat enim. Престижный в magna non massa dapibus scelerisque в Евремии.
Сервисы
Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Suspendisse id lobortis massa. Нун виверра велит лео, сиди амет элементум ми. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget ee placerat. Aliquam Semper Mauris Sit Amet Justo Tempor Nac Lacinia Magna Molestie. Etiam Placerat Congue Dolor Vitae Adipiscing. Aliquam ac erat lorem, ut iaculis justo. Этиам Маттис Дигнисим Гравида. Aliquam nec justo ante, не semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicleula elementum nulla sed consequat. Phasellus eu erat enim. Престижный в magna non massa dapibus scelerisque в Евремии.
Блог
Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Suspendisse id lobortis massa. Нун виверра велит лео, сиди амет элементум ми. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget ee placerat. Aliquam Semper Mauris Sit Amet Justo Tempor Nac Lacinia Magna Molestie. Etiam Placerat Congue Dolor Vitae Adipiscing. Aliquam ac erat lorem, ut iaculis justo. Этиам Маттис Дигнисим Гравида. Aliquam nec justo ante, не semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicleula elementum nulla sed consequat. Phasellus eu erat enim. Престижный в magna non massa dapibus scelerisque в Евремии.
портфолио
Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Suspendisse id lobortis massa. Нун виверра велит лео, сиди амет элементум ми. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget ee placerat. Aliquam Semper Mauris Sit Amet Justo Tempor Nac Lacinia Magna Molestie. Etiam Placerat Congue Dolor Vitae Adipiscing. Aliquam ac erat lorem, ut iaculis justo. Этиам Маттис Дигнисим Гравида. Aliquam nec justo ante, не semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicleula elementum nulla sed consequat. Phasellus eu erat enim. Престижный в magna non massa dapibus scelerisque в Евремии.
контакт
Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Suspendisse id lobortis massa. Нун виверра велит лео, сиди амет элементум ми. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget ee placerat. Aliquam Semper Mauris Sit Amet Justo Tempor Nac Lacinia Magna Molestie. Etiam Placerat Congue Dolor Vitae Adipiscing. Aliquam ac erat lorem, ut iaculis justo. Этиам Маттис Дигнисим Гравида. Aliquam nec justo ante, не semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicleula elementum nulla sed consequat. Phasellus eu erat enim. Престижный в magna non massa dapibus scelerisque в Евремии.
Теперь у нас есть наши слайды, мы можем начать стилизовать аккордеон.
2. CSS Styling
Сначала нам нужно стилизовать содержимое ДИВ аккордеона. Это даст нам представление о том, как отображать каждый из слайдов и каждый из заголовков..
/ * Определить поле Аккордеона * / .accordion width: 830px; переполнение: скрытый; маржа: 10px авто; цвет: # 474747; фон: # 414141; обивка: 10px;
Далее мы собираемся создать заголовки для каждого из слайдов.
.секция аккордеона плавать: слева; переполнение: скрытый; цвет: # 333; курсор: указатель; фон: # 333; Маржа: 3px; .accordion section: hover background: # 444;
Мы устанавливаем цвет фона темно-серый, чтобы заголовок, по которому посетители будут нажимать, чтобы отобразить слайд. Мы используем этот раздел как для заголовка, так и для контента, что означает, что мы можем использовать меньше HTML и повторно использовать заголовок слайда в качестве заголовка контента.
.аккордеонная секция p дисплей: нет;
В настоящий момент все слайды будут закрыты, поэтому мы должны убедиться, что абзац скрыт от просмотра, пока слайд не будет открыт, поэтому пока установите отображение абзаца равным none.
.секция аккордеона: после позиция: относительная; Размер шрифта: 24px; цвет: # 000; начертание шрифта: жирный; .accordion section: nth-child (1): после content: '1'; .accordion section: nth-child (2): после content: '2'; . Аккордеонный раздел: nth-child (3): после content: '3'; . Аккордеонный раздел: nth-child (4): после content: '4'; раздел аккордеона: nth-child (5): после content: '5';
Когда слайды закрыты, мы хотим отобразить число внизу заголовка, чтобы сказать, на каком слайде мы находимся. Для этого мы будем использовать CSS для добавления содержимого после заголовка раздела, это можно сделать с помощью :после селектор псевдокласса.
Теперь мы создали заголовок для слайда, мы можем сделать событие щелчка для отображения слайда в аккордеоне. Но есть проблема, у CSS нет события click, поэтому аккордеон обычно создается с помощью jQuery, поэтому мы можем прикрепить событие click к тексту заголовка..
Нам нужно имитировать событие щелчка в CSS, что можно сделать с помощью : цель селектор псевдокласса.
3. Использование : цель Селектор псевдокласса
: цель позволяет нам стилизовать идентификатор фрагмента. Иногда мы используем тег привязки на странице, чтобы указать место на странице. При нажатии на ссылку Я бы в теге привязки становится целью, и вы можете стилизовать это с помощью : цель селектор.
Чтобы добавить это в аккордеон, нам нужно добавить ссылку вокруг заголовка, указывающую на Я бы слайда.
Насчет нас
Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Suspendisse id lobortis massa. Нун виверра велит лео, сиди амет элементум ми. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget ee placerat. Aliquam Semper Mauris Sit Amet Justo Tempor Nac Lacinia Magna Molestie. Etiam Placerat Congue Dolor Vitae Adipiscing. Aliquam ac erat lorem, ut iaculis justo. Этиам Маттис Дигнисим Гравида. Aliquam nec justo ante, не semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicleula elementum nulla sed consequat. Phasellus eu erat enim. Престижный в magna non massa dapibus scelerisque в Евремии.
.аккордеонная секция: target background: #FFF; обивка: 10px; .accordion section: target: hover background: #FFF; .accordion section: цель h2 ширина: 100%; Раздел аккордеона: цель h2 a color: # 333; обивка: 0; .accordion section: target p display: block; . Аккордеонная секция h2 a padding: 8px 10px; Дисплей: блок; Размер шрифта: 16px; начертание шрифта: нормальный; цвет: #eee; текст-отделка: нет;
Приведенный выше код изменит размер слайда, чтобы он соответствовал остальной части аккордеона, и изменит цвет фона на белый. Абзац был скрыт, так что теперь на цели нам нужно отобразить абзац.
Теперь при нажатии на заголовок аккордеона слайд изменит стиль, чтобы отобразить содержимое слайда..
4. Горизонтальный Аккордеон
Приведенный выше код создаст общий аккордеон, теперь мы можем начать вносить изменения в CSS для различий между горизонтальным и вертикальным аккордеоном. Оба этих баяна имеют одинаковую функциональность, но стиль заголовка будет разным.
.горизонтальное сечение ширина: 5%; высота: 250px; -моз-переход: ширина 0,2 с, разгрузка; -веб-переход: ширина 0,2 с, разгрузка; -переход: ширина 0,2 с; переход: ширина 0,2 с, разгрузка;
Сначала мы устанавливаем ширина заголовка раздела до 5%, так что это закрытый слайд. Поскольку этот раздел является как заголовком, так и содержимым слайда, нам необходимо добавить анимацию для отображения содержимого с помощью свойства transition..
/ * Позиционировать номер слайда * / .горизонтальный разрез: после top: 140px; слева: 15px;
Положение числа на слайде будет таким же, как и у каждого закрытого заголовка. Они расположены по-разному относительно вертикальных заголовков..
/ * Заголовок закрытого слайда * / .horizontally h2 -webkit-transform: rotate (90deg); -moz-преобразование: поворот (90deg); -отрансформировать: повернуть (90 градусов); преобразование: вращение (90 градусов); ширина: 240px; позиция: относительная; Слева направо: -100px; топ: 85px; / * При наведении курсора мыши на открытый слайд * / .horizontal: target width: 73%; высота: 230px; .horizontal: target h2 top: 0px; Слева направо: 0; -webkit-преобразование: поворот (0deg); -moz-преобразование: поворот (0deg); -о-преобразование: поворот (0 градусов); преобразование: вращение (0 градусов);
Приведенный выше код изменит размер слайда, чтобы соответствовать остальной части аккордеона. Заголовок был повернут по вертикали, чтобы сместиться вниз по заголовку, но теперь, когда слайд открыт, нам нужно изменить текст обратно на горизонтальный, повернув текст обратно на 0 градусов..
5. Вертикальный Аккордеон
Вертикальный аккордеон работает так же, как и горизонтальный аккордеон, за исключением того, что нам нужно изменить рост вместо ширина и нам не нужно менять выравнивание текста.
.вертикальный разрез ширина: 100%; высота: 40px; -вебкит-переход: высота 0,2 с, разгрузка; -моз-переход: высота 0,2 с, разгрузка; -переход: высота 0.2s; переход: высота 0,2 с, разгрузка; / * Установить высоту слайда * / .vertical: target height: 250px; ширина: 97%;
На цель Событие вертикальной гармошки мы собираемся изменить рост заголовка для отображения слайда.
.вертикальный разрез h2 положение: относительное; Слева направо: 0; верх: -15px; / * Установить положение номера на слайде * / .вертикальный раздел: после top: -60px; Слева направо: 810px; .вертикальный раздел: target: after left: -9999px;
Вышесказанное изменит позиция текста заголовка на закрытом слайде. С закрытым слайдом нам нужно установить позиция номера, который расположен справа от аккордеона. Когда слайд открыт, нам нужно скрыть это число в заголовке, когда цель установлена, поэтому мы меняем левую позицию за пределами экрана..
Теперь при нажатии на заголовок аккордеона слайд изменит стиль, чтобы отобразить содержимое слайда..
Примечание редактора: Этот пост написан Пол Андервуд для Hongkiat.com. Пол - веб-разработчик PHP из Бристоля, Великобритания. Он пишет учебники по веб-разработке: основные предметы включают PHP, jQuery, CSS3 и HTML5. Он также записывает полезные фрагменты кода на Paulund.co.uk.
