利用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实现的分页函数
Feb 07 Javascript
如何设置一定时间内只能发送一次请求
Feb 28 Javascript
使用JS取得焦点(focus)元素代码
Mar 22 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
js单独获取一个checkbox看其是否被选中
Sep 22 Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
May 12 Javascript
如何提升vue.js中大型数据的性能
Jun 21 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
Jul 21 Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 Javascript
vue引入Excel表格插件的方法
Apr 28 Vue.js
调试代码导致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中取得文件的后缀名?
2012/02/20 PHP
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
phpize的深入理解
2013/06/03 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
浅谈Javascript中匀速运动的停止条件
2014/12/19 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
2017/04/13 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
jQuery使用bind函数实现绑定多个事件的方法
2017/10/11 jQuery
JSON数据中存在单个转义字符“\”的处理方法
2018/07/11 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
Flask框架的学习指南之用户登录管理
2016/11/20 Python
Python实现二维数组按照某行或列排序的方法【numpy lexsort】
2017/09/22 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
python实现批量解析邮件并下载附件
2018/06/19 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
tensorflow如何继续训练之前保存的模型实例
2020/01/21 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
CSS3实现超酷的黑猫警长首页
2016/04/26 HTML / CSS
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
高等教育学自荐书范文
2014/02/10 职场文书
有创意的广告词
2014/03/18 职场文书
村主任个人对照检查材料
2014/10/01 职场文书
临时用工协议书范本
2014/10/29 职场文书
感谢信范文大全
2015/01/23 职场文书