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

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

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

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

Шаг 1. HTML

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

<div class="box">

 <ul id="tabMenu">
 <li class="posts selected"></li>
 <li class="comments"></li>
 <li class="category"></li>
 <li class="famous"></li>
 <li class="random"></li>
 </ul>

 <div class="boxTop"></div>

 <div class="boxBody">

 <div id="posts" class="show parent">
 <ul>
 <li>Запись 1</li>
 <li>Запись 2</li>
 <li class="last">Запись 3</li>
 </ul>
 </div>

 <div id="comments" class="parent">
 <ul>
 <li>Комментарий 1</li>
 <li>Комментарий 2</li>
 <li class="last">Комментарий 3</li>
 </ul>
 </div>

 <div id="category" class="parent">
 <ul>
 <li>Категория 1</li>
 <li>Категория 2</li>
 <li class="last">Категория 3</li>
 </ul>
 </div>

 <div id="famous" class="parent">
 <ul>
 <li>Популярная запись 1</li>
 <li>Популярная запись 2</li>
 <li class="last">Популярная запись 3</li>
 </ul>
 </div>

 <div id="random" class="parent">
 <ul>
 <li>Случайная запись 1</li>
 <li>Случайная запись 2</li>
 <li class="last">Случайная запись 3</li>
 </ul>
 </div>
 </div>
 <div class="boxBottom"></div>
</div>

</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>

<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.

<script type="text/javascript">

$(document).ready(function() {

 // Получить все от # tabMenu UL
 $('#tabMenu li').click(function(){

 //Выполнить действия, когда они не выбраны по умолчанию
 if (!$(this).hasClass('selected')) {

 //Удалить выбранный класс из всех LI
 $('#tabMenu li').removeClass('selected');

 //Назначить LI
 $(this).addClass('selected');

 //Скрыть все DIV в .BoxBody
 $('.boxBody div.parent').slideUp('1500');

 //Передвижение DIV в boxBody в соответствии с индексом навигации UL, такое расположение является очень важным.
 $('.boxBody div.parent:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');

 }
 }).mouseover(function() {

 $(this).addClass('mouseover');
 $(this).removeClass('mouseout');

 }).mouseout(function() {

 //Добавление и удаление класса
 $(this).addClass('mouseout');
 $(this).removeClass('mouseover');

 });

 //Mouseover с живой эффект для категории меню списка
 $('.boxBody #category li').mouseover(function() {

 //Изменение цвета фона и анимации при наведении курсора мыши
 $(this).css('backgroundColor','#888');
 $(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});
 }).mouseout(function() {

 $(this).css('backgroundColor','');
 $(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});
 });

 //Mouseover эффект для сообщений, комментариев, и так далее
 $('.boxBody li').click(function(){
 window.location = $(this).find("a").attr("href");
 }).mouseover(function() {
 $(this).css('backgroundColor','#888');
 }).mouseout(function() {
 $(this).css('backgroundColor','');
 });

});

</script>

$(document).ready(function() {

// Получить все от # tabMenu UL

$('#tabMenu li').click(function(){

//Выполнить действия, когда они не выбраны по умолчанию

if (!$(this).hasClass('selected')) {

//Удалить выбранный класс из всех LI

$('#tabMenu li').removeClass('selected');

//Назначить LI

$(this).addClass('selected');

//Скрыть все DIV в .BoxBody

$('.boxBody div.parent').slideUp('1500');

//Передвижение DIV в boxBody в соответствии с индексом навигации UL, такое расположение является очень важным.

$('.boxBody div.parent:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');

}

}).mouseover(function() {

$(this).addClass('mouseover');

$(this).removeClass('mouseout');

}).mouseout(function() {

//Добавление и удаление класса

$(this).addClass('mouseout');

$(this).removeClass('mouseover');

});

//Mouseover с живой эффект для категории меню списка

$('.boxBody #category li').mouseover(function() {

//Изменение цвета фона и анимации при наведении курсора мыши

$(this).css('backgroundColor','#888');

$(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});

}).mouseout(function() {

$(this).css('backgroundColor','');

$(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});

});

//Mouseover эффект для сообщений, комментариев, и так далее

$('.boxBody li').click(function(){

window.location = $(this).find("a").attr("href");

}).mouseover(function() {

$(this).css('backgroundColor','#888');

}).mouseout(function() {

$(this).css('backgroundColor','');

});

</script>

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

Шаг 1. HTML

Шаг 2. CSS

Шаг 3. JavaScript

Вот и все. Готово!

Читайте также:

Интересно:

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи

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

Шаг 1. HTML

Шаг 2. CSS

Шаг 3. JavaScript

Вот и все. Готово!

Читайте также:

Интересно:

Зайти

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи