Как сделать аккордион на чистом CSS3.
Всем привет! В прошлой статье мы разобрали, зачем нужен псевдокласс target, а сегодня мы закрепим знания на практике и создадим аккордион на чистом CSS3.
Нам понадобятся всего лишь 2 файла: index.html и style.css
Давайте откроем файл index.html и пропишем следующее:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css target</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<ul class="accordion">
<li>
<a href="#first" class="accordion-header">Первый</a>
<div class="accordion-content" id="first">
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Consequuntur porro, quo reprehenderit impedit suscipit obcaecati necessitatibus quam praesentium accusamus, sit blanditiis deleniti doloribus placeat voluptas iure, autem tempore, mollitia. Quos.</p>
</div>
</li>
<li>
<a href="#second" class="accordion-header">Второй</a>
<div class="accordion-content" id="second">
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Consequuntur porro, quo reprehenderit impedit suscipit obcaecati necessitatibus quam praesentium accusamus, sit blanditiis deleniti doloribus placeat voluptas iure, autem tempore, mollitia. Quos.</p>
</div>
</li>
<li>
<a href="#third" class="accordion-header">Третий</a>
<div class="accordion-content" id="third">
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Consequuntur porro, quo reprehenderit impedit suscipit obcaecati necessitatibus quam praesentium accusamus, sit blanditiis deleniti doloribus placeat voluptas iure, autem tempore, mollitia. Quos.</p>
</div>
</li>
</ul>
</div>
</body>
</html>
Итак, что это все значит? Давайте разбираться. В начале файла мы, конечно же, подключаем наши стили. Дальше мы создаем блок с классом .container, который будет содержать ненумерованный список с 3 элементами. Эти 3 элемента и будут наш аккордион. Внутри каждого из них есть ссылка(заголовок), при клике по которой будет показываться наш текст из блока с классом .accordion-content.
Разметка довольно простая, думаю, тут все понятно.
Переходим к самому интересному - стилям.
Тут у нас тоже ничего сложного нет, однако требует понимания.
body {
margin: 0;
padding: 0;
}
.container {
width: 100%;
max-width: 400px;
margin: 50px auto;
}
.accordion {
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
.accordion-header {
display: block;
padding: 15px 20px;
background: #bbb;
color: #fff;
text-decoration: none;
font-size: 1.2em;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0,0,0,.1);
margin-bottom: 5px;
font-family: sans-serif;
}
.accordion-content p {
margin: 0 0 20px 0;
}
.accordion-content {
padding: 0;
height: 0;
overflow: hidden;
}
.accordion-content:target {
height: auto;
padding: 20px;
}
В начале мы убираем отступы у тега body.
Дальше указываем, что наш контейнер должен растягиваться на всю ширину, но не больше 400px, делаем выравнивание по центру страницы и отступ сверху и снизу в 50px.
Нашему списку указываем ширину, отступы и убираем кружки.
Начинаем делать заголовок. Делаем его блочным, задаем отступы, цвет, шрифт, тени и т.д.
Для лучшей читабельности задаем отступ у нашего параграфа.
А вот теперь самое интересное. По умолчанию мы убираем все отступы, делаем высоту равную 0px и добавляем свойство overflow, чтобы скрыть контент, а когда на наш блок начинают ссылаться, мы все возвращаем на место, используя псевдокласс target.
Вот так все просто. Теперь откройте страницу в браузере и после имени файла введите один из трех наших тегов. Например:
http://site.local/index.html#first
И у вас откроется первый блок с контентом.
Понятно, что пользователь так делать не будет, поэтому в html коде мы сделали ссылки такого вида: #first, #second, #third и задали им соотвествующие идентификаторы в атрибуте id у блоков с контентом.
Думаю, вы поняли, какие возможности нам дает HTML5 и CSS3, поэтому его нужно срочно изучать прямо сейчас, чтобы не отстать от времени, а в этом вам поможет видеокурс HTML5 и CSS3 с Нуля до Гуру
-
Создано 03.09.2014 08:08:07
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.