Приветствую вас на своём блоге. Нехватка места на боковой панели частая проблема для многих. Сегодня сделаем функциональный виджет вкладок (табов) 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 { /* корпус */
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 в нужное место блога.
И сегодня у меня всё. Приятных всем выходных. Всех женщин с наступающим праздником. Цветов всем, любви, здоровья и просто женского счастья.

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

оформите подписку на новые шпаргалки
Вика привет. Спасибо за работу. Компактный и функциональный виджет, для многих думаю будет полезен. И в установке нет ничего сложного, особенно для новичков. Ждем еще новаторских предложений для наших блогов.
ОтветитьУдалитьПривет, Оля. Да недавно просмотрела видео о реализации такого на WP вот по аналогии получилось и для Блоггер. он правда здорово экономит место. К тому же на некоторых блогах такое видела вот и загорелось. Спасибо .
ОтветитьУдалитьПривет, Вика! Полезный виджет и подробная подсказка. Спасибо за поздравление! И я тебе желаю быть и всегда оставаться той самой Феей, которая вдохновляет других, вдохновляется своей Жизнью и любимым делом!
ОтветитьУдалитьИринка, привет. С праздником тебя тоже. Сколько лет, сколько зим. Как дела у тебя. Напиши хоть на почту чем занимаешься. Спасибо за поздравления и что не забываешь.
ОтветитьУдалить