利用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的clone方法应用于textarea和select的bug修复
Jun 26 Javascript
JavaScript实现将xml转换成html table表格的方法
Apr 17 Javascript
常见的javascript跨域通信方法
Dec 31 Javascript
Bootstrap面板使用方法
Jan 16 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
vue中多个倒计时实现代码实例
Mar 27 Javascript
微信小程序实现轨迹回放的示例代码
Dec 13 Javascript
javascript实现支付宝滑块验证码效果
Jul 24 Javascript
JS实现简易贪吃蛇游戏
Aug 24 Javascript
js实现简单的无缝轮播效果
Sep 05 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 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遍历目录函数opendir()、readdir()、closedir()、rewinddir()总结
2014/11/18 PHP
ajax+php控制所有后台函数调用
2015/07/15 PHP
Symfony2在Nginx下的配置方法图文教程
2016/02/04 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
php 可变函数使用小结
2018/06/12 PHP
PHP SESSION机制的理解与实例
2019/03/22 PHP
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
2006/12/06 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
2013/02/05 Javascript
jquery清空表单数据示例分享
2014/02/13 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
跟老齐学Python之用while来循环
2014/10/02 Python
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
详解用python写网络爬虫-爬取新浪微博评论
2019/05/10 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
python爬虫利用代理池更换IP的方法步骤
2021/02/21 Python
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
2019/09/27 HTML / CSS
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
乡镇纠风工作实施方案
2014/03/22 职场文书
个人银行贷款担保书
2014/04/01 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书
酒桌上的祝酒词
2015/08/12 职场文书
小学四年级班主任工作经验交流材料
2015/11/02 职场文书
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python