Блог

В этом уроке я покажу Вам как создать навигационное меню, которое двигается по горизонтали. Оно начинается из вкладок с правой стороны элемента, в котором содержится. При нажатии вкладка двигается влево и меню открывается.

Стили

Для меню я использовал простой неупорядоченный список в

Code

/* nav wrapper */
.tab-nav {
position: relative;
width: 610px;
overflow: hidden;
background: #ddd url(tab-slide.png) no-repeat 0 0;

}
.tab-nav ul {
position: relative;
float: left;
width: 1600px;
margin-left: 535px;
padding-left: 0;
list-style-type: none;
background-color: #fff;
;
}
.tab-nav li {
float: left;
clear: left;
;
}
.tab-nav a {
display: block;
width: 74px;
border-right: 1px solid #ddd;
height: 25px;
line-height: 24px;
float: left;
text-align: center;
text-decoration: none;
color: #000;
background: url(tab-slide.png) no-repeat 2px -194px;

}
.tab-nav a.expanded {
background-position: 2px -244px;
;
}
.tab-nav ul ul {
float: left;
background-color: #333;
width: auto;
margin-left: 0;
;
}
.tab-nav li li {
clear: none;
}
.tab-nav li li a {
color: #fff;
width: 100px;
background-image: none;
}

body{
/* Setting default text color, background and a font stack */
color:#444444;
font-size:13px;
background: #f2f2f2;
font-family:Arial, Helvetica, sans-serif;
}

body{
/* Page reset */
margin:0px;
padding:0px;
}

.style1 {
font-size: 10px;
}

p{
padding:10px;
text-align:center;
}
p{
/* Page reset */
margin:0px;
padding:0px;
}

Большая часть стилей описывает позиционирование элементов навигации. У верхнего

Code

<ul>

левый отступ на 75 пикселей меньше чем ширина обертки - таким образом вкладки видны с правой стороны.
Также очень важное значение overflow, так как оно служит для того, чтобы спрятать ссылки.

Прокрутка меню

Далее давайте сделаем так, чтобы при нажатии на меню вкладка выезжала и открывала полное меню. При очередном нажатии вкладка возвращается на свое привычное место.

Для начала необходимо задать несколько переменных. Переменная $parentItem является
Выделить всё

Code

<li>

родителем нажатой ссылки. slideAmt - это ширина встроенного

Code

<ul>

А direction будет определять в какую сторону необходимо двигать меню.

Code

var $topLinks1 = $('#tab-nav-1 > ul > li > a');
$topLinks1.click(function() {
var $parentItem = $(this).parent(),
slideAmt = $(this).next().width(),
direction;
// code continues
});

Для того, чтобы движение меню происходило, необходимо анимировать или же свойство left, или marginLeft. В данном примере, мы будем анимировать marginLeft. Следующим шагом является определение направления анимации, основываясь на текущем значении marginLeft. Если оно меньше 0, направление будет "+=", которое увеличивает его обратно к нулю. В противном случае направление будет "-=". В то же время, класс "expanded" будет меняться таким образом, чтобы фоновая стрелка показывала направление движения.

Code

В конце мы выполняем анимацию используя переменные direction и slideAmt.

Code

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

Code

$(document).ready(function() {
var $topLinks2 = $('#tab-nav-2 > ul > li > a');
$topLinks2.click(function() {
var $parentItem = $(this).parent(),

slideAmt = $(this).next().width(),
direction;
$topLinks2.removeClass('expanded');
if (parseInt($parentItem.css('marginLeft'), 10) < 0) {

direction = '+=';
} else {
$(this).addClass('expanded');
direction = '-=';
}
$parentItem
.animate({marginLeft: direction + slideAmt}, 400)

.siblings()
.animate({marginLeft: '0'}, 150);
return false;
});
});

В данном случае ссылки сохраняются в переменную. При нажатии на одну ссылку, у всех остальных убирается класс "expanded". То же самое происходит с направлением анимации.

Автозакрытие

Теперь давайте сделаем так, чтобы вкладки автоматически закрывались, если пользователь убирает мышку на более чем 1 секунду.

Code

$(document).ready(function() {
var closeAll,
$topLinks3 = $('#tab-nav-3 > ul > li > a');

$('#tab-nav-3 ul ul').css('opacity', '0.5');

setTabIndex();

$topLinks3.click(function() {
var $parentItem = $(this).parent(),
slideAmt = $(this).next().width(),
direction;

$topLinks3.removeClass('expanded');
if (parseInt($parentItem.css('marginLeft'), 10) < 0) {
direction = '+=';
} else {

$(this).addClass('expanded');
direction = '-=';
}
$parentItem
.animate({marginLeft: direction + slideAmt}, 400)
.siblings()

.animate({marginLeft: '0'}, 150);

setTabIndex();

return false;
});

$('#tab-nav-3')
.mouseleave(function() {

closeAll = setTimeout(function() {
$topLinks3.removeClass('expanded').parent().animate({marginLeft: '0'}, 150);
}, 1000);
}).mouseenter(function() {

clearTimeout(closeAll);
});

Вторая строка определяет переменную, которая будет использоваться для setTimeout(), которую Вы можете найти внутри метода .mouseleave(). Функция setTimeout() содержит два аргумента: первая - анонимная функция, которая содержит код для запуска анимации, вторая - количество миллисекунд для ожидания (1000 милисекунд) перед запуском первого аргумента.

Вот и все готово! Надеюсь, урок Вам понравился smile