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

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

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

运行效果截图如下：

在线演示地址如下：

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

泡沫弹出框式的侧边导航菜单

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;

}

$(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")

});

});

预览时如果提示有错误，请刷新一下网页就没事了。

• Home

  Go home!

• About Me

  Get to know me.

• Portfolio

  Get to check out my featured work!

• Blog

  Tutorials, articles and resources.

• Contact

  Don't hesitate to drop me a line!

• Rss

  News, Video and so on.

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