利用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把表单元素变为json对象
Nov 06 Javascript
jquery实现图片灯箱明暗的遮罩效果
Nov 15 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 Javascript
javascript获取select标签选中的值
Jun 04 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
D3.js实现散点图和气泡图的方法详解
Sep 21 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
图片懒加载imgLazyLoading.js使用详解
Sep 15 Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 Javascript
js实现简易点击切换显示或隐藏
Nov 29 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
《星际争霸重制版》兵种对比图鉴
2020/03/02 星际争霸
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
PHP isset()与empty()的使用区别详解
2017/02/10 PHP
php UNIX时间戳用法详解
2017/02/16 PHP
javascript 动态添加表格行
2006/06/22 Javascript
Javascript----文件操作
2007/01/18 Javascript
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
jquery 之 $().hover(func1, funct2)使用方法
2012/06/14 Javascript
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
angularJS提交表单(form)
2015/02/09 Javascript
angularJS 入门基础
2015/02/09 Javascript
jQuery插件pagination实现分页特效
2015/04/12 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
完美解决IE9浏览器出现的对象未定义问题
2016/09/29 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
详解分布式任务队列Celery使用说明
2018/11/29 Python
Django中使用session保持用户登陆连接的例子
2019/08/06 Python
基于matplotlib xticks用法详解
2020/04/16 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
Python3中小括号()、中括号[]、花括号{}的区别详解
2020/11/15 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
澳洲的服装老品牌:SABA
2018/02/06 全球购物
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
程序集与命名空间有什么不同
2014/07/25 面试题
小学六年级学生评语
2014/04/22 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
javascript实现计算器功能详解流程
2021/11/01 Javascript