本文實例講述了jQuery實現氣球彈出框式的側邊導航菜單效果。分享給大家供大家參考。具體如下：
這是一款基于jQuery實現的氣球彈出框式的側邊導航菜單，預覽效果時左下角會提示錯誤，而且看不到效果，刷新一下就可以看到效果了；當然，在實際使用中，不會出現這樣的問題。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/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程序設計有所幫助。
新聞熱點
疑難解答
