利用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 - HTML的request类
Jul 15 Javascript
用js 让图片在 div或dl里 居中,底部对齐
Jan 21 Javascript
Jquery选择器 $实现原理
Dec 02 Javascript
20款效果非常棒的 jQuery 插件小结分享
Nov 18 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
全面理解闭包机制
Jul 11 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
Oct 25 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
Mar 06 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
小程序tab页无法传递参数的方法
Aug 03 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
如何冲泡挂耳包咖啡?技巧是什么
2021/03/04 冲泡冲煮
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
CI(CodeIgniter)框架介绍
2014/06/09 PHP
php文件操作相关类实例
2015/06/18 PHP
php注册登录系统简化版
2020/12/28 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
javascript一点特殊用法
2008/05/28 Javascript
修改jQuery Validation里默认的验证方法
2012/02/14 Javascript
js实现杯子倒水问题自动求解程序
2013/03/25 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
关于JS中二维数组的声明方法
2016/09/24 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python随机生成彩票号码的方法
2015/03/05 Python
Python 字符串转换为整形和浮点类型的方法
2018/07/17 Python
浅谈Pandas:Series和DataFrame间的算术元素
2018/12/22 Python
python 实现视频流下载保存MP4的方法
2019/01/09 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
Django实现内容缓存实例方法
2020/06/30 Python
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
新教师工作感言
2014/02/16 职场文书
cf战队收人广告词
2014/03/14 职场文书
房产分割协议书范文
2014/11/21 职场文书
经济纠纷起诉状
2015/05/20 职场文书
母亲节感言
2015/08/03 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python
AngularJS实现多级下拉框
2022/03/25 Javascript