前言
在本教程中，我们将创建一个独特的滑动框导航。这样做可以让有菜单的盒子滑出，并且弹出缩略图。在某些菜单项中我们还包含着有进一步链接的子菜单。取决于我们鼠标在菜单项上的停悬，子菜单将向左或向右滑动。
我们将使用jQuery Easing Plugin插件和一些由tibchris.提供的漂亮图片
标记
在HTML的结构中，我们将使用一个无序的列表，其中每个菜单项将包含的主要链接和一个子菜单的div元素：
<ul id="sdt_menu" class="sdt_menu">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Websites</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Illustrations</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Photography</a>
</div>
</li>
</ul>如果这里没有子菜单，DIV将简单的被排除在外。图片开始不会显示，因为我们使用css把它的高度和宽度设置为0.让我们看看样式表：
样式表
我们开始设计无序列表的样式：
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;
}对于标题和描述，我们有2个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 inset;
