利用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的文字滚动跑马灯插件(一个页面多个滚动区)
Jul 26 Javascript
实现51Map地图接口(示例代码)
Nov 22 Javascript
jQuery 计算iframe 窗口大小的方法
May 13 Javascript
js注册时输入合法性验证方法
Oct 21 Javascript
微信小程序支付及退款流程详解
Nov 30 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
Vue中使用的EventBus有生命周期
Jul 12 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 Javascript
ES6 迭代器与可迭代对象的实现
Feb 11 Javascript
layui表格设计以及数据初始化详解
Oct 26 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 Javascript
javascript实现移动端红包雨页面
Jun 23 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 和 MySQL 基础教程(四)
2006/10/09 PHP
php时间戳转换的示例
2014/03/31 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
轻松实现php文件上传功能
2017/02/17 PHP
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
2012/02/03 Javascript
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
javascript实现列表滚动的方法
2015/07/30 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
jQuery日程管理插件fullcalendar使用详解
2017/01/07 Javascript
JavaScript中常见内置函数用法示例
2018/05/14 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
2020/12/30 jQuery
python+django+sql学生信息管理后台开发
2018/01/11 Python
Python实现Kmeans聚类算法
2020/06/10 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
python K近邻算法的kd树实现
2018/09/06 Python
Python 读写文件的操作代码
2018/09/20 Python
python for 循环获取index索引的方法
2019/02/01 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
python全局变量引用与修改过程解析
2020/01/07 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
请说出你所知道的线程同步的方法
2013/04/19 面试题
介绍一下EJB的分类及其各自的功能及应用
2016/08/23 面试题
大学生求职工作的自我评价
2014/02/13 职场文书
物业管理毕业生的自我评价
2014/02/17 职场文书
放飞中国梦演讲稿
2014/04/23 职场文书
单位委托书格式范本
2014/09/29 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python