这是一款利用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; <BR>margin: 0; <BR>padding: 0; <BR>} <BR>ul.side_nav li { <BR>position: relative; <BR>float: left; <BR>margin: 0; <BR>padding: 0; <BR>display: inline; <BR>} <BR>ul.side_nav li a { <BR>width: 165px; <BR>border-top: 1px solid #3373a9; <BR>border-bottom: 1px solid #003867; <BR>padding: 10px 10px 10px 25px; <BR>display: block; <BR>color: #fff; <BR>text-decoration: none; <BR>background: #005094 url(sidenav_arrow.gif) no-repeat 5px 10px; <BR>position: relative; <BR>z-index: 2; <BR>} <BR>ul.side_nav li a:hover { <BR>background-color: #2d353f; <BR>} <BR>ul.side_nav li div { <BR>display: none; <BR>position: absolute; <BR>top: 2px; <BR>left: 0; <BR>width: 225px; <BR>background: 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.
