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 相关文章推荐
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 Javascript
jquery图片不完全按比例自动缩小的简单代码
Jul 29 Javascript
SuperSlide2实现图片滚动特效
Jun 20 Javascript
jQuery中index()的用法分析
Sep 05 Javascript
jQuery中prevUntil()方法用法实例
Jan 08 Javascript
js检测iframe是否加载完成的方法
Nov 26 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 Javascript
JS实现星星海特效
Dec 24 Javascript
Vue 样式切换及三元判断样式关联操作
Aug 09 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
create-react-app开发常用配置教程
Jun 25 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
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
js中window.open打开一个新的页面
2014/08/10 Javascript
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
完美解决IE9浏览器出现的对象未定义问题
2016/09/29 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
2017/05/27 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
2017/09/07 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
2018/02/26 Javascript
[48:53]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第一场
2014/05/26 DOTA
深入理解python函数递归和生成器
2016/06/06 Python
python操作mysql数据库
2017/03/05 Python
python实现顺序表的简单代码
2018/09/28 Python
对python 生成拼接xml报文的示例详解
2018/12/28 Python
使用python判断jpeg图片的完整性实例
2019/06/10 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
自定义Django_rest_framework_jwt登陆错误返回的解决
2020/10/18 Python
详解Python模块化编程与装饰器
2021/01/16 Python
学员自我鉴定
2014/03/19 职场文书
供应链金融服务方案
2014/05/25 职场文书
服务宗旨标语
2014/07/01 职场文书
少年雷锋观后感
2015/06/10 职场文书
九年级语文教学反思
2016/03/03 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书
Python中Permission denied的解决方案
2021/04/02 Python
python自动化八大定位元素讲解
2021/07/09 Python