這是一款利用jquery動畫特效和css打造的側邊彈出垂直導航,整個彈出過程比較流暢,而且代碼很簡單,如果你正在尋找一款帶動畫的垂直導航,那麼可以試試這個。下面是效果截圖: HTML源碼: 複製代碼 代碼如下: Jquery CSS側邊彈出垂直導航 <BR>html, body, ul, li { <BR>margin: 0; <BR>padding: 0; <BR>border: 0; <BR>outline: 0; <BR>vertical-align: baseline; <BR>font-family: "Verdana","lucida sans ",Sans-serif; <BR>font-size: 12px; <BR>} <BR>html, body { <BR>min-height: 100%; <BR>color: #FFFFFF; <BR>background-repeat : repeat-x; <BR>background-position: top; <BR>background-color: #161f2a; <BR>} <BR>ul.side_nav { <BR>width: 200px; <BR>float: left; 🎜>margin: 0; <BR>padding: 0; <BR>} <BR>ul.side_nav li { <BR>position: relative; <BR>float: left; <BR>margin: 0; : 0; <BR>display: inline; <BR>} <BR>ul.side_nav li a { <BR>width: 165px; <BR>border-top: 1px solid #3373a9; <BR>border-top: 1px solid #3373a9; <BR>border-top: 1px solid #3373a9; <BR>border-top: 1px-bot solid #003867; <BR>padding: 10px 10px 10px 25px; <BR>display: block; <BR>color: #fff; <BR>text-decoration: none; <BR>color: #fff; <BR>text-decoration: none; <BR>color: #fff; <BR>text-decoration: none; <BR>color: #fff; <BR>text-decoration: none; <BR>值> # ) no-repeat 5px 10px; <BR>position: relative; <BR>z-index: 2; <BR>} <BR>ul.side_nav li a:hover { <BR>background-color: #2d353f; >} <BR>ul.side_nav li div { <BR>display: none; <BR>position: absolute; <BR>top: 2px; <BR>left: 0; <BR>width: 225px; : url(bubble_top.gif) no-repeat right top; <BR>} <BR>ul.side_nav li div p { <BR>margin: 7px 0; <BR>line-height: 1.3em; <BR>padding: 0 5px 10px 30px; <BR>color: #444; <BR>background: url(bubble_btm.gif) no-repeat right bottom; <BR>} <BR> <BR>$(document).ready(function() { <BR><BR>$("ul.side_nav li").hover(function() { <BR>$(this).find("div"). stop() <BR>.animate({ left: "210", opacity: 1 }, "fast") <BR>.css("display", "block") <BR>}, function() { <BR>$(this).find("div").stop() <BR>.animate({ left: "0", opacity: 0 }, "fast") <BR>}); <BR>}); <BR> Corange.cn Go home!ASP About Me Get to know me. Portfolio Get to check out my featured work! Blog Tutorials, articles and resources. Contact Don't hesitate to drop me a line! Rss News, Video and so on.