利用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 相关文章推荐
ext实现完整的登录代码
Aug 08 Javascript
JQuery 学习笔记 选择器之四
Jul 23 Javascript
js正确获取元素样式详解
Aug 07 Javascript
JQuery与iframe交互实现代码
Dec 24 Javascript
基于jQuery架构javascript基础体系
Jan 01 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
May 07 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 Javascript
利用jquery写的左右轮播图特效
Feb 12 Javascript
详解关于Vuex的action传入多个参数的问题
Feb 22 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
vue ssr服务端渲染(小白解惑)
Nov 10 Javascript
vue路由权限校验功能的实现代码
Jun 07 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
最贵的咖啡是怎么产生的,它的风味怎么样?
2021/03/04 新手入门
php错误级别的设置方法
2013/06/17 PHP
PHP微信模板消息操作示例
2017/06/29 PHP
php数据序列化测试实例详解
2017/08/12 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
ASP小贴士/ASP Tips javascript tips可以当桌面
2009/12/10 Javascript
return false;和e.preventDefault();的区别
2010/07/11 Javascript
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
使用BootStrapValidator完成前端输入验证
2016/09/28 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
python线程池threadpool实现篇
2018/04/27 Python
Python3.4解释器用法简单示例
2019/03/22 Python
pandas分组聚合详解
2020/04/10 Python
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
北美三大旅游网站之一:Travelocity加拿大
2016/08/20 全球购物
预备党员入党思想汇报
2014/01/04 职场文书
大学生志愿者感言
2014/01/15 职场文书
户外活动策划方案
2014/03/12 职场文书
学校献爱心活动总结
2014/07/08 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
2014年行政工作总结
2014/11/19 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
芙蓉镇观后感
2015/06/10 职场文书
追讨欠款律师函
2015/06/24 职场文书
公司周年庆典致辞
2015/07/30 职场文书
毕业欢送晚会主持词
2019/06/25 职场文书