ZorNet.Ru — сайт для вебмастера » HTML и CSS » Создать блок на вкладки CSS3 для сайта

Создать блок на вкладки CSS3 для сайта

Создать блок на вкладки CSS3 для сайта
Думаю многие наблюдали на сайте несколько вариаций на комментарий. И они делаются на вкладках, или еще называют их табы, которые под материал. Здесь мы разберем один, а точнее будем делать еще один комментарий или описание, которое будет находиться как раз в этой вкладке. Если форму комментарий, то просто ставим скрипт на его, а берем на социальном ресурсе, где представляют их. Это как в контакте или Facebook, можно поставить оба, и у вас будет 3 ответа. И здесь может простой гость написать не проходить регистрацию. Но также иногда хочется написать несколько статей, и если они связаны, то раскидать на несколько частей. Здесь вы ставите эти вкладки, и потом уже в них и прописываем.

Что главное заметил, вы включили вторую, как пример и страницу перегрузили, то она останется так как и была. Есть очень много таких скриптов, но этот больше всех понравился, так как он прост от остальных. Можете кнопки изменить, просто сделал их темными и закруглил. Вы если понимаете, то вообще под стили поставить и будут совершенно другие стоять по своей стилистике. А так по умолчанию, просто изменить оттенок цвета и по всем сторонам поменять. Все проверил на тестовом сайте, и по гамме будет так как представлено.

Здесь видим, как на этом коде сделаны комментарий, но уже на светлой гамме цвета.

Вкладки работающий на CSS3

Но и сам небольшой код:

Код
<style>  
#tab1, #tab2, #tab3 {  
display:none;  
  position:fixed;  
}  
.menu1 > a,  
.menu1 #tab2:target ~ a:nth-of-type(1),  
.menu1 #tab3:target ~ a:nth-of-type(1) {  
background: #4A4646;  
padding: 5px;  
border: 1px solid #05052B;  
line-height: 28px; border-radius: 5px;color: #FFFFFF;}  
.menu1 > a:nth-of-type(1),  
.menu1 #tab2:target ~ a:nth-of-type(2),  
.menu1 #tab3:target ~ a:nth-of-type(3) {  
border-bottom: #fff;  
}  
.menu1 > a:hover {  
text-decoration: none;  
  }  
.menu1 > div,  
.menu1 #tab2:target ~ div:nth-of-type(1),  
.menu1 #tab3:target ~ div:nth-of-type(1) {  
display: none;  
padding: 5px;  
border: 1px solid #e1e1e1;  
border-top: #fff;  
background: #fff;  
}  
.menu1 > div:nth-of-type(1),  
.menu1 #tab2:target ~ div:nth-of-type(2),  
.menu1 #tab3:target ~ div:nth-of-type(3) {  
display: block;  
  }  
</style>  
<div class="menu1">  
<br id="tab2"/><br id="tab3"/>  
<a href="#tab1">Заголовок вкладки №1</a>  
<a href="#tab2">Заголовок вкладки №3</a>  
<a href="#tab3">Заголовок вкладки №3</a>  
<div>вкладка 1</div>  
<div><b>Вкладками работающий на CSS3 - что можете ставить, что вам нужно, да, сюда.)</b></div>  
<div>вкладка 3</div>  
</div>


PS - но вообще что хотел донести, что ставим не только как на изображение и функций, а на сайте где вам нужно. И содержание может быть разным, что по установке в любом месте даже в материале, и название вы сами напишете по теме.
2016-11-05 Просмотров: 1696 Комментарий: (5)

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

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

Оставь свой отзыв

Комментарий: 5
tsakonter
tsakonter 2016-11-05 03:571
0
Можно кнопки поставить, так же стили прописаны, только найти хорошие, это по блокам нужно ходить.
Kosten
Kosten 2016-11-05 18:244
0
Они и на сайтах стоят, если можно поставит, админы устанавливают.
Сафрон
Сафрон 2016-11-05 04:022
0
Видел пару раз, что не под форму делали, основном под комментарий. И это хорошо, что форма будет оставаться та, которую ты оставил, а не с начало с первой открываться.
Kosten
Kosten 2016-11-05 04:093
0
Как то ставил комментарий, но там по умолчанию стоял от сайта. Но здесь видно на втором изображение, что написано "На сайте" что при клике, форма своя появится.
ucozmental
ucozmental 2016-11-05 23:255
0
Но а что же, скажу вам, раньше искал эти табы, и всегда находил мудреные какие то. Здесь все отлично работает и понятно.
avatar