利用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 相关文章推荐
OfflineSave离线保存代码再次发布使用说明
May 23 Javascript
css图片自适应大小
Nov 28 Javascript
js 上传图片预览问题
Dec 06 Javascript
修改file按钮的默认样式实现代码
Apr 23 Javascript
js导出table到excel同时兼容FF和IE示例
Sep 03 Javascript
详解AngularJS的通信机制
Jun 18 Javascript
js图片轮播特效代码分享
Sep 07 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 Javascript
鸿蒙系统中的 JS 开发框架
Sep 18 Javascript
Vue3.0写自定义指令的简单步骤记录
Jun 27 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数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
php之Memcache学习笔记
2013/06/17 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
PHP中浮点数计算比较及取整不准确的解决方法
2015/01/09 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
JS 判断undefined的实现代码
2009/11/26 Javascript
基于jquery的表头固定的若干方法
2011/01/27 Javascript
遍历jquery对象的代码分享
2011/11/02 Javascript
处理及遍历XML文档DOM元素属性及方法整理
2013/08/23 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
Bootstrap项目实战之首页内容介绍(全)
2016/04/25 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
bootstrap网格系统使用方法解析
2017/01/13 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
element ui 对话框el-dialog关闭事件详解
2018/02/26 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
layui 给数据表格加序号的方法
2018/08/20 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
js实现简单进度条效果
2020/03/25 Javascript
Python  连接字符串(join %)
2008/09/06 Python
python3编写C/S网络程序实例教程
2014/08/25 Python
Pytorch 神经网络—自定义数据集上实现教程
2020/01/07 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
大学生怎样进行自我评价
2013/12/07 职场文书
总经理助理岗位职责
2015/01/31 职场文书