七
27
2010
一个基于JQuery 和CSS3的滑动菜单
发布者: seasun
Demo Download
在这里我们将要创建一个独特的滑动导航菜单。这个想法是让装有菜单项的盒子（box）滑出，并且弹出一个缩略图 片。同时还要在有需要二级菜单的链接项调用一个子菜单盒子。这个子菜单要依靠在上级菜单的左边或右边的位置悬停。
这里我们要用到jQuery Easing Plugin和tibchris的一些美丽的图片。
1. HTML结构
先来写HTML结构，这里我们用一个无序的列表来放导航菜单的一级菜单，用DIV来放子菜单。
<ul id="sdt_menu" class="sdt_menu"> <li> <a href="#"> <img src="images/1.jpg" alt="" /> <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可以被忽视。图片在开始的时候不会被显示，我们要在CSS中为它的宽和高都设为０。
让我们开看看CSS样式
2. CSS
让我们首先为无序列表设置样式。
ul.sdt_menu{
margin:0;
padding:0;
list-style: none;
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
font-size:14px;
width:1020px;
}
接下来，我们要去掉菜单链接中的text-decoration和outline。
ul.sdt_menu a{
text-decoration:none;
outline:none;
}
我们要将列表项左浮动，并且要将position设置为relative，因为我们要为它内部的元素进行绝对定位。如要我们不那样设置，绝对定位刚是相对于整个网页的。
ul.sdt_menu li{
float:left;
width:170px;
height:85px;
position:relative;
cursor:pointer;
}
这里来设计主链接的样式，我们有两个span，标题和描述。如下面这样来为它们写样式。
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: 我们要为重要的元素定义堆叠顺序，来让它们能够停留在上面。
我们要用一个背景图片来创造一种半透明的渐变。当你用一些背景图片（像DEMO中的木纹背景）来创造一种美丽的效果，请务必用一些不同的纹理会让它看起来 棒级了。
你也可以加上阴影－改变一下值像2px 2px 6px #000 inset，同样会给你非常好看的效果。
接下来是图片的样式:
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;
}
我们要加上图片由下升起的动画，这就是为什么定位它必然要用“bottom”作为参考点。我们同样加上了很棒的阴影效果。这里前两个值是0，使图片 的周围的阴影显得均匀。这甚至可以把阴影被用作一种特效，无论什么时候，你都可以创造一种边框效果。它的优点在于这些阴影不是真的存在－你不用考虑在元素 中如何来计算它的宽和高。当然现在的缺点是CSS3并不被ＩＥ支持。
下面是包涵标题和描述的span的样式
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;
}
第一个子菜单链接需要设置一个margin-top
ul.sdt_menu li div.sdt_box a:first-child{
margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
color:#fff;
}
这是所有样式！让我们加上魔法！
3.JavaScript
当我们的鼠标悬停在这些列表元素上，我们要放大图片，并且显示全部，sdt_active和the 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);
});
});
就是这样！我们希望你能喜欢这个小菜单，它能对你有帮助。
P.S. 这个在Google Chrome下看起来非常完美。
- 分享
