前言
在本教程中，我們將創(chuàng)建一個獨特的滑動框導航。這樣做可以讓有菜單的盒子滑出，并且彈出縮略圖。在某些菜單項中我們還包含著有進一步鏈接的子菜單。取決于我們鼠標在菜單項上的停懸，子菜單將向左或向右滑動。
我們將使用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：我們將定義為所有的重要元素的堆疊順序，使正確的留在上面。
我們正在使用背景圖像創(chuàng)建一個半透明漸變玻璃般的效果。當您使用一些背景圖案（如木材演示），它創(chuàng)建了一個美麗的效果。確保嘗試不同質地的 - 它只是看起來驚人的！
你也可以操作陰影，改變值成為：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”作為參考點。我們也添加一些優(yōu)雅的方塊陰影。前邊2個的值是0，使得圖片周圍的陰影均勻擴散。我把它應用到鏈接元素。無論什么時候你想創(chuàng)建一個輕的邊界效應。你都可以使用這一招！他的優(yōu)點是，陰影不是真的，你不需要考慮它的寬度或元素的高度計算。目前的缺點是，IE下是不支持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;}盒子中span和link的常用樣式應該被定義成如下：
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; /*For dumbass IE7*/font-size:10px;letter-spacing:1px;}子菜單的盒子初始化的時候應該是在灰色盒子下并隱藏的。稍后我們使他動起來，向右或向左，這取決于我們在哪。例如，如果我們鼠標在最后一個元素上徘徊，我們想實現(xiàn)讓子菜單向左的動畫效果。其他的條件下，我們想讓它向右。
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;}子菜單的第一個link應該有一個margin：
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跨度和sdt_wrap跨度。如果元素有一個子菜單（sdt_box），然后我們將它推到一邊。如果該元素是最后一個，我們在菜單的子菜單框幻燈片的左側，否則在右側：
$(function() {/*** for each menu element, on mouseenter, * we enlarge the image, and show both sdt_active span and * sdt_wrap span. If the element has a sub menu (sdt_box),* then we slide it - if the element is the last one in the menu* we slide it to the left, otherwise to the right*/$('#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);});});這就完成了。我們希望你喜歡這個小菜單并且可以合理的使用它。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
