[вёрстка] Делаем на CSS панель вкладок для сайта. Часть 3.
Ранее мы рассмотрели два способа создания панели вкладок для сайта: первый на основе якорей и свойства overflow, и второй на основе переключателей (радиокнопок).
Существует также третий способ добиться переключения вкладок — при помощи селектора :target и всё тех же якорей
Напомню о результатах, которых мы достигли в предыдущих статьях:
- Способ с радиокнопками — гораздо более технологичный и современный, чем вариант с якорями, но он обладает одним недостатком. Используя якоря, мы можем дать ссылку на любую вкладку любой страницы сайта — при переходе по такой ссылке откроется нужная страница и нужная вкладка. Радиокнопки не позволяют нам сделать ссылку на конкретную вкладку. (Во всяком случае, не позволяют решить эту задачу на чистом CSS, без использования Javascript.)
- В то же время, при использовании якорей страница «дёргается», что обусловленно особенностями работы браузера с якорями.
- Также якоря не позволяют управлять несколькими независимыми набрами вкладок на одной странице, а радиокнопки позволяют сделать столько наборов вкладок, сколько нам нужно.
Исходя из этого, первый и второй способ желательно использовать в разных ситуациях:
- Вкладки на якорях предпочтительны, когда вы создаёте одну большую страницу, которая для пользователя будет выглядеть как несколько отдельных страниц.
Например, вы верстаете личный сайт, в котором есть разделы «О себе», «Портфолио», «Контакты», и по какой-то причине не хотите делать их отдельными страницами, а желаете весь сайт сверстать в виде одной большой страницы.
Вкладочный интерфейс на якорях позволят вам сделать отдельные разделы «О себе», «Портфолио», «Контакты», между которыми пользователь может переходить как между отдельными страницами сайта, но при этом физически весь сайт будет содержаться всего в одной HTML-странице. - Вкладки на переключателях предпочтительны, когда вы делаете отдельные элементы оформления внутри страницы. Например, оглавление сайта, набор слайдов в статье и т.п. (На эту тему таже читайте серию статей о создании слайдеров — там используется та же самая технология.)
Метод с использованием :target является более современной вариацией метода с якорями. Этот метод позволяет подавить нежелательную прокрутку страницы при переключении вкладок («дёргание»). Посмотрим, как он работает:
Что такое псевдокласс :target
Ппсевдокласс :target позволяет включать или выключать стили в зависимости от значения якоря в адресной строке браузера. Если вы забыли, что такое якори, вы можете прочитать об этом по этой ссылке.
Селектор, содержащий псевдокласс :target, срабатывает только в том случае, если идентификатор соотвествующего элемента совпадает с якорем.
Например, пусть у нас имеется следующее правило.
p:target {
background-color: #888;
}
Это правило сработает только для того тега p, идентификатор которого совпадает с якоряем в адресной строке. Если в адресной строке нет якоря или если ни один тег p не имеет совпадающего идентификатора, ни к одному элементу правило не будет применено.
Наглядный пример. Понажимайте на эти три ссылки, и посмотрите, как меняется цвет фона у абзацев.
Нажмите на ссылку: раз, два или три.
Это абзац, имеющий идентификатор label1.
Это абзац, имеющий идентификатор label2.
Это абзац, имеющий идентификатор label3.
С псевдоселектором разобрались, займёмся теперь вкладками. Надо сказать, приступая к написанию этой статьи, я и сам не имел опыта вёрстки вкладок на target-ах. Так что я буду учиться этому, фактически, вместе с вами. Сначала я сверстаю несложную панель вкладок, чтобы познакомиться с особенностями этого метода вёрстки, а потом мы посмотрим, как её можно доработать.
Вкладки с :target, первый вариант
Поскольку в нашем распоряжении современные браузеры (в старых :target всё равно не работает), я буду отрываться по полной.
Для структуры HTML-кода я выбрал самый дружественый к поисковикам и к поисковой оптимизации вариант:
<div class='notebookA'>
<div id='tab1-1'>
<h3><a href="#tab1-1">Вкладка 1</a></h3>
<p>Содержимое первой вкладки:</p>
<p>Бла бла бла...</p>
<p>Бла бла бла...</p>
</div>
<div id='tab1-2'>
<h3><a href="#tab1-2">Вкладка 2</a></h3>
<p>Содержимое второй вкладки:</p>
<p>Бла бла бла...</p>
<p>Бла бла бла...</p>
</div>
<div id='tab1-3'>
<h3><a href="#tab1-3">Вкладка 3</a></h3>
<p>Содержимое третьей вкладки:</p>
<p>Бла бла бла...</p>
<p>Бла бла бла...</p>
</div>
</div>
Заголовок вкладки и содержимое вкладки естественным образом сгруппированы, и поисковику легко разобраться в содержимом нашей страницы с вкладками. Контейнер, имеющий класс notebookA, является вместилищем вкладок; всё, что в него вложено, является вкладкой. Внутри каждой вкладки первый элемент служит заголовком вкладки, а остальные — содержимым вкладки.
Вместо тегов div здесь могут быть любые другие, например, семантические теги article, section, nav, aside. В стилях я не буду привязываться к конкретным именам тегов, а буду ориентироваться на структуру документа («что во что вложено»). Вместо h3 также можно использовать любой тег.
Как будем верстать этот HTML-код:
- Контейнеру верхнего уровня зададим фиксированные размеры.
- Вкладки позиционируем в абсолютных координатах относительно контейнера.
- При помощи всё тех же абсолютных координат вытащим первый элемент каждой вкладки за пределы родительского элемента и сделаем из него язычок вкладки.
Контейнер вкладок:
.notebookA {
position: relative;
width: 600px;
height: 350px;
margin: 2em auto;
}
Оформление каждой вкладки:
.notebookA > * {
position: absolute;
border-radius: 5px;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);
left: 0px;
right: 0px;
bottom: 0px;
top: 30px;
padding: 0px 20px;
}
Оформление заголовков-язычков вкладок:
.notebookA > * > *:first-child {
position: absolute;
margin: 0px;
padding: 0px;
top: -30px;
height: 30px;
width: 120px;
border-radius: 5px 5px 0px 0px;
background-color: inherit;
text-align: center;
font-size: 13px;
color: #777;
line-height: 30px;
font-weight: normal;
}
.notebookA > * > *:first-child a {
display: block;
text-decoration: none;
color: inherit;
}
Далее надо выстроить заголовки вкладок горизонтально, чтобы они не накладывались друг на друга:
.notebookA > *:nth-child(1) > *:first-child { left: 10px; }
.notebookA > *:nth-child(2) > *:first-child { left: 135px; }
.notebookA > *:nth-child(3) > *:first-child { left: 260px; }
Результат:
Ну а теперь используем :target и заставим вкладки переключаться:
.notebookA > * {
background-color: #ddd;
color: transparent;
z-index: 0;
transition: all 0.3s ease 0s, z-index 0s 0.3s;
}
.notebookA > *:target {
background-color: #fff;
color: inherit;
z-index: 1;
transition: all 0.3s ease 0.3s, z-index 0s 0.3s;
}
Первый селектор задаёт стили для неактивной вкладки, второй — для активной.
Самое главное в этом коде — смена высоты слоя в стопке при помощи z-index. Также я меняю цвет фона для того, чтобы было видно, какая вкладка выбрана. transition задаёт плавную смену вкладок.
Получилось симпатично:
Вкладка 1
Содержимое первой вкладки
Etiam ultricies at mi vel molestie. Vivamus eu ligula sit amet magna convallis dignissim id sed elit. In pharetra diam a enim varius, vitae scelerisque dui molestie. Praesent euismod ligula vitae tempus congue. Sed eu odio rutrum, euismod massa sed, aliquam.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas dolor diam, fermentum at consequat in, ultricies ut nibh. Curabitur at purus sed augue ultrices commodo eu vel lacus. Suspendisse a dolor consectetur, dignissim ligula et, auctor urna. Sed semper metus eros, ac porttitor metus tempor sed.
Вкладка 2
Содержимое второй вкладки
Mauris erat leo, viverra sed lacinia ut, consectetur eu magna. Aenean dapibus lorem nec sodales volutpat. Donec vel mauris quis sem faucibus sagittis et et sapien. Donec enim urna, egestas in enim placerat, porta posuere metus. Pellentesque vel libero aliquam, facilisis turpis blandit, cursus purus.
Вкладка 3
Содержимое третьей вкладки
Morbi vel augue non tellus elementum dignissim. Aliquam eros ante, gravida nec vehicula nec, rhoncus ut enim. Ut vulputate non urna in placerat.
Phasellus imperdiet eros gravida commodo efficitur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis diam odio, pretium ac urna quis, viverra tincidunt augue.
Понажимайте на заголовки вкладок и посмотрите, как происходит переключение вкладок. Есть одна проблема, да? До того, как вы нажали на какую-нибудь вкладку, не отображается ни одна из них. Хотелось бы сделать так, чтобы по умолчанию одна из вкладок уже была открыта. Что делать?
Попробуем так:
.notebookA > *,
.notebookA > *:target ~ *:last-child {
background-color: #ddd;
color: transparent;
z-index: 0;
transition: all 0.3s ease 0s, z-index 0s 0.3s;
}
.notebookA > *:target,
.notebookA > *:last-child {
background-color: #fff;
color: inherit;
z-index: 1;
transition: all 0.3s ease 0.3s, z-index 0s 0.3s;
}
Селектор .notebookA > * применяется к неактивной вкладке.
Селектор .notebookA > *:target применяется к активной вкладке.
Селектор .notebookA > *:last-child применяется к последней вкладке и делает её активной принудительно.
Селектор .notebookA > *:target ~ *:last-child применяется к последней вкладке, если перед ней есть активная вкладка, и отменяет предыдущее правило.
Теперь по умолчанию активной считается последняя вкладка:
Вкладка 1
Содержимое первой вкладки
Etiam ultricies at mi vel molestie. Vivamus eu ligula sit amet magna convallis dignissim id sed elit. In pharetra diam a enim varius, vitae scelerisque dui molestie. Praesent euismod ligula vitae tempus congue. Sed eu odio rutrum, euismod massa sed, aliquam.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas dolor diam, fermentum at consequat in, ultricies ut nibh. Curabitur at purus sed augue ultrices commodo eu vel lacus. Suspendisse a dolor consectetur, dignissim ligula et, auctor urna. Sed semper metus eros, ac porttitor metus tempor sed.
Вкладка 2
Содержимое второй вкладки
Mauris erat leo, viverra sed lacinia ut, consectetur eu magna. Aenean dapibus lorem nec sodales volutpat. Donec vel mauris quis sem faucibus sagittis et et sapien. Donec enim urna, egestas in enim placerat, porta posuere metus. Pellentesque vel libero aliquam, facilisis turpis blandit, cursus purus.
Вкладка 3
Содержимое третьей вкладки
Morbi vel augue non tellus elementum dignissim. Aliquam eros ante, gravida nec vehicula nec, rhoncus ut enim. Ut vulputate non urna in placerat.
Phasellus imperdiet eros gravida commodo efficitur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis diam odio, pretium ac urna quis, viverra tincidunt augue.
Отлично, но что делать, если по умолчанию мы хотим видеть активной первую вкладку, а не последнню? CSS не позволяет нам описать правила для случая «первая вкладка, если за ней есть/нет активной вкладки».
Мы решим эту проблему тем, что та вкладка, которая на экране видна как первая, на самом деле в коде HTML станет последней. Изменим порядок вкладок в HTML:
<div class='notebookA'>
<div id='tab1-2'>
<h3><a href="#tab1-2">Вкладка 2</a></h3>
<p>Содержимое второй вкладки:</p>
<p>Бла бла бла...</p>
<p>Бла бла бла...</p>
</div>
<div id='tab1-3'>
<h3><a href="#tab1-3">Вкладка 3</a></h3>
<p>Содержимое третьей вкладки:</p>
<p>Бла бла бла...</p>
<p>Бла бла бла...</p>
</div>
<div id='tab1-1'>
<h3><a href="#tab1-1">Вкладка 1</a></h3>
<p>Содержимое первой вкладки:</p>
<p>Бла бла бла...</p>
<p>Бла бла бла...</p>
</div>
</div>
А также изменим последовательность размещения заголовков вкладок:
.notebookA > *:nth-child(3) > *:first-child { left: 10px; }
.notebookA > *:nth-child(1) > *:first-child { left: 135px; }
.notebookA > *:nth-child(2) > *:first-child { left: 260px; }
Что получилось:
Вкладка 2
Содержимое второй вкладки
Mauris erat leo, viverra sed lacinia ut, consectetur eu magna. Aenean dapibus lorem nec sodales volutpat. Donec vel mauris quis sem faucibus sagittis et et sapien. Donec enim urna, egestas in enim placerat, porta posuere metus. Pellentesque vel libero aliquam, facilisis turpis blandit, cursus purus.
Вкладка 3
Содержимое третьей вкладки
Morbi vel augue non tellus elementum dignissim. Aliquam eros ante, gravida nec vehicula nec, rhoncus ut enim. Ut vulputate non urna in placerat.
Phasellus imperdiet eros gravida commodo efficitur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis diam odio, pretium ac urna quis, viverra tincidunt augue.
Вкладка 1
Содержимое первой вкладки
Etiam ultricies at mi vel molestie. Vivamus eu ligula sit amet magna convallis dignissim id sed elit. In pharetra diam a enim varius, vitae scelerisque dui molestie. Praesent euismod ligula vitae tempus congue. Sed eu odio rutrum, euismod massa sed, aliquam.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas dolor diam, fermentum at consequat in, ultricies ut nibh. Curabitur at purus sed augue ultrices commodo eu vel lacus. Suspendisse a dolor consectetur, dignissim ligula et, auctor urna. Sed semper metus eros, ac porttitor metus tempor sed.
Вот полный CSS-код, который использовался в этом примере:
.notebookA {
position: relative;
width: 600px;
height: 350px;
margin: 2em auto;
}
.notebookA > * {
position: absolute;
border-radius: 5px;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);
left: 0px;
right: 0px;
bottom: 0px;
top: 30px;
padding: 0px 20px;
}
.notebookA > * > *:first-child {
position: absolute;
margin: 0px;
padding: 0px;
top: -30px;
height: 30px;
width: 120px;
border-radius: 5px 5px 0px 0px;
background-color: inherit;
text-align: center;
font-size: 13px;
color: #777;
line-height: 30px;
font-weight: normal;
}
.notebookA > * > *:first-child a {
display: block;
text-decoration: none;
color: inherit;
}
.notebookA > *:nth-child(3) > *:first-child { left: 10px; }
.notebookA > *:nth-child(1) > *:first-child { left: 135px; }
.notebookA > *:nth-child(2) > *:first-child { left: 260px; }
.notebookA > *,
.notebookA > *:target ~ *:last-child {
background-color: #ddd;
color: transparent;
z-index: 0;
transition: all 0.3s ease 0s, z-index 0s 0.3s;
}
.notebookA > *:target,
.notebookA > *:last-child {
background-color: #fff;
color: inherit;
z-index: 1;
transition: all 0.3s ease 0.3s, z-index 0s 0.3s;
}
Теперь работает как надо. Правда это постоянное дергание страницы, с которым мы имели дело еще в первой статье, ужасно раздражает. Как заставить браузер перестать крутить страницу?
Вкладки с :target. Второй вариант.
Побеждаем дергающийся скроллинг.
Для того, чтобы полоса вкладок не уезжала за пределы окна браузера, нужно... (многозначительная пауза...) ...нужно, чтобы браузер не знал, к какому месту крутить страницу! Если идентификатор-якорь будет располагаться «нигде», браузер не станет прокручивать страницу «туда, не знаю, куда». Добиться этого «нигде» нам поможет, конечно же, display: none.
Вынесем теги-якоря за пределы вкладок:
<div class='notebookB'>
<span id='tab1-1'></span>
<span id='tab1-2'></span>
<span id='tab1-3'></span>
<div>
<h3><a href="#tab1-1">Вкладка 1</a></h3>
<p>Содержимое первой вкладки</p>
<p>Бла бла бла...</p>
<p>Бла бла бла...</p>
</div>
<div>
<h3><a href="#tab1-2">Вкладка 2</a></h3>
<p>Содержимое второй вкладки</p>
<p>Бла бла бла...</p>
<p>Бла бла бла...</p>
</div>
<div>
<h3><a href="#tab1-3">Вкладка 3</a></h3>
<p>Содержимое третьей вкладки</p>
<p>Бла бла бла...</p>
<p>Бла бла бла...</p>
</div>
</div>
В предыдущем примере я не использовал имена тегов в селекторах и использовал всего одно имя класса. В данном примере надо как-то отличать элементы-якоря от элементов-вкладок. Мне лень прописывать классы, поэтому я использую разные имена тегов. Кроме того, разные имена тегов позволят использовать селекторы вида span:nth-of-type(1) ~ div:nth-of-type(1), что при использовании классов довольно затруднительно.
Не будем тянуть кота за яйца, вот что у меня получилось:
.notebookB {
position: relative;
width: 600px;
height: 350px;
margin: 2em auto;
}
.notebookB > span {
display: none;
}
.notebookB > div {
position: absolute;
border-radius: 5px;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);
left: 0px;
right: 0px;
bottom: 0px;
top: 30px;
padding: 0px 20px;
}
.notebookB > div > *:first-child {
position: absolute;
margin: 0px;
padding: 0px;
top: -30px;
height: 30px;
width: 120px;
border-radius: 5px 5px 0px 0px;
background-color: inherit;
text-align: center;
font-size: 13px;
color: #777;
line-height: 30px;
font-weight: normal;
}
.notebookB > div > *:first-child a {
display: block;
text-decoration: none;
color: inherit;
}
.notebookB > div:nth-of-type(1) > *:first-child { left: 10px; }
.notebookB > div:nth-of-type(2) > *:first-child { left: 135px; }
.notebookB > div:nth-of-type(3) > *:first-child { left: 260px; }
.notebookB > div,
.notebookB > span:not(:nth-of-type(1)):target ~ div:nth-of-type(1) {
background-color: #ddd;
color: transparent;
z-index: 0;
transition: all 0.3s ease 0s, z-index 0s 0.3s;
}
.notebookB > span:nth-of-type(1):target ~ div:nth-of-type(1),
.notebookB > span:nth-of-type(2):target ~ div:nth-of-type(2),
.notebookB > span:nth-of-type(3):target ~ div:nth-of-type(3),
.notebookB > div:nth-of-type(1) {
background-color: #fff;
color: inherit;
z-index: 1;
transition: all 0.3s ease 0.3s, z-index 0s 0.3s;
}
Разберём, как это работает. Селекторы, выполняющие активацию вкладок для соответствуюещго якоря:
.notebookB > span:nth-of-type(1):target ~ div:nth-of-type(1) — первый div, расположенный после первого span, если этот span совпадет с якорем.
.notebookB > span:nth-of-type(2):target ~ div:nth-of-type(2) — второй div, расположенный после второго span, если этот span совпадет с якорем.
.notebookB > span:nth-of-type(3):target ~ div:nth-of-type(3) — третий div, расположенный после третьего span, если этот span совпадет с якорем.
.notebookB > div:nth-of-type(1) — этот селектор принудительно делает первую вкладку активной.
.notebookB > span:not(:nth-of-type(1)):target ~ div:nth-of-type(1) — а этот селектор еще более принудительно делает первую вкладку неактивной, если перед ней любой span, кроме первого, совпадает с якорем.
Результат:
Ну вот, страница перестала дёргаться. Этот код уже не стыдно использовать в вёрстке реальных сайтов, в отличие от первого примера.
Но подождите! Это еще не всё. На очереди у нас:
Вложенные вкладки
Вы еще здесь? Готов спорить, 95% взявшихся читать эту статью не дочитали до этого места. Я и сам уже устал писать эту бесконечную, огромную, нескончаемую статью. Но раз вы всё еще здесь, продолжим.
Допустим, вам нужно сделать три вкладки, и внутри второй и третьей вкладки сделать еще по две вкладки. В принципе, ничего сложного, если вы поняли, как работает предыдущий пример. Вам нужно лишь вручную дописать правила активации вкладок с использованием идентификаторов, вместо выборки по :nth-of-type.
Результат:
Исходный код примера:
<style>
#notebookX6-2,
#notebookX6-3 {
width: 500px;
height: 200px;
background-color: #ddd;
border: 1px solid #bbb
}
#tabX6-2-1:target ~ #real-tabX6-2,
#tabX6-2-1:target ~ #real-tabX6-2 #real-tabX6-2-1,
#tabX6-2-2:target ~ #real-tabX6-2,
#tabX6-2-2:target ~ #real-tabX6-2 #real-tabX6-2-2,
#tabX6-3-1:target ~ #real-tabX6-3,
#tabX6-3-1:target ~ #real-tabX6-3 #real-tabX6-3-1,
#tabX6-3-2:target ~ #real-tabX6-3,
#tabX6-3-2:target ~ #real-tabX6-3 #real-tabX6-3-2 {
background-color: #fff;
color: inherit;
z-index: 1;
transition: all 0.3s ease 0.3s, z-index 0s 0.3s;
}
#tabX6-2-2:target ~ #real-tabX6-2 #real-tabX6-2-1,
#tabX6-3-2:target ~ #real-tabX6-3 #real-tabX6-3-1 {
background-color: #ddd;
color: transparent;
z-index: 0;
transition: all 0.3s ease 0s, z-index 0s 0.3s;
}
</style>
<div style='background-color: #c0cfff; padding: 30px;'>
<div class='notebookB' id='notebookX6'>
<span id='tabX6-1'></span>
<span id='tabX6-2'></span>
<span id='tabX6-3'></span>
<span id='tabX6-2-1'></span>
<span id='tabX6-2-2'></span>
<span id='tabX6-3-1'></span>
<span id='tabX6-3-2'></span>
<div>
<h3><a href="#tabX6-1">Вкладка 1</a></h3>
<p>Содержимое первой вкладки</p>
<p>Бла бла бла...</p>
</div>
<div id='real-tabX6-2'>
<h3><a href="#tabX6-2">Вкладка 2</a></h3>
<p>Содержимое второй вкладки</p>
<div class='notebookB' id='notebookX6-2'>
<div id='real-tabX6-2-1'>
<h3><a href="#tabX6-2-1">Вкладка 2-1</a></h3>
<p>Бла бла бла...</p>
</div>
<div id='real-tabX6-2-2'>
<h3><a href="#tabX6-2-2">Вкладка 2-2</a></h3>
<p>Бла бла бла...</p>
<p>Бла бла бла...</p>
</div>
</div>
</div>
<div id='real-tabX6-3'>
<h3><a href="#tabX6-3">Вкладка 3</a></h3>
<p>Содержимое третьей вкладки</p>
<div class='notebookB' id='notebookX6-3'>
<div id='real-tabX6-3-1'>
<h3><a href="#tabX6-3-1">Вкладка 3-1</a></h3>
<p>Бла бла бла...</p>
</div>
<div id='real-tabX6-3-2'>
<h3><a href="#tabX6-3-2">Вкладка 3-2</a></h3>
<p>Бла бла бла...</p>
<p>Бла бла бла...</p>
</div>
</div>
</div>
</div>
</div>
На этом на сегодня всё. :-)
1 комментарий
Не работает на локалке под Денвером.. обновляет страницу, не ходит по табам.. занимаюсь отладкой просто.. )) есть вариант решения проблемы? Спасибо..
Отправить комментарий