前言

在本教程中，我們將創建一個獨特的滑動框導航。這樣做可以讓有菜單的盒子滑出，并且彈出縮略圖。在某些菜單項中我們還包含著有進一步鏈接的子菜單。取決于我們鼠標在菜單項上的停懸，子菜單將向左或向右滑動。

我們將使用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：我們將定義為所有的重要元素的堆疊順序，使正確的留在上面。

我們正在使用背景圖像創建一個半透明漸變玻璃般的效果。當您使用一些背景圖案（如木材演示），它創建了一個美麗的效果。確保嘗試不同質地的 - 它只是看起來驚人的！