利用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 字符串处理函数使用小结
Dec 02 Javascript
jquery获取tagName再进行判断
May 29 Javascript
jQuery实现3D文字特效的方法
Mar 10 Javascript
JavaScript生成二维码图片小结
Dec 27 Javascript
js基本算法:冒泡排序,二分查找的简单实例
Oct 08 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
Dec 28 Javascript
详解ECMAScript6入门--Class对象
Apr 27 Javascript
JavaScript实现换肤功能
Sep 15 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
vue 地图可视化 maptalks 篇实例代码详解
May 21 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
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
PHP+jquery实时显示网站在线人数的方法
2015/01/04 PHP
php获取当月最后一天函数分享
2015/02/02 PHP
jQuery调用WebService的实现代码
2011/06/19 Javascript
js网页实时倒计时精确到秒级
2014/02/10 Javascript
jQuery遍历对象、数组、集合实例
2014/11/08 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
js省市县三级联动效果实例
2020/04/15 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
基于 webpack2 实现的多入口项目脚手架详解
2017/06/26 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
JS函数节流和函数防抖问题分析
2017/12/18 Javascript
微信小程序实现聊天对话(文本、图片)功能
2018/07/06 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
2019/04/11 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
2020/11/05 Javascript
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
python访问系统环境变量的方法
2015/04/29 Python
详谈Python基础之内置函数和递归
2017/06/21 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
python函数map()和partial()的知识点总结
2020/05/26 Python
python利用pytesseract 实现本地识别图片文字
2020/12/14 Python
Python 带星号(* 或 **)的函数参数详解
2021/02/23 Python
中国旅游网站:同程旅游
2016/09/11 全球购物
kmart凯马特官网:美国最大的打折零售商和全球最大的批发商之一
2016/11/17 全球购物
Pat McGrath Labs官网:世界上最有影响力的化妆师推出的彩妆品牌
2018/01/07 全球购物
财务会计毕业生个人求职信
2014/02/03 职场文书
园林设计专业毕业生求职信
2014/03/23 职场文书
岗位聘任报告
2015/03/02 职场文书
培根随笔读书笔记
2015/07/01 职场文书
Python实现Hash算法
2022/03/18 Python
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python