jquery打造一款侧边弹出的垂直导航

这是一款利用jquery动画特效和css打造的侧边弹出垂直导航，整个弹出过程比较流畅，而且代码很简单，如果你正在寻找一款带动画的垂直导航，那么可以试试这个。下面是在线demo

HTML源码：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112

< title >Jquery+CSS侧边弹出垂直导航</ title > < style type = "text/css" > html, body, ul, li {      margin: 0;      padding: 0;      border: 0;      outline: 0;      vertical-align: baseline;      font-family: "Verdana","lucida sans",Sans-serif;      font-size: 12px; } html, body {      min-height: 100%;      color: #FFFFFF;      background-repeat: repeat-x;      background-position: top;      background-color: #161f2a; } ul.side_nav {       width: 200px;       float: left;       margin: 0;       padding: 0; } ul.side_nav li {       position: relative;       float: left;       margin: 0;       padding: 0;       display: inline; } ul.side_nav li a {       width: 165px;       border-top: 1px solid #3373a9;       border-bottom: 1px solid #003867;       padding: 10px 10px 10px 25px;       display: block;       color: #fff;       text-decoration: none;       background: #005094 url(sidenav_arrow.gif) no-repeat 5px 10px;       position: relative;       z-index: 2; } ul.side_nav li a:hover {       background-color: #2d353f; } ul.side_nav li div {       display: none;       position: absolute;       top: 2px;       left: 0;       width: 225px;       background: url(bubble_top.gif) no-repeat right top; } ul.side_nav li div p {       margin: 7px 0;       line-height: 1.3em;       padding: 0 5px 10px 30px;       color: #444;       background: url(bubble_btm.gif) no-repeat right bottom; } </ style > < script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js "></ script > < script language = "javascript" >      $(document).ready(function() {            $("ul.side_nav li").hover(function() {              $(this).find("div").stop()          .animate({ left: "210", opacity: 1 }, "fast")          .css("display", "block")          }, function() {              $(this).find("div").stop()          .animate({ left: "0", opacity: 0 }, "fast")          });      }); </ script > </ head > < body > < ul class = "side_nav" >      < li >          < a href = "www.corange.cn" >Corange.cn</ a >            < div >< p >Go home!< Br />ASP</ p ></ div >      </ li >      < li >          < a href = "#" >About Me</ a >          < div >< p >Get to know me.</ p ></ div >      </ li >      < li >            < a href = "#" >Portfolio</ a >          < div >< p >Get to check out my featured work!</ p ></ div >      </ li >      < li >          < a href = "#" >Blog</ a >          < div >< p >Tutorials, articles and resources.</ p ></ div >      </ li >        < li >          < a href = "#" >Contact</ a >          < div >< p >Don't hesitate to drop me a line!</ p ></ div >      </ li >      < li >          < a href = "#" >Rss</ a >          < div >< p >News, Video and so on.</ p ></ div >        </ li > </ ul >   </ body > </ html >