利用jquery动画特效和css打造的侧边弹出垂直导航
更新时间：2014年04月04日 11:21:15 作者：
这是一款侧边弹出垂直导航，整个弹出过程比较流畅，而且代码很简单,需要的朋友可以参考下
这是一款利用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>
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>
相关文章
jQuery控制图片的hover效果（smartRollover.js）
图片的hover效果可以用css来实现也可以用js来实现。典型的就是smartRollover.js2012-03-03
省市多级联动的select下拉框有很多种实现方式，度娘上随便一搜就一大堆，今天我们来讨论的这款特效，代码却很简洁，兼容性也非常棒，推荐给大家。2014-12-12
jQuery.ajax传递参数的方法2008-11-11
一款接近完美的jquery浮动层，会随着滚动条而自动滚动，始终维持在页面的中间部分，利用浮动层你可以制作一个QQ在线客服。2011-08-08
JQuery与Ajax常用代码实现对比，大家可以看下，根据实际情况选用。2009-10-10
这篇文章主要为大家详细介绍了解决jquery无法找到其他父级子集问题的方法，感兴趣的小伙伴们可以参考一下2016-05-05
这篇文章主要介绍了JQuery包裹DOM节点的方法,实例分析了wrap与wrapAll方法实现包裹DOM节点的技巧与相关注意事项,需要的朋友可以参考下2015-06-06
jquery实现（textarea）placeholder自动换行
本文主要对jquery如何实现（textarea） placeholder自动换行的方法、思路进行介绍，下面就跟小编一起来看下吧2016-12-12
这篇文章主要介绍了JQuery限制文本框只能输入数字和小数点的方法，大家参考使用吧2014-01-01
jQuery获取文本节点之 text()/val()/html() 方法区别
在jquery中val,text,html都能取到值,或加一个参数来赋值,那么它们有些什么区别?2011-03-03
最新评论