Вкладки или табы для 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 - создал демонстрацию, но не стал ее делать ровно, и описание будет на весь экран. Вы же можете все сделать аккуратно как вам нужно, здесь просто показать, что работает.  | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 5 | |
На счет комментариев есть готовые табы, Воркман в свою бытность очень много информации написал на форуме и предоставил как раз все коды, что нужно, нужно просто в поиске найти и все.
Что по этому коду, здесь можно даже в кладку поместить форум, но он же идет одним оператором. А как ставить, все а коде под дивами и туда информацию, только не на bb кодах чтоб не была она.  | |
