Блок с вкладками из ссылок на CSS

Зерна заварного кофе в кофемолке Захотелось мне сделать из обычных ссылок блок с вкладками только при помощи CSS и конечно поделится готовой конструкцией и тем, как можно это реализовать на сайте или в блоге.
  Раньше, я уже публиковал статью с вариантом реализации блока с вкладками при помощи jQuery,но на этот раз обойдемся без скриптов :). А это значит что переключение между вкладками с контентом, выделение текущей вкладки и кнопки, все это будет происходить исключительно при помощи CSS, а функций CSS3 добавят плавные переходы и появление блоков.
  Но этот вариант самый простой, поэтому его функционал немного ограничен, но об этом позже.
 Для "затравки" смотрим готовый результат:
DEMO
  Не будем ходить вокруг, да около, начну сразу со структуры. В данном примере, и кнопка и сама вкладка с контентом являются одним целым - ссылкой, то есть во внутри ссылки вложено все остальное - текст, изображение, дополнительные теги оформления, а расположение всего этого задается через CSS.
 Внутри таких вкладок возможно размещать текст и картинки - строчные элементы.
Ссылки размещать нельзя. Также не желательно размещать блочные элементы.

  Вот HTML код блока с вкладками, который размещен в DEMO, думаю так будет понятнее что к чему.
<div class='my-tabs'>
   <a tabindex='1'>Вкладка 1
    <span class='my content-1'>
      <em>
        <img src="http://*.jpeg" />
          CONTENT 1
          <br>
          <br>
           <b>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</b>
          <br>
          <br>
          <br>
           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</em>
    </span>
   </a>
   <a tabindex='2'>Вкладка 2
    <span class='my content-2'>
      <em>CONTENT 2
       <br>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</em>
    </span>
   </a>
   <a tabindex='3'>Вкладка 3
    <span class='my content-3'>
      <em>;CONTENT 3</em>
    </span>
   </a>
   <a tabindex='4'>Вкладка 4
    <span class='my content-4'>CONTENT 4<br>
      <i>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</i>
    </span>
   </a>
   <a tabindex='5'>Вкладка 5
    <span class='my content-5'>CONTENT 5<br>
      <u>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</u>
    </span>
   </a>
  <br clear="all">
  <span class='prev'>Кликай на вкладку - получай информацию!</span>
</div>
  Как видно из кода и о чем я уже упомянул выше, что при оформлении текста внутри вкладок используются строчные теги, такие как: <em>, <b>, <i>, <u>, но можно использовать и другие, например, <strong> и другие, причем все они могут участвовать в дополнительном оформлении блоков в коде CSS как это делает тег <em> в данном примере, это видно в примере стиля ниже.
Атрибут tabindex='1' - обязателен, он отвечает за переключение вкладок. В данном случае его значения лучше указать по-порядку, если на странице уже есть блоки с указанным tabindex, то значения лучше указать отличные от указанных ранее.
Пример CSS для блока с вкладками:
/*Весь блок*/
.my-tabs {
  display: block;
  position: relative; /*позиционируем блок*/
  background: #999;
  height: 400px; /*высота всего блока - только в px*/
  width: 500px; /*ширина*/
  padding: 0;
  margin: 0;
}
/*Оформление и действие ссылок-кнопок*/
.my-tabs > a {
  display: inline-block; /*можно указать "inline" , но не "block"*/
  background: #96f;
  border: outset 1px #93f;
  border-radius: 5px;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  padding: 10px;
  margin: 5px 0 0 0;
  height: 20px;
 /*функции анимации, будут анимированы - нижняя часть рамки, фон, цвет текста*/
  -webkit-transition: border-bottom 0.4s ease, background 0.4s ease, color 0.4s ease;
  -moz-transition: border-bottom 0.4s ease, background 0.4s ease, color 0.4s ease;
  -o-transition: border-bottom 0.4s ease, background 0.4s ease, color 0.4s ease;
  transition: border-bottom 0.4s ease, background 0.4s ease, color 0.4s ease;
}
.my-tabs > a:first-child,
.my-tabs > a:first-child:focus {
  margin-left: 5px;
}
.my-tabs > a:hover {
  background: #99f;
  border: inset 1px #B8B8FF;
}
.my-tabs > a:focus {
  background: #c9f;
  border: solid 1px #666;
  border-bottom: solid 5px transparent;
  border-radius: 5px 5px 0 0;
  color: #000;
  margin: 5px 0 0 0;
  outline:none;
}
/*Стили всех вкладок*/
.my-tabs > a > span.my {
  display: block;
  visibility: hidden; /*скрываем блоки, но оставляем за ними жилплощадь*/
  position: absolute; /*обязательно позиционируем абсолютно*/
  left: 0;
  color: transparent;
  font: normal 500 14px Trebuchet MS;
  text-align:left;
  text-decoration: none;
  cursor:default;
  padding: 10px;
  height: 300px;
  overflow-y: auto;
  margin-top: 15px;
  width: 478px; /*ширина вкладок, ширина блока - отступы и толщина рамки лево, право*/
/*функции анимации будут анимированы - фон и цвет текста во вкладке*/
  -webkit-transition: background 1s ease, color 1s ease;
  -moz-transition: background 1s ease, color 1s ease;
  -o-transition: background 1s ease, color 1s ease;
  transition: background 1s ease, color 1s ease;
}
/*Стили вкладки при получении ссылкой фокуса,
всем ссылкам соответствуют расположенные внутри них блоки(вкладки)*/

