提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

利用jquery动画特效和css打造的侧边弹出垂直导航

jQuery动画CSS 利用 打造 导航 特效 垂直
2023-06-13 09:15:24 时间
这是一款利用jquery动画特效和css打造的侧边弹出垂直导航，整个弹出过程比较流畅，而且代码很简单，如果你正在寻找一款带动画的垂直导航，那么可以试试这个。下面是效果截图：

 

HTML源码：
复制代码代码如下:

<title>Jquery+CSS侧边弹出垂直导航</title>
<styletype="text/css">
html,body,ul,li{
margin:0;
padding:0;
border:0;
outline:0;
vertical-align:baseline;
font-family:"Verdana","lucidasans",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_navli{
position:relative;
float:left;
margin:0;
padding:0;
display:inline;
}
ul.side_navlia{
width:165px;
border-top:1pxsolid#3373a9;
border-bottom:1pxsolid#003867;
padding:10px10px10px25px;
display:block;
color:#fff;
text-decoration:none;
background:#005094url(sidenav_arrow.gif)no-repeat5px10px;
position:relative;
z-index:2;
}
ul.side_navlia:hover{
background-color:#2d353f;
}
ul.side_navlidiv{
display:none;
position:absolute;
top:2px;
left:0;
width:225px;
background:url(bubble_top.gif)no-repeatrighttop;
}
ul.side_navlidivp{
margin:7px0;
line-height:1.3em;
padding:05px10px30px;
color:#444;
background:url(bubble_btm.gif)no-repeatrightbottom;
}
</style>
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js
"></script>
<scriptlanguage="javascript">
$(document).ready(function(){

$("ul.side_navli").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>
<ulclass="side_nav">
<li>
<ahref="www.corange.cn">Corange.cn</a>

<div><p>Gohome!<Br/>ASP</p></div>
</li>
<li>
<ahref="#">AboutMe</a>
<div><p>Gettoknowme.</p></div>
</li>
<li>

<ahref="#">Portfolio</a>
<div><p>Gettocheckoutmyfeaturedwork!</p></div>
</li>
<li>
<ahref="#">Blog</a>
<div><p>Tutorials,articlesandresources.</p></div>
</li>

<li>
<ahref="#">Contact</a>
<div><p>Don"thesitatetodropmealine!</p></div>
</li>
<li>
<ahref="#">Rss</a>
<div><p>News,Videoandsoon.</p></div>
</li>
</ul>
</body>
</html>

相关文章