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

超文本标记语言源码：复制代码代码如下：标题查询半铸钢钢性铸铁(Cast Semi-Steel)侧边弹出垂直导航/title style type='text/css' html，body，ul，Li { margin : 0；padd : 0；边框： 0；轮廓： 0；垂直对齐：基线；font-family: 'Verdana '，' lucida sans '，Sans-serif；font-size : 12px} html，正文{最小高度：100%；color: # FFFFFF背景-重复：次重复-x；背景-位置：顶部；背景-颜色： # 161 f2a} ul。side _ nav { width : 200 px向左浮动：保证金： 0；padd : 0；} ul.side_nav li {相对位置：向左浮动：保证金： 0；padd : 0；display: inline} ul.side_nav阿利{ width : 165 pxborder-top : 1 px实心# 3373 a9边框-底部： 1px实心# 003867;padd : 10px 10px 10px 25pxdisplay :块；color: # fff文本装饰：无；背景： # 005094 URL(sidenav _ arrow。gif)无重复5px 10px相对位置：z-index : 2；} ul。side _ nav阿利：悬停{背景色： # 2d 353 f；} ul。side _ nav Li div {显示：无；绝对位置：top : 2pxleft : 0；宽度： 225像素；背景： URL(泡泡_ top。gif)无重复右上方；} ul。side _ nav Li div p { margin : 7px 0；线高： 1.3 empadd : 0 5px 10px 30pxcolor 3360 # 444 background : URL(bubble _ btm。gif)无重复右下方；}/style脚本类型=' text/JavaScript ' src=' http :http://Ajax。谷歌api。com/Ajax/libs/jquery/1.4/jquery。量滴js/script脚本语言=' JavaScript ' $(文档)。ready(function(){ $(' ul。侧导航李' .悬停(function() { $(this)).查找(' div ').停止()。动画({ left: '210 '，opacity: 1 }，' fast ').css('display '，' block') }，function() { $(this).查找(' div ').停止()。animate({ left: '0 '，opacity: 0 }，' fast ')})；});/script/head body ul class=' side _ nav '阿利href=' www。柯蓝。cn ' corange。cn/a div pgo主页！Br /ASP/p/div /li阿利href='# '关于我/a divpGet认识我/p/div /li阿利href='# '投资组合/a divpGet查看我的专题作品！/p/div /li阿利/p/div /li阿利href='# '联系人/a分区请不要犹豫给我写信！/p/div /li阿利/p/div /li /ul /body /html