Создаем вертикальную навигацию с вкладками

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

Шаг 1. HTML

Для начала мы рассмотрим разметку, TabMenu UL # это кнопки на верхней части вкладки. Внутри контейнера boxBody, необходимо указать 5 div‘ов, число div‘ов будет зависеть от того, сколько элементов вы указали в # tabMenu, в данном случае мы будем использовать 5. Таким образом, расположение BoxBody должно совпадать с расположением кнопки в tabMenu #.

</ul>

<ul>

<li>Запись 1</li>

<li>Запись 2</li>

<li class="last">Запись 3</li>

</ul>

</div>

<ul>

<li>Комментарий 1</li>

<li>Комментарий 2</li>

<li class="last">Комментарий 3</li>

</ul>

</div>

<ul>

<li>Категория 1</li>

<li>Категория 2</li>

<li class="last">Категория 3</li>

</ul>

</div>

<ul>

<li>Популярная запись 1</li>

<li>Популярная запись 2</li>

<li class="last">Популярная запись 3</li>

</ul>

</div>

<ul>

<li>Случайная запись 1</li>

<li>Случайная запись 2</li>

<li class="last">Случайная запись 3</li>

</ul>

</div>

</div>

С разметкой мы закончили, теперь перейдем к стилям.

Шаг 2. CSS

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

<style>

a {

color:#ccc;

text-decoration:none;

}

a:hover {

color:#ccc;

text-decoration:none

}

#tabMenu {

margin:0;

padding:0 0 0 15px;

list-style:none;

}

#tabMenu li {

float:left;

height:32px;

width:39px;

cursor:pointer;

cursor:hand

}

/* Иконки для кнопок */

li.comments {background:url(images/tabComment.gif) no-repeat 0 -32px;}

li.posts {background:url(images/tabStar.gif) no-repeat 0 -32px;}

li.category {background:url(images/tabFolder.gif) no-repeat 0 -32px;}

li.famous {background:url(images/tabHeart.gif) no-repeat 0 -32px;}

li.random {background:url(images/tabRandom.gif) no-repeat 0 -32px;}

li.mouseover {background-position:0 0;}

li.mouseout {background-position:0 -32px;}

li.selected {background-position:0 0;}

.box {

width:227px

}

.boxTop {

background:url(images/boxTop.gif)no-repeat;

height:11px;

clear:both

}

.boxBody {

background-color:#282828;

}

.boxBottom {

background:url(images/boxBottom.gif) no-repeat;

height:11px;

}

.boxBody div.parent {

display:none;

}

.boxBody div.show {

display:block;

}

.boxBody #category a {

display:block

}

/* styling for the content*/

.boxBody div ul {

margin:0 10px 0 25px;

padding:0;

width:190px;

list-style-image:url(images/arrow.gif)

}

.boxBody div li {

border-bottom:1px dotted #8e8e8e;

padding:4px 0;

cursor:hand;

cursor:pointer

}

.boxBody div ul li.last {

border-bottom:none

}

.boxBody div li span {

font-size:8px;

font-style:italic;

color:#888;

}

/* IE Хаки */

*html .boxTop {margin-bottom:-2px;}

*html .boxBody div ul {margin-left:10px;padding-left:15px;}

</style>

Со стилями все просто, не будем на них детальнее останавляваться, рассмотреть их более подробно можно в исходниках.

Шаг 3. JavaScript

Теперь самое интересное, нам необходимо оживить всю навигацию, придать скользящий эффект и эффект сворачивания панелей, при переходе на определенную вкладку. Более детально можно ознакомится с правилами jQuery в статье Jquery Animate Effect Tutorial.