Нужен ли нам еще один элемент управления вкладками? Вероятно, нет, но этот пример демонстрирует мощь селектора CSS3: target . Мы собираемся создать привлекательный анимированный элемент управления вкладками с использованием HTML5 и CSS3. Вам не понадобится JavaScript или изображения, и он работает в IE9, Chrome, Firefox, Safari и Opera.
Важные особенности
Вы найдете много CSS3-элементов управления вкладками по всей сети. Однако у многих есть такие проблемы, как:
- не отображать содержимое вкладки, если вы ссылаетесь на страницу без селектора хеша, т.е. вы ссылаетесь на mypage.html, а не на mypage.html # tab1.
- не выделяет активную вкладку.
Это решение преодолевает эти проблемы — посмотрите демонстрационную страницу …
А как насчет IE6, 7 и 8?
Вы ожидали, что современные CSS3-эффекты будут работать в браузере, выпущенном в 2001 году? IE7 и 8 покажут только первую вкладку. IE6 показывает последнюю вкладку, хотя было бы легко установить ее на первую.
Поэтому у вас есть два варианта:
- Не предлагайте поддержку устаревшего браузера. Пользователи IE не будут знать, что им что-то не хватает, поэтому, если контент не важен для вашей страницы, вы можете игнорировать их.
- Но это не приятно. Самое быстрое решение заключается в добавлении селективной прокладки. Кроме того, можно прибегнуть к лучшему прогрессивно улучшенному решению и забыть об этой бессмысленной чепухе с CSS3.
HTML
Вот наш основной код HTML5. Вкладка содержимого содержится в section . Сама вкладка является первым дочерним элементом и определяется как элемент h2 с внутренней ссылкой на внешний section :
<article class="tabs"> <section id="tab1"> <h2><a href="#tab1">Tab 1</a></h2> <p>This content appears on tab 1.</p> </section> <section id="tab2"> <h2><a href="#tab2">Tab 2</a></h2> <p>This content appears on tab 2.</p> </section> <section id="tab3"> <h2><a href="#tab3">Tab 3</a></h2> <p>This content appears on tab 3.</p> </section> </article>
Это отличается от кода вкладки HTML, который вы видели раньше. Большинство элементов управления определяют вкладки в виде списка ul за которым следует каждый раздел содержимого. Хотя можно использовать аналогичную разметку, это значительно затрудняет выделение вкладок, поскольку сама вкладка не может быть стилизована с помощью :target . Лучшее решение, которое я нашел, — добавить псевдоэлемент в section который был соответствующим образом окрашен и расположен под текстом вкладки. Это быстро стало запутанным беспорядком.
CSS
Во-первых, мы будем article контейнер article . Он имеет размер и его положение установлено относительно, поэтому мы можем расположить секции:
article.tabs { position: relative; display: block; width: 40em; height: 15em; margin: 2em auto; }
Далее следуют разделы. Они все абсолютно расположены на 1,8 м сверху, чтобы освободить место для вкладок. box-shadow довольно легкая, потому что каждый раздел сложен один на другой:
article.tabs section { position: absolute; display: block; top: 1.8em; left: 0; height: 12em; padding: 10px 20px; background-color: #ddd; border-radius: 5px; box-shadow: 0 3px 3px rgba(0,0,0,0.1); z-index: 0; }
Поскольку последняя вкладка будет показана сверху, мы переключим ее на первую вкладку, установив более высокий z-индекс:
article.tabs section:first-child { z-index: 1; }
Теперь мы можем стилизовать вкладки. Они окрашены в их «выключенном» состоянии и расположены выше, чем наши разделы. Левое положение второй и третьей вкладок регулируется, чтобы они не перекрывали друг друга.
article.tabs section h2 { position: absolute; font-size: 1em; font-weight: normal; width: 120px; height: 1.8em; top: -1.8em; left: 10px; padding: 0; margin: 0; color: #999; background-color: #ddd; border-radius: 5px 5px 0 0; } article.tabs section:nth-child(2) h2 { left: 132px; } article.tabs section:nth-child(3) h2 { left: 254px; } article.tabs section h2 a { display: block; width: 100%; line-height: 1.8em; text-align: center; text-decoration: none; color: inherit; outline: 0 none; }
Все наши вкладки и разделы теперь определены, и вкладка 1 отображается по умолчанию, даже если ни один из разделов не предназначен для URL-адреса. Теперь мы можем изменить цвет, цвет фона и z-индекс активного раздела, используя селектор: target:
article.tabs section:target, article.tabs section:target h2 { color: #333; background-color: #fff; z-index: 2; }
В качестве бонуса добавим эффект перехода при смене целевой вкладки:
article.tabs section, article.tabs section h2 { -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; }
Посмотреть демонстрационную страницу …
В отличие от многих JavaScript-решений, наш CSS3-виджет сохраняет полную историю просмотров вкладок, поэтому кнопки «Назад» и «Далее» браузера работают правильно. Также можно напрямую связываться с вкладкой из любой точки страницы, как показано ссылками «СЛЕДУЮЩАЯ».
Это не идеально; когда вы изначально ссылаетесь на страницу, первая вкладка активна, но отображается в выключенном состоянии. Трудно преодолеть эту проблему … если вы не можете придумать решение? Самый простой способ — сделать различия между состояниями «включено» и «выключено» чуть более тонкими.
Это не заканчивается там, либо. Поскольку мы используем CSS, мы можем преобразовать элемент управления tab в другие виджеты, не изменяя разметку HTML. Оставайтесь с нами на SitePoint …
Если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, таким как Learn CSS3 .
Комментарии к этой статье закрыты. У вас есть вопрос о CSS3? Почему бы не спросить об этом на наших форумах ?