利用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 相关文章推荐
javascript multibox 全选
Mar 22 Javascript
基于Jquery的实现回车键Enter切换焦点
Sep 14 Javascript
JQuery入门—编写一个简单的JQuery应用案例
Jan 03 Javascript
eclipse导入jquery包后报错的解决方法
Feb 17 Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
JavaScript动态添加css样式和script标签
Jul 19 Javascript
收藏AngularJS中最重要的核心功能
Jul 09 Javascript
jquery中done和then的区别(详解)
Dec 19 jQuery
如何在JavaScript中创建具有多个空格的字符串?
Feb 23 Javascript
基于vue实现简易打地鼠游戏
Aug 21 Javascript
vue实现树状表格效果
Dec 29 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
DC动漫人物排行
2020/03/03 欧美动漫
PHP伪静态页面函数附使用方法
2008/06/20 PHP
php 文件上传代码(限制jpg文件)
2010/01/05 PHP
php二维数组转成字符串示例
2014/02/17 PHP
PHP中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
php生成二维码
2015/08/10 PHP
thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
2018/09/07 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
JS学习笔记之数组去重实现方法小结
2019/05/29 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
[02:41]2015国际邀请赛中国区预选赛观战指南
2015/05/20 DOTA
python模拟Django框架实例
2016/05/17 Python
Python端口扫描简单程序
2016/11/10 Python
Python对字符串实现去重操作的方法示例
2017/08/11 Python
python分布式环境下的限流器的示例
2017/10/26 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
Python能做什么
2020/06/02 Python
python爬虫多次请求超时的几种重试方法(6种)
2020/12/01 Python
如何用css3实现switch组件开关的方法
2018/02/09 HTML / CSS
详解HTML5中的标签
2015/06/19 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
安全生产汇报材料
2014/02/17 职场文书
新闻专业毕业生英文求职信
2014/03/19 职场文书
太空授课观后感
2015/06/17 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
python 如何在 Matplotlib 中绘制垂直线
2021/04/02 Python
如何使用SQL Server语句创建表
2022/04/12 SQL Server