Компактный виджет вкладок CSS.


табы
Приветствую вас на своём блоге. Нехватка места на боковой панели частая проблема для  многих. Сегодня сделаем функциональный виджет вкладок (табов) CSS

 При наведении курсора вкладки меняются с отображением содержимого в ней.  Так  можно разместить любую информацию и в достаточно компактном виде.




Долго расписывать удобства такой конструкции не буду. Предлагаю сразу посмотреть о чём идёт речь. Вот что мы получим в итоге. Рабочий вариант здесь.

вкладки (табы)

Для реализации предлагаю скопировать код, приведённый ниже . И разберёмся немного в настройках.

<style>
#raz { /* корпус */
  position: relative;
  height: 150px;

  background: #FFFFFF ;
}

/  это сама вкладка /
#raz > div {
  position: absolute;
  z-index: 1;
  height: 100%;
  width: 100%;
  visibility: collapse;
  transition: 0s 9999999s;
  box-sizing: border-box;
 background: #CCCCCC ; /фон вкладки/
  padding: 5px;
}
 /* рамка вкладки */
#raz > div:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
 border: #993333 solid 2px; /цвет и размер/
 border-radius: 5px;
}
#raz > div:hover, #raz > div:nth-of-type(1) {
  visibility: visible;
  transition: 0s;
}
#raz:hover > div:not(:hover) {
  visibility: hidden;
  transition: 0s;
}

/* кнопка */
#raz > div > span {
background: #CCCCFF; /цвет кнопки/
  position: absolute;
  top: -30px;
  line-height: 30px;
  height: 30px;
  width: 25%; /* 4 вкладки, а значит 100/4 */
  text-align: center;bold;
  box-sizing: border-box;
border: #993333 solid 2px; / размер и цвет рамки/
  border-left-color: rgba(0,0,0,0);
  visibility: visible;
  transition: 0s 9999999s;
  cursor: pointer;
}
#raz > div:nth-of-type(1) > span {left: 0; border-left-color: rgb(128,128,128);}
#raz > div:nth-of-type(2) > span {left: 25%;}
#raz > div:nth-of-type(3) > span {left: 50%;}
#raz > div:nth-of-type(4) > span {left: 75%;}
#raz > div:hover > span, #raz > div:nth-of-type(1) > span {
  border-bottom-color: rgba(0,0,0,0);
  transition:  0s;
}
#raz:hover > div:not(:hover) > span {
  border-bottom-color: rgba(128,128,128,.99);
  transition:  0s;
}
#raz > div:not(:nth-of-type(1)):not(:hover):after {
  content: "";
  left: 0;
  position: absolute;
  top: -1px;
  width:25%;
  border-top: 1px solid rgb(128,128,128);
}
</style>

<div id="raz">
  <div><span>Название вкладки 1</span>Содержимое вкладки(текст, код, ссылка)
</div>
  <div><span>Название вкладки 2</span>Содержимое вкладки(текст, код, ссылка)</div>
  <div><span>Название вкладки 3</span>Содержимое вкладки(текст, код, ссылка)</div>
  <div><span>Название вкладки 4</span></div>Содержимое вкладки(текст, код, ссылка)
</div></div>


В коде есть небольшие пояснения. Когда сделаете свои настройки, текст, заключённый в / тут текст / можно убрать. Но и в таком виде код будет работать корректно.
При добавлении ещё вкладок нужно в фрагменте, который выделен синим цветом добавить вот такую строку

#raz > div:nth-of-type(5) > span {left: 100%;}. 

Так можно добавлять ещё несколько табов. Или убирать соответственно.
И в блоке, который выделен зелёным цветов, добавить следующую строку.

 <div><span>Название вкладки 5</span></div>Содержимое вкладки(текст, код, ссылка)
</div>

Устанавливаем код в гаджет HTML/JavaScript в нужное место блога.

И сегодня у меня всё. Приятных всем выходных. Всех женщин с наступающим праздником. Цветов всем, любви, здоровья и просто женского счастья.


Ой, а что это там ниже? Ну надо же! Нажимаем!

оформите подписку на новые шпаргалки

Введите Ваш email


4 комментария:

  1. Вика привет. Спасибо за работу. Компактный и функциональный виджет, для многих думаю будет полезен. И в установке нет ничего сложного, особенно для новичков. Ждем еще новаторских предложений для наших блогов.

    ОтветитьУдалить
  2. Привет, Оля. Да недавно просмотрела видео о реализации такого на WP вот по аналогии получилось и для Блоггер. он правда здорово экономит место. К тому же на некоторых блогах такое видела вот и загорелось. Спасибо .

    ОтветитьУдалить
  3. Привет, Вика! Полезный виджет и подробная подсказка. Спасибо за поздравление! И я тебе желаю быть и всегда оставаться той самой Феей, которая вдохновляет других, вдохновляется своей Жизнью и любимым делом!

    ОтветитьУдалить
  4. Иринка, привет. С праздником тебя тоже. Сколько лет, сколько зим. Как дела у тебя. Напиши хоть на почту чем занимаешься. Спасибо за поздравления и что не забываешь.

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

Пользовательский поиск
Foto Saya
My Photo