Скрипт Табы (Вкладки) для сайта ucoz на css / html
                                                                                                                                                                                
Приветствую Вас Гость | RSS
Меню
Главная » Файлы » Все для Ucoz » Скрипты для ucoz

Скрипт Табы (Вкладки) для сайта ucoz на css / html

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

Вставляем код в нужный вам раздел "Страница материала и комментариев к нему":

Код
<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>Содержимое вкладки 1</div>  
<div>Содержимое вкладки 2</div>  
<div>Содержимое вкладки 3</div>  
<div>Содержимое вкладки 4</div>  
<div>Содержимое вкладки 5</div>  
<div>Содержимое вкладки 6</div>  
</div>
<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>


Если Вкладки(табы) Вы хотите использовать для двух-трех видов комментариев, допустим (Ucoz,Вконтакте и Facebook),то вот готовый вариант:(для Вконтакте и Facebook) нужна регистрация для получения собственного кода.(Ознакомится Вконтакте и Facebook )

Вставляем в "Страница материала и комментариев к нему" предварительно удалив старый код комментариев:
Код
<div class="menu1">  
<br id="tab2"/>
<a href="#tab1"><b>Ucoz</b></a><a href="#tab2"><b>Вконтакте</b></a>

<div>

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td width="60%" height="25"><!--<s5183>-->Всего комментариев<!--</s>-->: <b>$COM_NUM_ENTRIES$</b></td><td align="right" height="25">$COM_PAGE_SELECTOR$</td></tr>
<tr><td colspan="2">$COM_BODY$</td></tr>
<tr><td colspan="2" align="center">$COM_PAGE_SELECTOR1$</td></tr>
<tr><td colspan="2" height="10"></td></tr>
</table>
  </div>  
<div id="second"><div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "720", attach: "*"});
</script></div>  
</div>
  <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:#098ed3;}  
.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: #098ed3; 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>

На этом всё,установка закончена,можете побаловаться с цветами в css.
Удачи!
 

Пример второго варианта Вы можете увидеть внизу,под статьей.
/ --------------- \
/ Как нужно качать? \

Категория: Скрипты для ucoz | Просмотров: 1946 | Добавил: drak-zp | Рейтинг: 5.0/12 | Загрузок: 0


avatar


Профиль
Привет: Гость


Гость, мы рады вас видеть. Пожалуйста зарегестрируйтесь или авторизуйтесь!
Топ материалов
Статистика
Онлайн всего: 32
Гостей: 32
Пользователей: 0






Анализ веб сайтов
Друзья сайта
Хочу в друзья
Друзья сайта h1tan.ru Друзья сайта h1tan.ru
Друзья сайта h1tan.ru Друзья сайта h1tan.ru