利用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 相关文章推荐
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
Oct 11 Javascript
javascript避免数字计算精度误差的方法详解
Mar 05 Javascript
判断一个对象是否为jquery对象的方法
Mar 12 Javascript
Javascript中浮点数相乘的一个解决方法
Jun 03 Javascript
js中setTimeout的妙用--防止循环超时
Mar 06 Javascript
利用JS测试目标网站的打开响应速度
Dec 01 Javascript
JS的Ajax与后端交互数据的实例
Aug 08 Javascript
解决layui-open关闭自身窗口的问题
Sep 10 Javascript
2019最新21个MySQL高频面试题介绍
Feb 06 Javascript
JS中作用域以及变量范围分析
Jul 18 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 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
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
javascript中的void运算符语法及使用介绍
2013/03/10 Javascript
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
jQuery插件支持同一页面被多次调用
2016/02/14 Javascript
理解javascript封装
2016/02/23 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
jQuery插件实现图片轮播特效
2016/06/16 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
JSON与js对象序列化实例详解
2017/03/16 Javascript
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
Python 使用type来定义类的实现
2019/11/19 Python
python字符串判断密码强弱
2020/03/18 Python
你应该知道的30个css选择器
2014/03/19 HTML / CSS
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
大学团支书的自我评价分享
2013/12/14 职场文书
酒店副总岗位职责
2013/12/24 职场文书
音乐教育感言
2014/03/05 职场文书
家长写给孩子的评语
2014/04/18 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书