.my-tabs > a[tabindex='1']:focus > .content-1,
.my-tabs > a[tabindex='2']:focus > .content-2,
.my-tabs > a[tabindex='3']:focus > .content-3,
.my-tabs > a[tabindex='4']:focus > .content-4,
.my-tabs > a[tabindex='5']:focus > .content-5 {
  visibility: visible;
  background: #c9f;
  border: outset 1px #96f;
  border-top: 0;
  color: #000;
  $height: 300px;
}
/*Стили для размещенных во вкладках изображений
и дополнительное выделение текста вкладки*/

.my-tabs > a > .my > img,
.my-tabs > a > .my > em {
  visibility: hidden;
  display: inline-block;
  padding: 5px 10px 5px 0;
  -webkit-transition: opacity 1s ease;
  -moz-transition: opacity 1s ease;
  -o-transition: opacity 1s ease;
  transition: opacity 1s ease;
  opacity: 0;
}
.my-tabs > a > .my > img,
.my-tabs > a > .my > em > img {
  padding: 5px 10px 5px 0;
  float: left;
}
.my-tabs > a > .my > em {
  background: #fff;
  font: normal 500 14px Verdana;
  padding: 10px;
  margin: 0;
  width: auto;
}
.my-tabs > a:focus > .my > img,
.my-tabs > a:focus > .my > em {
  visibility: visible;
  opacity: 1;
}
/*Стиль для превью - вкладки НЕ активны*/
.my-tabs > .prev {
  display: block;
  background: #ccf;
  background: -moz-radial-gradient(center, ellipse cover, #ccccff 0%, #9966ff 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ccccff), color-stop(100%,#9966ff));
  background: -webkit-radial-gradient(center, ellipse cover, #ccccff 0%,#9966ff 100%);
  background: -o-radial-gradient(center, ellipse cover, #ccccff 0%,#9966ff 100%);
  background: -ms-radial-gradient(center, ellipse cover, #ccccff 0%,#9966ff 100%);
  background: radial-gradient(ellipse at center, #ccccff 0%,#9966ff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccccff', endColorstr='#9966ff',GradientType=1 );
  font: normal 500 16px Trebuchet MS;
  text-align:center;
  padding: 20px 0;
  margin: 20px 0 0 0;
  width: 100%;
}
/*При получения любой из вкладок фокуса скрываем превью*/
.my-tabs > a:focus~.prev {
  display:none;
}
  Весь функционал осуществляется при помощи псевдокласса :focus за анимацию отвечает transition.
  Вот и все, блок с вкладками готов. Может показаться что CSS слишком большой, но самого кода для функционала немного, больше для данного оформления, если оформление делать проще, то естественно и кода будет меньше. Но я специально оставил стиль такой же как и в ДЕМО чтобы было проще понять и поэкспериментировать.

 Теперь что касается работы в различных браузерах, то о чем я упоминал в начале статьи.
  В Opera и Chrome(тестил в последних) - все работает как задумано: клик по кнопке - переход на соответствующую вкладку; клик во вкладке - вкладка на месте, вне вкладки (потеря фокуса) - все вкладки скрыты.
  В FireFox и IE(начиная с 8-го) - клик во вкладке также приводит к потере фокуса.
  Но если в IE дело глухо, то есть так и будет, то FireFox можно побороться. Для этого необходимо точно указать ссылкам относительное позиционирование:
  position: relative;
 И в этом случаи нужно будет "подтянуть" каждый блок вкладки к левому краю всего блока - сместить вкладку на расстояние равное расстоянию от левого края всего блока до начала кнопки для данной вкладки, по средствам свойства margin-left с отрицательным значением. Но думаю что для простого текста это не столь важный момент.

В общем такая вот получилась приблуда :)

©http://magentawave.com

16 комментариев:

  1. Саша,здравствуйте!
    У меня к вам вопрос следующего плана....Вы неоднократно были у меня в блоге и,наверное,заметили,что у меня очень много фотографий.Мой блог я отношу к "визуальным",т.к. писатель из меня никакой....:)
    Научите меня,как мне защитить свои фотографии от массового копирования?
    Видела на нескольких сайтах,что как только подводишь курсор к фотографии,сразу всплывает окошко с надписью"спросите разрешение"...Короче,фото скопировать нельзя.Вот,думаю,мне пора серьезно этим заняться,так как фотографии мои стали копировать всё чаще и чаще,а мне не всегда это нравится.
    Спасибо!

    ОтветитьУдалить
    Ответы
    1. Здравствуйте Алла, варианта решения этой проблемы может быть несколько:
      1. При помощи JavaScript, что конечно выгоднее с точки зрения затраты трудочасов при внедрении.
      2. Самостоятельно кроить код каждой фотографии в посте, что уже не так приятно.

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

      Но тем не подумать об этом можно, как о первой линии обороны от не совсем еще продвинутых воришек.

      Удалить
  2. Адександр, с Вашей помощью мне удалось-таки установить блок с вкладками. Будет желание и время, посмотрите http://olgaview.blogspot.com/p/blog-page_28.html
    С уважением. Ольга

    ОтветитьУдалить
    Ответы
    1. Ольга, заглядывал к вам все у вас очень красиво получилось, рад что пригодилась моя "приблуда" :)

      Удалить
  3. Александр, на боковой панели своего блога я разместила активную ссылку на ваш сайт, прокомментировав его название (в помощь блогерам). Вы не возражаете против такой аннотации?

    ОтветитьУдалить
    Ответы
    1. Спасибо Ольга, мне это очень приятно, однако, вряд ли я гожусь под это понятие, есть немного инфы, но есть сайты и куда с более объемной информацией, хотя возможно кто-то и найдет чего-нибудь для себя. На счет аннотации, тут уж как вам бог на душу положит :) За ссылку еще раз спасибо, приятно.

      Удалить
  4. Добрый день. Спасибо за шаблон. Очен здорово все описано. Единственное два вопроса:
    1 как сделать, чтобы сразу же высвечивалось содержимое первой вкладки без убрать приветствия типа: "Кликни, получишь информацию"?

    2 как добавить возможность прокрутки в активной вкладке при превышении количества символов над лимитом высоты вкладки?

    ОтветитьУдалить
    Ответы
    1. 1. В CSS уже добавлена полоса прокрутки прокрутка, она будет добавлена автоматически.
      2. Уберите из HTML этот самый блок превью и CSS для него, а у первой ссылки один класс - my , и добавьте (чтобы долго не парится) этот стиль:
      .my-tabs > a > .content-1 {
      display: block;
      visibility: visible;
      position:absolute;
      left: 0;
      background: #c9f;
      background: -moz-linear-gradient(top, #cc99ff 0%, #9966ff 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc99ff), color-stop(100%,#9966ff));
      background: -webkit-linear-gradient(top, #cc99ff 0%,#9966ff 100%);
      background: -o-linear-gradient(top, #cc99ff 0%,#9966ff 100%);
      background: -ms-linear-gradient(top, #cc99ff 0%,#9966ff 100%);
      background: linear-gradient(to bottom, #cc99ff 0%,#9966ff 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc99ff', endColorstr='#9966ff',GradientType=0 );
      color: #000;
      font: normal 500 14px Trebuchet MS;
      text-align:left;
      text-decoration: none;
      cursor:default;
      padding: 10px;
      height: 300px;
      overflow-y: auto;
      margin-top: 15px;
      width: 480px;
      }

      .my-tabs > a > .content-1 > em,
      .my-tabs > a > .content-1 > img {
      display: inline-block;
      visibility: visible;
      opacity: 1;
      }
      .my-tabs > a > .content-1 > em {
      background: #fff;
      font: normal 500 14px Verdana;
      padding: 10px;
      margin: 0;
      width: auto;
      }
      .my-tabs > a > .content-1 > img,
      .my-tabs > a > .content-1 > em > img {
      padding: 5px 10px 5px 0;
      float: left;
      }

      Должно помочь. Удачи

      Удалить
    2. Александр, спасибо за оперативную помощь, но сделайте скидку на абсолютное мое дилетантство в программировании. Можно поточнее расписать, куда вставлять в CSS вышеприведенный стиль?
      Спасибо

      Удалить
    3. Добавьте его к основному стилю из статьи.

      Удалить
    4. О! Спасибо!

      Удалить
  5. Как убрать чтобы вкладка оставалась открытой когда кликаешь не в блоке?

    ОтветитьУдалить
    Ответы
    1. В данном варианте никак. Используйте вариант на JS или jQuery, например
      http://www.magentawave.com/2012/04/dynamic-pages-on-blogger.html

      Удалить
  6. спасибо, автор молодец

    ОтветитьУдалить
  7. Добрый день! А как все-таки можно сделать вставку ссылкой ? Нужно во вкладке разместить таблицу с кнопкой-ссылкой

    ОтветитьУдалить
  8. Добрый день! А как все-таки можно вставить ссылки?
    На вкладке необходимо разместить таблицу с кнопкой-ссылкой. Только вот проблема-при клике на кнопку не переходит на нужную страницу.

    ОтветитьУдалить

Следующее Предыдущее

BestProject