利用jquery动画特效和css打造的侧边弹出垂直导航


Posted in Javascript onApril 04, 2014

这是一款利用jquery动画特效和css打造的侧边弹出垂直导航,整个弹出过程比较流畅,而且代码很简单,如果你正在寻找一款带动画的垂直导航,那么可以试试这个。下面是效果截图:

利用jquery动画特效和css打造的侧边弹出垂直导航 

HTML源码:

<title>Jquery+CSS侧边弹出垂直导航</title> 
<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(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(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(bubble_btm.gif) no-repeat right bottom; 
} 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.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> 
<ul class="side_nav"> 
<li> 
<a href="www.corange.cn">Corange.cn</a> 
<div><p>Go home!<Br />ASP</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>
Javascript 相关文章推荐
JavaScript面向对象设计二 构造函数模式
Dec 20 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 Javascript
微信小程序开发之Tabbar实例详解
Jan 09 Javascript
jQuery中用on绑定事件时需注意的事项
Mar 19 Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
BootStrap TreeView使用实例详解
Nov 01 Javascript
layui自定义插件citySelect实现省市区三级联动选择
Jul 26 Javascript
15分钟上手vue3.0(小结)
May 20 Javascript
详解用js代码触发dom事件的实现方案
Jun 10 Javascript
JS轻量级函数式编程实现XDM二
Jun 16 Javascript
调试代码导致IE出错的避免方法
Apr 04 #Javascript
javascript写的一个模拟阅读小说的程序
Apr 04 #Javascript
js 显示base64编码的二进制流网页图片
Apr 04 #Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 #Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 #Javascript
javascript移出节点removeChild()使用介绍
Apr 03 #Javascript
javascript 拷贝节点cloneNode()使用介绍
Apr 03 #Javascript
You might like
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
windows xp下安装pear
2006/12/02 PHP
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
编写Js代码要注意的几条规则
2010/09/10 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
简单介绍Python中的JSON使用
2015/04/28 Python
python绘图方法实例入门
2015/05/19 Python
Python装饰器基础详解
2016/03/09 Python
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
Django REST framework 分页的实现代码
2019/06/19 Python
Python模块的制作方法实例分析
2019/12/21 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
中国跨镜手机配件批发在线商店:TVC-Mall
2019/08/20 全球购物
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
教学大赛获奖感言
2014/01/15 职场文书
年终总结会主持词
2014/03/25 职场文书
《春天来了》教学反思
2014/04/07 职场文书
会计求职信
2014/05/29 职场文书
不错的求职信范文
2014/07/20 职场文书
四风对照检查材料范文
2014/09/27 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL