jQuery实现气球弹出框式的侧边导航菜单效果

本文实例讲述了jQuery实现气球弹出框式的侧边导航菜单效果。分享给大家供大家参考。具体如下：
这是一款基于jQuery实现的气球弹出框式的侧边导航菜单，预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。
运行效果截图如下：

在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-alt-dlg-left-nav-menu-style-codes/
具体代码如下：

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>泡沫弹出框式的侧边导航菜单</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><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（images/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（images/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（images/bubble_btm.gif） no-repeat right bottom;}</style><script language="javascript" src="jquery-1.6.2.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>预览时如果提示有错误，请刷新一下网页就没事了。<br><ul class="side_nav"><li><a href="#">Home</a><div><p>Go home！</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>

希望本文所述对大家的jQuery程序设计有所帮助。