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

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-alt-dlg-left-nav-menu-style-codes/

具体代码如下：

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;
}





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


  

    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程序设计有所帮助。