如何使用CSS3和JQuery easing 插件制作绚丽菜单

前言

在本教程中，我们将创建一个独特的滑动框导航。这样做可以让有菜单的盒子滑出，并且弹出缩略图。在某些菜单项中我们还包含着有进一步链接的子菜单。取决于我们鼠标在菜单项上的停悬，子菜单将向左或向右滑动。

我们将使用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;-webkit-box-shadow:0px 0px 2px #000 inset;box-shadow:0px 0px 2px #000 inset;}

注意z-index：我们将定义为所有的重要元素的堆叠顺序，使正确的留在上面。

我们正在使用背景图像创建一个半透明渐变玻璃般的效果。当您使用一些背景图案（如木材演示），它创建了一个美丽的效果。确保尝试不同质地的 - 它只是看起来惊人的！