Как сделать табы на чистом CSS

Я уже достаточно давно занимаюсь разработкой сайтов и очень много раз встречал так называемые “табы” на чистом JavaScript или jQuery и ни разу не видел на голом CSS. Как оказывается и такое бывает.

Возможно, они не такие красивые, так как нет дополнительных эффектов переключения, как это сделано в том же jQuery.tools, но они, черт подери, ничего не весят для вашего посетителя. Для всех информационных сайтов или для мобильных интерфейсов – это самое оно.

Сразу, чтобы затравить душу, пример:

Пример

Реализовано все предельно просто. HTML-код выглядит так:

<ul class="tabs">
  <li><a href="#frame1">1</a></li>
  <li><a href="#frame2">2</a></li>
  <li><a href="#frame3">3</a></li>
  <li><a href="#frame4">4</a></li>
  <li><a href="#frame5">5</a></li>
</ul>
<div class="tabs-content">
  <section id="frame1">1</section>
  <section id="frame2">2</section>
  <section id="frame3">3</section>
  <section id="frame4">4</section>
  <section id="frame5">5</section>
</div>

CSS-код:

<style>
.tabs {
  font-size: 0.75em;
  line-height: 30px;
  list-style: none;
  overflow: hidden;
  height: 30px;
}
.tabs li {
  float: left;
}
.tabs a {
  float: left;
  background: #eee;
  padding: 0 15px;
  text-decoration: none;
  height: 30px;
}
.tabs a:hover {
  background: #ddd;
}
.tabs-content {
  width: 100%;
  height: 300px;
  overflow: hidden;
  text-align: center;
  line-height: 300px;
  font-size: 6em;
}
.tabs-content section {
  width: 960px;
  height: 300px;
}
.tabs-content #frame1   { background: red; }
.tabs-content #frame2   { background: blue; }
.tabs-content #frame3 { background: aqua; }
.tabs-content #frame4  { background: green; }
.tabs-content #frame5  { background: yellow; }
</style>

На мой взгляд, это очень крутое решение, которое позволит без особых проблем придать сайту некоторую динамичность не прибегая к дополнительному JS-коду. Возможно, такая реализация не подойдет для оформления главной навигации, но для использования в информационной части сайта такое решение подойдет как нельзя кстати.

Этот способ позволяет за минимальные затраты на производительность получить эффект динамики на сайта.

Просто и красиво!

P.S. Описанный способ практически не использует дополнительных ресурсов ни серверных, ни пользовательских. Но не смотря на это стоит уделить особое внимание хостингу. Лучше под коммерческий проект взять сразу свой VDS-сервер. Если на хостинг серверов VDS поставить нетребовательный к ресурсам сайт, мы получим офигительный эффект моментального открытия вашего сайта. Любой, даже самый требовательный, посетитель это несомненно оценит. Поэтому не стоит экономить на хостинге.

Комментарии:

  1. дядя Миша опубликовал комментарий 9 Октябрь 2013, 07:30 #

    гениально!

    | Ответить
Имя
e-mail
Сайт
Текст комментария: