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 相关文章推荐
特殊字符、常规符号及其代码对照表
Jun 26 Javascript
表单提交时自动复制内容到剪贴板的js代码
Mar 16 Javascript
jqplot通过ajax动态画折线图的方法及思路
Dec 08 Javascript
jquery获取节点名称
Apr 26 Javascript
JS控制层作圆周运动的方法
Jun 20 Javascript
Angular 4.x 动态创建表单实例
Apr 25 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 Javascript
JavaScript实现简单动态进度条效果
Apr 06 Javascript
vue click.stop阻止点击事件继续传播的方法
Sep 04 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
图解JS原型和原型链实现原理
Sep 15 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
神族 PROTOSS 概述
2020/03/14 星际争霸
ucenter中词语过滤原理分析
2016/07/13 PHP
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
jquery select(列表)的操作(取值/赋值)
2011/03/16 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
js弹出窗口简单实现代码
2017/03/22 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
面包屑导航详解
2017/12/07 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
python中的hashlib和base64加密模块使用实例
2014/09/02 Python
django通过ajax发起请求返回JSON格式数据的方法
2015/06/04 Python
python验证码识别实例代码
2018/02/03 Python
Python操作mongodb数据库进行模糊查询操作示例
2018/06/09 Python
python如何生成网页验证码
2018/07/28 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
利用python和百度地图API实现数据地图标注的方法
2019/05/13 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
通过Python实现一个简单的html页面
2020/05/16 Python
python3实现将json对象存入Redis以及数据的导入导出
2020/07/16 Python
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
星空联盟C# .net笔试题
2014/12/05 面试题
酒店保安领班职务说明书
2014/03/04 职场文书
小学生作文评语
2014/04/18 职场文书
历史学专业求职信
2014/06/19 职场文书
拾金不昧锦旗标语
2014/06/27 职场文书
公司优秀员工获奖感言
2014/08/14 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书