Jquery 超炫的导航效果
2012-09-22 14:08
351 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>JS仿flash效果横向和竖向导航菜单 - 小未-http://write.blog.csdn.net/postlist</title>
<script type='text/javascript' src='roller.js' ></script>
<style>
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
/* =-=-=-=-=-=-=-[Nav 1]-=-=-=-=-=-=-=- */
#nav_container{
width:145px;
margin-left:30px;
margin-top:30px;
float:left;
}
#nav_container li{
padding:0px;
margin-bottom:1px;
}
#nav_container{
margin-left:30px;
}
#nav_container a:link,#nav_container a:visited,#nav_container a:active{
width:145px;
background: url(images/bg3.gif) -200px 0px repeat-x;
height:30px;
padding-top:5px;
padding-left:50px;
border-bottom:1px solid #777;
display:block;
text-decoration:none;
text-align:left;
font-weight:bold;
color:#333;
}
#nav_container a:hover{
color:#000;
background: url(images/bg3.gif) 0px 0px repeat-x;
}
/* =-=-=-=-=-=-=-[Nav 2]-=-=-=-=-=-=-=- */
#nav_container2{
width:145px;
margin-left:60px;
margin-top:30px;
float:left;
}
#nav_container2 li{
padding:0px;
margin-bottom:1px;
}
#nav_container2 a:link,#nav_container2 a:visited,#nav_container2 a:active{
width:145px;
background: url(images/bg2.gif) 0px 0px repeat-x;
font-weight:bold;
height:30px;
padding-top:5px;
padding-left:50px;
display:block;
text-align:left;
border-bottom:1px solid #777;
text-decoration:none;
color:#333;
}
#nav_container2 a:hover{
color:#000;
background: url(images/bg2.gif) 0px -45px repeat-x;
}
/* =-=-=-=-=-=-=-[Nav 3]-=-=-=-=-=-=-=- */
#nav_container3{
width:145px;
margin-left:60px;
margin-top:30px;
float:left;
}
#nav_container3 li{
padding:0px;
margin-bottom:1px;
}
#nav_container3 a:link,#nav_container3 a:visited,#nav_container3 a:active{
width:145px;
background: url(images/bg4.gif) -200px 0px repeat-x;
font-weight:bold;
height:30px;
padding-top:5px;
padding-left:50px;
display:block;
text-align:left;
border-bottom:1px solid #777;
text-decoration:none;
color:#333;
}
#nav_container3 a:hover{
color:#000;
background: url(images/bg4.gif) -24px 0px repeat-x;
}
/* =-=-=-=-=-=-=-[Nav 4]-=-=-=-=-=-=-=- */
#nav_container4{
width:788px;
margin-left:60px;
margin-top:30px;
float:left;
}
#nav_container4 li{
padding:0px;
margin-bottom:1px;
float:left;
border-right:1px solid #ccc;
border-left: 1px solid #888;
}
#nav_container4 a:link,#nav_container4 a:visited,#nav_container4 a:active{
width:145px;
background: url(images/bg5.gif) 0px -70px repeat-x;
font-weight:bold;
height:30px;
padding-top:5px;
display:block;
text-align:center;
border-bottom:1px solid #777;
text-decoration:none;
color:#333;
}
#nav_container4 a:hover{
color:#000;
background: url(images/bg5.gif) 0px 0px repeat-x;
}
/* =-=-=-=-=-=-=-[Nav 5]-=-=-=-=-=-=-=- */
#nav_container5{
width:145px;
margin-left:30px;
margin-top:30px;
float:left;
}
#nav_container5 li{
padding:0px;
margin-bottom:1px;
}
#nav_container5{
margin-left:30px;
}
#nav_container5 a:link,#nav_container5 a:visited,#nav_container5 a:active{
width:145px;
height:30px;
padding-top:5px;
padding-left:50px;
border-bottom:1px solid #777;
display:block;
text-decoration:none;
text-align:left;
font-weight:bold;
color:#333;
text-indent:-300px;
overflow:hidden;
}
#nav_container5 a:hover{
color:#000;
}
#nav_home{
background-image: url(images/bg7.gif);
background-position: 0px 0px;
}
#nav_home:hover{
background-image: url(images/bg7.gif);
background-position: 0px -45px;
}
#nav_about{
background-image: url(images/bg8.gif);
background-position: 0px 0px;
}
#nav_about:hover{
background-image: url(images/bg8.gif);
background-position: 0px -45px;
}
#nav_port{
background-image: url(images/bg9.gif);
background-position: 0px 0px;
}
#nav_port:hover{
background-image: url(images/bg9.gif);
background-position: 0px -45px;
}
#nav_con{
background-image: url(images/bg10.gif);
background-position: 0px 0px;
}
#nav_con:hover{
background-image: url(images/bg10.gif);
background-position: 0px -45px;
}
</style>
</head>
<body>
<div id="nav_container">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
<div id="nav_container2">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
<div id="nav_container3">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
<br/><br/>
<div style="clear:both;width:100%;"></div>
<div id="nav_container4">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
<br/><br/>
<div style="clear:both;width:100%;"></div>
<div id="nav_container5">
<ul>
<li>
<a id="nav_home" href="#">Home</a>
</li>
<li>
<a id="nav_about" href="#">About</a>
</li>
<li>
<a id="nav_port" href="#">Portfolio</a>
</li>
<li>
<a id="nav_con" href="#">Contact</a>
</li>
</ul>
</div>
<script>
roller.init('nav_container','h',-200,0,100,20);
roller.init('nav_container2','v',0,-45,100,20);
roller.init('nav_container3','h',-200,-24,100,20);
roller.init('nav_container4','v',-66,0,250,20);
roller.init('nav_container5','v',0,-45,80,15);
</script>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>JS仿flash效果横向和竖向导航菜单 - 小未-http://write.blog.csdn.net/postlist</title>
<script type='text/javascript' src='roller.js' ></script>
<style>
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
/* =-=-=-=-=-=-=-[Nav 1]-=-=-=-=-=-=-=- */
#nav_container{
width:145px;
margin-left:30px;
margin-top:30px;
float:left;
}
#nav_container li{
padding:0px;
margin-bottom:1px;
}
#nav_container{
margin-left:30px;
}
#nav_container a:link,#nav_container a:visited,#nav_container a:active{
width:145px;
background: url(images/bg3.gif) -200px 0px repeat-x;
height:30px;
padding-top:5px;
padding-left:50px;
border-bottom:1px solid #777;
display:block;
text-decoration:none;
text-align:left;
font-weight:bold;
color:#333;
}
#nav_container a:hover{
color:#000;
background: url(images/bg3.gif) 0px 0px repeat-x;
}
/* =-=-=-=-=-=-=-[Nav 2]-=-=-=-=-=-=-=- */
#nav_container2{
width:145px;
margin-left:60px;
margin-top:30px;
float:left;
}
#nav_container2 li{
padding:0px;
margin-bottom:1px;
}
#nav_container2 a:link,#nav_container2 a:visited,#nav_container2 a:active{
width:145px;
background: url(images/bg2.gif) 0px 0px repeat-x;
font-weight:bold;
height:30px;
padding-top:5px;
padding-left:50px;
display:block;
text-align:left;
border-bottom:1px solid #777;
text-decoration:none;
color:#333;
}
#nav_container2 a:hover{
color:#000;
background: url(images/bg2.gif) 0px -45px repeat-x;
}
/* =-=-=-=-=-=-=-[Nav 3]-=-=-=-=-=-=-=- */
#nav_container3{
width:145px;
margin-left:60px;
margin-top:30px;
float:left;
}
#nav_container3 li{
padding:0px;
margin-bottom:1px;
}
#nav_container3 a:link,#nav_container3 a:visited,#nav_container3 a:active{
width:145px;
background: url(images/bg4.gif) -200px 0px repeat-x;
font-weight:bold;
height:30px;
padding-top:5px;
padding-left:50px;
display:block;
text-align:left;
border-bottom:1px solid #777;
text-decoration:none;
color:#333;
}
#nav_container3 a:hover{
color:#000;
background: url(images/bg4.gif) -24px 0px repeat-x;
}
/* =-=-=-=-=-=-=-[Nav 4]-=-=-=-=-=-=-=- */
#nav_container4{
width:788px;
margin-left:60px;
margin-top:30px;
float:left;
}
#nav_container4 li{
padding:0px;
margin-bottom:1px;
float:left;
border-right:1px solid #ccc;
border-left: 1px solid #888;
}
#nav_container4 a:link,#nav_container4 a:visited,#nav_container4 a:active{
width:145px;
background: url(images/bg5.gif) 0px -70px repeat-x;
font-weight:bold;
height:30px;
padding-top:5px;
display:block;
text-align:center;
border-bottom:1px solid #777;
text-decoration:none;
color:#333;
}
#nav_container4 a:hover{
color:#000;
background: url(images/bg5.gif) 0px 0px repeat-x;
}
/* =-=-=-=-=-=-=-[Nav 5]-=-=-=-=-=-=-=- */
#nav_container5{
width:145px;
margin-left:30px;
margin-top:30px;
float:left;
}
#nav_container5 li{
padding:0px;
margin-bottom:1px;
}
#nav_container5{
margin-left:30px;
}
#nav_container5 a:link,#nav_container5 a:visited,#nav_container5 a:active{
width:145px;
height:30px;
padding-top:5px;
padding-left:50px;
border-bottom:1px solid #777;
display:block;
text-decoration:none;
text-align:left;
font-weight:bold;
color:#333;
text-indent:-300px;
overflow:hidden;
}
#nav_container5 a:hover{
color:#000;
}
#nav_home{
background-image: url(images/bg7.gif);
background-position: 0px 0px;
}
#nav_home:hover{
background-image: url(images/bg7.gif);
background-position: 0px -45px;
}
#nav_about{
background-image: url(images/bg8.gif);
background-position: 0px 0px;
}
#nav_about:hover{
background-image: url(images/bg8.gif);
background-position: 0px -45px;
}
#nav_port{
background-image: url(images/bg9.gif);
background-position: 0px 0px;
}
#nav_port:hover{
background-image: url(images/bg9.gif);
background-position: 0px -45px;
}
#nav_con{
background-image: url(images/bg10.gif);
background-position: 0px 0px;
}
#nav_con:hover{
background-image: url(images/bg10.gif);
background-position: 0px -45px;
}
</style>
</head>
<body>
<div id="nav_container">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
<div id="nav_container2">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
<div id="nav_container3">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
<br/><br/>
<div style="clear:both;width:100%;"></div>
<div id="nav_container4">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
<br/><br/>
<div style="clear:both;width:100%;"></div>
<div id="nav_container5">
<ul>
<li>
<a id="nav_home" href="#">Home</a>
</li>
<li>
<a id="nav_about" href="#">About</a>
</li>
<li>
<a id="nav_port" href="#">Portfolio</a>
</li>
<li>
<a id="nav_con" href="#">Contact</a>
</li>
</ul>
</div>
<script>
roller.init('nav_container','h',-200,0,100,20);
roller.init('nav_container2','v',0,-45,100,20);
roller.init('nav_container3','h',-200,-24,100,20);
roller.init('nav_container4','v',-66,0,250,20);
roller.init('nav_container5','v',0,-45,80,15);
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Jquery 超炫的导航效果
- Jquery 超炫的导航效果
- jquery实现的一个导航滚动效果具体代码
- jquery实现的仿天猫侧导航tab切换效果
- jquery实现的仿天猫侧导航tab切换效果
- 【jQuery】用jQuery实现定位滚动导航效果
- jQuery实现下滑菜单导航效果代码
- jquery实现导航吸顶效果
- jquery实现的横向二级导航效果代码
- jquery实现的横向二级导航效果代码
- jquery实现红色竖向多级向右展开的导航菜单效果
- jQuery实现个性翻牌效果导航菜单的方法
- jquery 实现斜导航效果
- jQuery实现的导航动画效果(附demo源码)
- jQuery实现的导航动画效果(附demo源码)
- jquery实现的一个导航滚动效果具体代码
- jQuery+css实现百度百科的页面导航效果
- jQuery实现带滚动导航效果的全屏滚动相册实例
- jQuery实现简洁的导航菜单效果