» »

Создать блок на вкладки 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 - но вообще что хотел донести, что ставим не только как на изображение и функций, а на сайте где вам нужно. И содержание может быть разным, что по установке в любом месте даже в материале, и название вы сами напишете по теме.
05.11.2016 Просмотров: 458 Комментарий: (5)

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

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

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