这是一款利用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 /> http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js<br /> "> <br /> $(document).ready(function() {<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">www.corange.cn">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.
