利用jquery動(dòng)畫(huà)特效和css打造的側(cè)邊彈出垂直導(dǎo)航
更新時(shí)間：2014年04月04日 11:21:15 作者：
這是一款側(cè)邊彈出垂直導(dǎo)航，整個(gè)彈出過(guò)程比較流暢，而且代碼很簡(jiǎn)單,需要的朋友可以參考下
這是一款利用jquery動(dòng)畫(huà)特效和css打造的側(cè)邊彈出垂直導(dǎo)航，整個(gè)彈出過(guò)程比較流暢，而且代碼很簡(jiǎn)單，如果你正在尋找一款帶動(dòng)畫(huà)的垂直導(dǎo)航，那么可以試試這個(gè)。下面是效果截圖：
HTML源碼：
<title>Jquery+CSS側(cè)邊彈出垂直導(dǎo)航</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源碼：
復(fù)制代碼 代碼如下:
<title>Jquery+CSS側(cè)邊彈出垂直導(dǎo)航</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>
相關(guān)文章
jQuery控制圖片的hover效果（smartRollover.js）
圖片的hover效果可以用css來(lái)實(shí)現(xiàn)也可以用js來(lái)實(shí)現(xiàn)。典型的就是smartRollover.js2012-03-03
jQuery制作簡(jiǎn)潔的多級(jí)聯(lián)動(dòng)Select下拉框
省市多級(jí)聯(lián)動(dòng)的select下拉框有很多種實(shí)現(xiàn)方式，度娘上隨便一搜就一大堆，今天我們來(lái)討論的這款特效，代碼卻很簡(jiǎn)潔，兼容性也非常棒，推薦給大家。2014-12-12
傳遞參數(shù)的標(biāo)準(zhǔn)方法(jQuery.ajax)
jQuery.ajax傳遞參數(shù)的方法2008-11-11
一款接近完美的jquery浮動(dòng)層，會(huì)隨著滾動(dòng)條而自動(dòng)滾動(dòng)，始終維持在頁(yè)面的中間部分，利用浮動(dòng)層你可以制作一個(gè)QQ在線客服。2011-08-08
JQuery與Ajax常用代碼實(shí)現(xiàn)對(duì)比
JQuery與Ajax常用代碼實(shí)現(xiàn)對(duì)比，大家可以看下，根據(jù)實(shí)際情況選用。2009-10-10
解決jquery無(wú)法找到其他父級(jí)子集問(wèn)題的方法
這篇文章主要為大家詳細(xì)介紹了解決jquery無(wú)法找到其他父級(jí)子集問(wèn)題的方法，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要介紹了JQuery包裹DOM節(jié)點(diǎn)的方法,實(shí)例分析了wrap與wrapAll方法實(shí)現(xiàn)包裹DOM節(jié)點(diǎn)的技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2015-06-06
jquery實(shí)現(xiàn)（textarea）placeholder自動(dòng)換行
本文主要對(duì)jquery如何實(shí)現(xiàn)（textarea） placeholder自動(dòng)換行的方法、思路進(jìn)行介紹，下面就跟小編一起來(lái)看下吧2016-12-12
jquery教程限制文本框只能輸入數(shù)字和小數(shù)點(diǎn)示例分享
這篇文章主要介紹了JQuery限制文本框只能輸入數(shù)字和小數(shù)點(diǎn)的方法，大家參考使用吧2014-01-01
jQuery獲取文本節(jié)點(diǎn)之 text()/val()/html() 方法區(qū)別
在jquery中val,text,html都能取到值,或加一個(gè)參數(shù)來(lái)賦值,那么它們有些什么區(qū)別?2011-03-03