Компактный виджет вкладок 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