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


Posted in Javascript onSeptember 22, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

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

Javascript 相关文章推荐
Javascript 面向对象 继承
May 13 Javascript
全面解析Bootstrap手风琴效果
Apr 17 Javascript
微信小程序链接传参并跳转新页面
Nov 29 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
微信小程序微信支付接入开发实例详解
Apr 12 Javascript
node.js 抓取代理ip实例代码
Apr 30 Javascript
vue2 中如何实现动态表单增删改查实例
Jun 09 Javascript
AngularJS中的作用域实例分析
May 16 Javascript
记一次vue-webpack项目优化实践详解
Feb 17 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 Javascript
通过js随机函数Math.random实现乱序
May 19 Javascript
微信小程序文章列表功能完整实例
Jun 03 Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 #Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 #Javascript
Java Mybatis框架入门基础教程
Sep 21 #Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 #Javascript
jQuery+HTML5美女瀑布流布局实现方法
Sep 21 #Javascript
JavaScript实现网页加载进度条代码超简单
Sep 21 #Javascript
Javascript验证方法大全
Sep 21 #Javascript
You might like
破解.net程序(dll文件)编译和反编译方法
2013/01/31 PHP
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
PHP打印输出函数汇总
2016/08/28 PHP
微信支付的开发流程详解
2016/09/13 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
页面使用密码保护代码
2013/04/10 Javascript
JS实现可改变列宽的table实例
2013/07/02 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
JS求平均值的小例子
2013/11/29 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
详解Javascript继承的实现
2016/03/25 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
详解React 元素渲染
2020/07/07 Javascript
树莓派+摄像头实现对移动物体的检测
2019/06/22 Python
pandas分批读取大数据集教程
2020/06/06 Python
2014村务公开实施方案
2014/02/25 职场文书
银行委托书范本
2014/04/04 职场文书
企业安全生产责任书范本
2014/07/28 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
迎国庆演讲稿
2014/09/15 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
2015年除四害工作总结
2015/07/23 职场文书
公司考勤管理制度
2015/08/04 职场文书
2016年安全月活动总结
2016/04/06 职场文书
2019大学生实习报告
2019/06/21 职场文书
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS