» »

Вкладки или табы для uCoz на CSS


Вкладки или табы для uCoz на CSS

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

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

Установка:

Копируем код вкладок и ставим где вам нужно:

Код
<div class="menu1">  
<br id="tab2"/><br id="tab3"/><br id="tab4"/><br id="tab5"/><br id="tab6"/>  
<a href="#tab1"><b>Вкладка 1</b></a><a href="#tab2"><b>Вкладка 2</b></a><a href="#tab3"><b>Вкладка 3</b></a><a href="#tab4"><b>Вкладка 4</b></a><a href="#tab5"><b>Вкладка 5</b></a><a href="#tab6"><b>Вкладка 6</b></a>  

<div>ZORNET/RU - Сайт про uCoz 1</div>  
<div>Содержимое вкладки 2</div>  
<div>Содержимое вкладки 3</div>  
<div>Содержимое вкладки 4</div>  
<div>Содержимое вкладки 5</div>  
<div>Содержимое вкладки 6</div>  
</div>


CSS:

Код
<style type="text/css">  
#tab1, #tab2, #tab3, #tab4, #tab5, #tab6 {display:none; position:fixed;}  

.menu1 > a,  
.menu1 #tab2:target ~ a:nth-of-type(1),  
.menu1 #tab3:target ~ a:nth-of-type(1),  
.menu1 #tab4:target ~ a:nth-of-type(1),  
.menu1 #tab5:target ~ a:nth-of-type(1),  
.menu1 #tab6:target ~ a:nth-of-type(1) {  
  background: #fff;  
  padding: 8px 15px 8px 15px;  
  border: 1px solid #CAD3DA;  
  line-height: 32px; text-shadow:#CAD3DA 1px 1px 2px; color:#DC9248;}  

.menu1 > a:nth-of-type(1),  
.menu1 #tab2:target ~ a:nth-of-type(2),  
.menu1 #tab3:target ~ a:nth-of-type(3),  
.menu1 #tab4:target ~ a:nth-of-type(4),  
.menu1 #tab5:target ~ a:nth-of-type(5),  
.menu1 #tab6:target ~ a:nth-of-type(6) {border-bottom: #F4F6F7; background: #DC9248; text-shadow:#CAD3DA 1px 1px 3px; color:#F7F7F7;}  

.menu1 > a:hover { text-decoration:; }  

.menu1 > div,  
.menu1 #tab2:target ~ div:nth-of-type(1),  
.menu1 #tab3:target ~ div:nth-of-type(1),  
.menu1 #tab4:target ~ div:nth-of-type(1),  
.menu1 #tab5:target ~ div:nth-of-type(1),  
.menu1 #tab6:target ~ div:nth-of-type(1) {  
  display: none;  
  padding: 5px;  
  border: 0px solid #CAD3DA;  
  border-top: #fff;  
  background: none;}  

.menu1 > div:nth-of-type(1),  
.menu1 #tab2:target ~ div:nth-of-type(2),  
.menu1 #tab3:target ~ div:nth-of-type(3),  
.menu1 #tab4:target ~ div:nth-of-type(4),  
.menu1 #tab5:target ~ div:nth-of-type(5),  
.menu1 #tab6:target ~ div:nth-of-type(6) { display: block; }  
</style>


PS - создал демонстрацию, но не стал ее делать ровно, и описание будет на весь экран. Вы же можете все сделать аккуратно как вам нужно, здесь просто показать, что работает.

06.09.2016 Просмотров: 423 Комментарий: (5)

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

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

Комментарий: 5
ucozmental
ucozmental 06.09.2016 01:331
0
Но поставить вижу не сложно, это точно, даже под стили сделали. Если кто будет ставить в CSS то нужно убрать. Но по комментариям, они что также по размеру подгоняются.?
Kosten
Kosten 06.09.2016 01:422
0
На счет комментариев есть готовые табы, Воркман в свою бытность очень много информации написал на форуме и предоставил как раз все коды, что нужно, нужно просто в поиске найти и все.

Что по этому коду, здесь можно даже в кладку поместить форум, но он же идет одним оператором. А как ставить, все а коде под дивами и туда информацию, только не на bb кодах чтоб не была она.

Сопрано
Сопрано 06.09.2016 01:453
0
Почему то вот на сайте не могу представить их, но разве что тод них создать специально отдельную страницу и там все сделать как нужно, хотя и на главной где то встречал, но не знал в то время что и как они так сделали.
tsakonter
tsakonter 06.09.2016 01:594
0
Сейчас все что то если ставить, то нужно все под мобильный подводить, так что как то без них обойдусь, а так можно было что то придумать.
Kosten
Kosten 06.09.2016 02:035
0
Здесь точно не скажу, нужно их протягивать на адаптацию, только могу сказать с демонстраций, что все нормально под размеры идут, можно же просто посмотреть на браузере, это его просто уменьшить в ручную окно и видно все будет, здесь не чего не вылазит, значит все настроено изначально.
avatar