СЛАЙДЕР BOX МЕНЮ С JQUERY И CSS3
В этом уроке мы создадим уникальный раздвижной навигационный блок. Идея состоит в том, чтобы сделать меню со слайдами. Мы также будем включать подменю с ссылками на страницы. Подменю будет скользить влево или вправо в зависимости от пункта меню.
ПОСМОТРЕТЬ
ДЕМО СКАЧАТЬ
ИСТОЧНИКА
В этом уроке мы создадим уникальный раздвижной навигационный
блок. Идея состоит в том, чтобы сделать меню со слайдами. Мы также
будем включать подменю с ссылками на страницы. Подменю будет скользить
влево или вправо в зависимости от пункта меню.
РАЗМЕТКА
Для HTML структуры мы будем использовать неупорядоченный
список, где каждый пункт меню будет содержать пункт главного звена и DIV
элемент для подменю:
|
<ul
id="sdt_menu" class="sdt_menu">
<li>
<a href="#">
<img
src="images/1.jpg" alt=""/>
<span
class="sdt_active"></span>
<span
class="sdt_wrap">
<span
class="sdt_link">Portfolio</span>
<span
class="sdt_descr">My work</span>
</span>
</a>
<div class="sdt_box">
<a
href="#">Websites</a>
<a
href="#">Illustrations</a>
<a
href="#">Photography</a>
</div>
</li>
...
</ul>
|
Если нет подменю, DIV может быть просто
опущен. Изображение не будет показано в начале, так как мы установим его
ширину и высоту до 0 в CSS.
Давайте посмотрим на стиль.
CSS
Мы начнем с укладки в случае маркированного списка:
|
ul.sdt_menu{
margin:0;
padding:0;
list-style: none;
font-family:"Myriad Pro",
"Trebuchet MS", sans-serif;
font-size:14px;
width:1020px;
}
|
|
ul.sdt_menu a{
text-decoration:none;
outline:none;
}
|
Наши элементы списка будут плавать оставим их положение
относительно, так как мы хотим использовать абсолютное позиционирование для
элементов внутри. Если мы не настроим это, абсолютное позиционируемые
элементы были бы относительно всей страницы:
|
ul.sdt_menu li{
float:left;
width:170px;
height:85px;
position:relative;
cursor:pointer;
}
|
Стиль для основного элемента ссылки, где у нас есть два
пролета для названия и описания будут оформлены следующим образом:
|
ul.sdt_menu li >
a{
position:absolute;
top:0px;
left:0px;
width:170px;
height:85px;
z-index:12;
background:transparent
url(../images/overlay.png) no-repeat bottom right;
-moz-box-shadow:0px 0px 2px #000;
-webkit-box-shadow:0px 0px 2px #000;
box-shadow:0px 0px 2px #000;
}
|
Обратите внимание на Z-Index: Мы будет определять порядок
наложения для всех важных элементов, так что нужные останутся наверху.
Мы используем фоновое изображение, которое создаст эффект
стекла, как с полу-прозрачным градиентом. При использовании некоторых
фоновых рисунков (например, древесина в демо) он создает красивый эффект.
Вы также можете экспериментировать с тенями - изменение
значения 2px 2px 6px # 000 вставкой даст вам очень хороший
эффект.
Изображение будет оформлено следующим образом:
|
ul.sdt_menu li a
img{
border:none;
position:absolute;
width:0px;
height:0px;
bottom:0px;
left:85px;
z-index:100;
-moz-box-shadow:0px 0px 4px #000;
-webkit-box-shadow:0px 0px 4px #000;
box-shadow:0px 0px 4px #000;
}
|
Мы также добавим некоторые аккуратные тени. Первые два
значения равны нулю, что делает тени равномерными по всему изображению. Мы
использовали это, в ссылке элемента. Эти же тени можно использовать если вы
хотите создать световой эффект границы. Преимущество в том, что тени на
самом деле нет - вам не нужно, определять его в ширину или высоту в
элементах. Оболочка для названия и описания пролетов будет иметь этот
стиль:
|
ul.sdt_menu li
span.sdt_wrap{
position:absolute;
top:25px;
left:0px;
width:170px;
height:60px;
z-index:15;
}
|
Если у вас есть большие тексты, вам необходимо адаптировать их. Убедитесь,
что адаптированные значения сочетаются с анимацией значения в JavaScript.
Далее, мы определяем стиль для элемента, который скользит
вниз. Мы даем ему высоту 0 и поместим
его таким образом, что нам просто необходимо будет увеличить ее высоту в
анимации:
|
ul.sdt_menu li
span.sdt_active{
position:absolute;
background:#111;
top:85px;
width:170px;
height:0px;
left:0px;
z-index:14;
-moz-box-shadow:0px 0px 4px #000 inset;
-webkit-box-shadow:0px 0px 4px #000
inset;
box-shadow:0px 0px 4px #000 inset;
}
|
Общие стили для пролетов и ссылок в выдвигающихся окнах
будет следующим:
|
ul.sdt_menu li span
span.sdt_link,
ul.sdt_menu li span
span.sdt_descr,
ul.sdt_menu li
div.sdt_box a{
margin-left:15px;
text-transform:uppercase;
text-shadow:1px 1px 1px #000;
}
|
Название и описание будет оформлено следующим образом:
|
ul.sdt_menu li span span.sdt_link{
color:#fff;
font-size:24px;
float:left;
clear:both;
}
ul.sdt_menu li span
span.sdt_descr{
color:#0B75AF;
float:left;
clear:both;
width:155px;
font-size:10px;
letter-spacing:1px;
}
|
Подменю первоначально будет скрыто под основным меню. Затем
мы анимируем его вправо или влево, в зависимости от того, где мы
находимся. Если вы, например, наведите курсор на последний элемент, поле
подменю будет слева, во всех других случаях с правой стороны.
|
ul.sdt_menu li
div.sdt_box{
display:block;
position:absolute;
width:170px;
overflow:hidden;
height:170px;
top:85px;
left:0px;
display:none;
background:#000;
}
ul.sdt_menu li
div.sdt_box a{
float:left;
clear:both;
line-height:30px;
color:#0B75AF;
}
|
Первое звено в подменю должно иметь верхнее поле:
|
ul.sdt_menu li
div.sdt_box a:first-child{
margin-top:15px;
}
ul.sdt_menu li
div.sdt_box a:hover{
color:#fff;
}
|
И это все, стили! Давайте добавим анимацию!
JAVASCRIPT
Когда мы наводим курсор мыши на элемент списка, мы увеличиваем
изображение, и показываем как, sdt_active пролета и sdt_wrap службы. Если
элемент имеет подменю (sdt_box), то сдвигаем его в сторону.
|
$(function() {
$('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'170px',
'height':'170px',
'left':'0px'
},400,'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'140px'},500,'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'170px'},300,function(){
var $sub_menu =
$elem.find('.sdt_box');
if($sub_menu.length){
var left = '170px';
if($elem.parent().children().length == $elem.index()+1)
left = '-170px';
$sub_menu.show().animate({'left':left},200);
}
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu =
$elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.hide().css('left','0px');
$elem.find('.sdt_active')
.stop(true)
.animate({'height':'0px'},300)
.andSelf().find('img')
.stop(true)
.animate({
'width':'0px',
'height':'0px',
'left':'85px'},400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'25px'},500);
});
});
|
Мы надеемся, что вам понравилось это небольшое меню, и вы
нашли то что искали!
ПОСМОТРЕТЬ
ДЕМО СКАЧАТЬ
ИСТОЧНИКА
Ссылка на
источник
|
