铁雪资源网 Design By www.gsvan.com
本文实例讲述了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="/UploadFiles/2021-04-02/jquery-1.6.2.min.js">希望本文所述对大家的jQuery程序设计有所帮助。
铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无jQuery实现气球弹出框式的侧边导航菜单效果的评论...