本文实例讲述了jQuery实现气球弹出框式的侧边导航菜单效果。分享给大家供大家参考。具体如下：

这是一款基于jQuery实现的气球弹出框式的侧边导航菜单，预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-alt-DLG-左侧-导航-菜单-样式-代码/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题泡沫弹出框式的侧边导航菜单/title meta http-equiv=' content-type ' content=' text/html；charset=GB 2312 ' 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(images/bubble _ btm。gif)无重复右下方；}/style脚本语言=' JavaScript ' src=' http : jquery-1。6 .2 .量滴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 ')})；});/脚本/流浆池预览时如果提示有错误，请刷新一下网页就没事了阿利主页/一个divpGo主页！/p/div /li阿利href='# '关于我/a分区请认识我/p/div /li阿利href='# '投资组合/a divpGet查看我的专题作品！/p/div /li阿利/p/div /li阿利href='# '联系人/a分区请不要犹豫给我写信！/p/div /li阿利/p/div /li/ul/body/html希望本文所述对大家的jQuery程序设计有所帮助。