在本教程中，我们将创建一个独特的滑动盒导航。这个想法是制作一个带有菜单项的盒子，当一个缩略图出现的时候。我们还将包括一个子菜单框，其中有一些菜单项的进一步链接。子菜单将会滑到左边或右边，这取决于我们正在盘旋的菜单项。
我们将使用jQuery放松插件和tibchris的一些漂亮的照片。
标记
对于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可以简单地省略。因为我们将在CSS中设置它的宽度和高度为0，所以图像在开始时不会显示。
让我们来看看它的风格。
CSS
我们将从设计无序列表开始:
ul.sdt_menu{ margin:0; padding:0; list-style: none; font-family:"Myriad Pro", "Trebuchet MS", sans-serif; font-size:14px; width:1020px;}Genrally，我们想删除所有的默认文本装饰和大纲，所有链接元素在我们的菜单:
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 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;}我们想让图像从底部开始，这就是为什么我们把它完全用“底部”作为参考点。我们还添加了一些整洁的方框阴影。前两个值为零，使阴影均匀分布在图像周围。我们在链接元素中也使用了这个。当你想要创建一个轻松的边界效果时，即使是阴影也可以作为一个技巧。好处是阴影并不是真的存在——你不需要在元素的宽度或高度计算中考虑它。当前的缺点是IE中不支持CSS3。
标题和描述的包装将具有这种风格:
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 span和sdt_wrap span。如果元素有一个子菜单(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);
});
});就是这个!希望您能喜欢这个小菜单，并找到它有用的地方!
注:在Google Chrome看起来很有趣的!
