Регистрация    Войти
Авторизация

Табы для боковой панели uCoz

Табы для боковой панели uCoz.

Табы для боковой панели uCoz 161 | (4)
Всем доброго дня, сегодня в этой статье, мы будем создавать для боковой панели сайта uCoz (а если говорить более профессионально то right bar) ячейку с табами, в которых ключевым моментом будут иконки заголовка той или иной ячейки.


Шаг 1 - Установим JS:
И так давайте приступим к установки данного решения к себя на сайт, установим следующий js в самый низ страницы перед закрывающим тегом :

<script type="text/javascript" src="http://www.center-dm.ru/ucoz/vid_news/tab_2/tabs.js"></script>


Шаг 2 - Установим HTML:
Отлично, теперь давайте установим наш с Вами html каркас:

<!-- Табы --> 
<div id="tabs-1">
<div class="tabs-center-dm">

<ul class="tabs-ul">
<li class="li-1"><a href="#cell1"><img alt="" src="img/ico_1.png" /></a></li>
<li class="li-2"><a href="#cell2"><img alt="" src="img/ico_2.png" /></a></li>
<li class="li-3"><a href="#cell3"><img alt="" src="img/ico_3.png" /></a></li>
<li class="li-4"><a href="#cell4"><img alt="" src="img/ico_4.png" /></a></li>
</ul>

<div id="cell1" class="tabs-content">Ячейка - 1</div>
<div id="cell2" class="tabs-content">Ячейка - 2</div>
<div id="cell3" class="tabs-content">Ячейка - 3 </div>
<div id="cell4" class="tabs-content">Ячейка - 4 </div>

</div>
</div>
<!-- /Табы -->


Шаг 3 - Установим CSS:
Теперь когда наш с Вами каркас табов установлен, пропишем ему следующие css стили:

/* Табы 
------------------------------------------*/
#tabs-1 {
float:left;
width:250px;
overflow: hidden;
border: 1px solid #CAD3DA;
border-radius:5px;
}

.tabs-ul{
list-style:none;
margin: 0;
padding: 0;
}

.tabs-ul li a {
float:left;
width:61.75px;
padding: 8px 0px 3px 0px;
text-align:center;
background: #fff;
border-right: 1px solid #CAD3DA;
}

.li-1 a {border-bottom: 2px solid #3498DB;}
.li-2 a {border-bottom: 2px solid #27AE60;}
.li-3 a {border-bottom: 2px solid #E74C3C;}
.li-4 a {border-bottom: 2px solid #9B59B6; border-right: none!important;}

.tabs-ul li a.selected,ul
.tabs-ul li a.selected:hover {background:#fff; border-bottom: 2px solid #fff;}
.tabs-ul li a:hover {background:#F4F8F9;}
.tabs-ul li a:focus {outline: 0;}

.tabs-content {
float:left;
width:220px;
text-align:left;
background: #fff;
padding: 10px 15px 10px 15px;
}


Скачать: Demo.rar [3,97 Kb] (cкачиваний: 70)


На этом всё, спасибо за внимание!

Есть вопросы по шаблону или скрипту? так задай их и мы ответим!

Автор: chestr  20-10-2013, 12:25   Просмотров: 3783   
табы, ucoz, Табы для боковой панели, боковой панели uCoz, панели uCoz
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.


Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.