» »

Переключатель вкладок на CSS для сайта

Переключатель вкладок на CSS для сайта

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

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

Вот добавлен стиль, который закругляет углы, чтоб поняли, вы можете сделать в стилистике больше.

Красивые табы, вкладки на чистых стилях

Приступаем к установке:

Ставим в ответ или там где вам нужно для информации.

Код
<div id="raz">
  <div><span>CSS</span>ZORNET.RU HTML #1</div>
  <div><span>ZORNET.RU HTML #2</span><center> <img border="0" align="absmiddle" src="http://image.prntscr.com/image/f786a5b9763448b4942ed5f39fd5f220.png">
<br>
Здесь может всякое по тематике написано, так как можно переключить или установить то что вам нужно для функциональности портала.</center> </div>
  <div><span>Дополнительно</span>ZORNET.RU HTML #3</div>
</div>


CSS:

Код
#raz { /* корпус */  
  position: relative;
  height: 250px;
  border-top: 30px solid #fff;
}
#raz > div { /* вкладка */  
  position: absolute;
  z-index: 1;
  height: 100%;
  width: 100%;
  visibility: collapse;
  transition: 0s 9999999s;
  box-sizing: border-box;
  background: #fff;
  padding: 5px;
}
#raz > div:before { /* рамка вкладки */  
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: #808080 solid 1px;
  border-top: none;
}
#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 { /* кнопка */  
  position: absolute;
  top: -30px;
  line-height: 30px;
  height: 30px;
  width: 33.33%; /* 4 вкладки, а значит 100/4 */  
  text-align: center;
  box-sizing: border-box;
  border: 1px solid rgb(128,128,128);
  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: 33.33%;}
#raz > div:nth-of-type(3) > span {left: 66.66%;}
#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: 33.33%;
  border-top: 1px solid rgb(128,128,128);
}

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

Автор: NMitra
25.04.2017 Просмотров: 646 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Комментарий: 5
Марковичь
Марковичь 26.04.2017 00:151
0
Это оригинально, но большинство предпочитают по клику раскрытие, а так имеет смысл установить, только отличие от других.
Maryges
Maryges 26.04.2017 00:373
0
но клик привычнее, но если здесь можно навести и остается, то это нормально, если бы закрывалась складка, то не чего бы не стоила.
Сопрано
Сопрано 26.04.2017 00:342
0
Почему то на комментариях их только вижу а на других позициях, где можно применить не замечал.
Kolinkor
Kolinkor 26.04.2017 01:274
0
А, что в дизайн можно сделать, это только поменять цвет, но подключить шрифтовые иконки, но и все, а да, закруглить углы.
Kosten
Kosten 26.04.2017 01:475
0
А что это мало, можно гамму цвета поменять и уже будет большое изменение, также тени добавить, но здесь они реально лишнее, делать простую и рабочею нужно.
avatar