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 相关文章推荐
window.location 对象所包含的属性
Oct 10 Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 Javascript
JS+CSS实现美化的下拉列表框效果
Aug 11 Javascript
jQuery+json实现的简易Ajax调用实例
Dec 14 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
深入浅出ES6之let和const命令
Aug 25 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
使用vue-resource进行数据交互的实例
Sep 02 Javascript
基于vue、react实现倒计时效果
Aug 26 Javascript
Webpack中SplitChunksPlugin 配置参数详解
Mar 24 Javascript
详解vue3.0 的 Composition API 的一种使用方法
Oct 26 Javascript
vue+iview实现文件上传
Nov 17 Vue.js
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
星际争霸中的热键
2020/03/04 星际争霸
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
php自定文件保存session的方法
2014/12/10 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
php创建桌面快捷方式实现方法
2015/12/31 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
CI框架扩展系统核心类的方法分析
2016/05/23 PHP
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
JQuery实现定时刷新功能代码
2017/05/09 jQuery
Async Validator 异步验证使用说明
2017/07/03 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
linux安装Python3.4.2的操作方法
2018/09/28 Python
python实现写数字文件名的递增保存文件方法
2018/10/25 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
python异步编程 使用yield from过程解析
2019/09/25 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
Python基于callable函数检测对象是否可被调用
2020/10/16 Python
法国足球商店:Footcenter
2019/07/06 全球购物
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
新东方旗下远程教育网站:新东方在线
2020/03/19 全球购物
广州盈通面试题
2015/12/05 面试题
党的群众路线教育实践活动公开承诺书
2014/03/28 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
教育合作协议范本
2014/10/17 职场文书
好媳妇事迹材料
2014/12/24 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
复兴之路观后感
2015/06/02 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
css3 文字断裂效果
2022/04/22 HTML / CSS
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技