利用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 相关文章推荐
JQuery 绑定事件时传递参数的实现方法
Oct 13 Javascript
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
利用json获取字符出现次数的代码
Mar 22 Javascript
关于textarea提交的内容无法换行的解决办法
Apr 09 Javascript
js鼠标悬浮出现遮罩层的方法
Jan 28 Javascript
jquery实现从数组移除指定的值
Jun 24 Javascript
js简单工厂模式用法实例
Jun 30 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 Javascript
百度搜索框智能提示案例jsonp
Nov 28 Javascript
javascript基础练习之翻转字符串与回文
Feb 20 Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 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
SONY ICF-SW55的电路分析
2021/03/02 无线电
PHP 裁剪图片成固定大小代码方法
2009/09/09 PHP
PHP获取当前页面完整URL的实现代码
2013/06/10 PHP
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
phpstudy2020搭建站点的实现示例
2020/10/30 PHP
JavaScript的变量作用域深入理解
2009/10/25 Javascript
javascript document.execCommand() 常用解析
2009/12/14 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
javascript处理table表格的代码
2010/12/06 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
2011/04/02 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
json数据与字符串的相互转化示例
2013/09/18 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
javascript中局部变量和全局变量的区别详解
2015/02/27 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
如何在python中实现随机选择
2019/11/02 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
python实现在列表中查找某个元素的下标示例
2020/11/16 Python
Pycharm安装第三方库失败解决方案
2020/11/17 Python
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
美国办公用品折扣网站:Shoplet.com
2019/11/24 全球购物
求职自荐信范文格式
2013/11/29 职场文书
学校办公室主任职责
2013/12/27 职场文书
志愿者活动总结报告
2014/06/27 职场文书
2014保险公司内勤工作总结
2014/12/16 职场文书
Java使用JMeter进行高并发测试
2021/11/23 Java/Android