利用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 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
超级酷和最实用的jQuery实例收集(20个)
Apr 21 Javascript
js给页面加style无效果的解决方法
Jan 20 Javascript
node.js中的path.isAbsolute方法使用说明
Dec 08 Javascript
JQuery跳出each循环的方法
Apr 16 Javascript
基于jquery实现全屏滚动效果
Nov 26 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 Javascript
对layui初始化列表的CheckBox属性详解
Sep 13 Javascript
openlayers 3实现车辆轨迹回放
Sep 24 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
浅谈php优化需要注意的地方
2014/11/27 PHP
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
javascript中HTMLDOM操作详解
2014/12/11 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
如何利用JSHint减少JavaScript的错误
2016/08/23 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
jQuery纵向导航菜单效果实现方法
2016/12/19 Javascript
jQuery实现基本淡入淡出效果的方法详解
2018/09/05 jQuery
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
node 版本切换的实现
2020/02/02 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
Python标准库inspect的具体使用方法
2017/12/06 Python
EM算法的python实现的方法步骤
2018/01/02 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
python实现批量文件重命名
2019/10/31 Python
python psutil监控进程实例
2019/12/17 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
详解如何在css3打包后自动追加前缀插件:autoprefixer
2018/12/18 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
初中英语课后反思
2014/04/25 职场文书
煤矿安全承诺书
2014/05/22 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书