仿站长站滑动门导航效果
November 27th, 2007
搜了blueidea论坛之后才知道，这叫滑动门导航效果，顾名思义，就是鼠标滑动到导航链接处，可以无刷新显示下级菜单。
收藏一个韩国滑动门效果导航网站：http://www.priden.com/ 只是导航CSS效果不一样，实现原理都一样的，有空的时候模仿一个priden的效果。
这个效果在做cms模板时比较有用的。效果查看：chinaznav.html
程序代码<%@LANGUAGE=”VBSCRIPT” CODEPAGE=”936″%>
<!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=gb2312″ />
<title>滑动门导航实例</title>
<style type=”text/css”>
body{
margin: 0; padding: 0;
background: #fff ;
font-family: Verdana, Geneva, Arial; font-size: 12px; color:#000;
line-height: 15px;
}
#navbar{
background: #f6f6f6 ;
margin: 6px 0 0 0;
width: 770px; color: #626262; height:30px; line-height: 28px;
}
#navbar ul{
}
#navbar li{
float: left;
list-style-type: none;
height: 28px;
line-height: 28px;
text-align: center;
margin-right: 10px;
}
#navbar a{
margin: 0px 2px 0 0;
padding: 5px 9px 8px 10px;
color: #626262;
background: inherit;
text-decoration: none;
}
#navbar a:hover{
background-color: #33ADDB;
border-top: 1px solid #2491BE;
color: #FFFFFF;
}
#nav{width: 770px; background-color: #33ADDB; height:25px; line-height: 25px; color: Maroon;}
#nav a{
margin: 0px 2px 0 0;
padding: 5px 9px 5px 10px;
color: #fff;
text-decoration: none;
}
#nav a:hover{ text-decoration: underline;}
#nav ul{}
#nav li{ float:left; list-style-type:none; margin-right:10px;}
.hide{ display:none;}
</style>
<script language=”JavaScript” type=”text/javascript” >
<!–
/*
function hideNav(idName)
{
document.getElementById(idName).className = ‘hide’;
}
function showNav(idName)
{
document.getElementById(idName).className = ‘show’;
}
*/
//–>
function showCurrentDiv(num)
{
var divNum = document.getElementById(‘nav’).getElementsByTagName(‘div’);
for (var i=0;i<divNum.length ;i++ )
{
divNum[i].style.display = ‘none’;
}
divNum[num].style.display = ‘block’;
}
</script>
</head>
<body>
<center>
<div id=”navbar”>
<ul>
<li><a href=”#”onmousemove=”showCurrentDiv(0)” >网站首页</a></li>
<li><a href=”#”onmousemove=”showCurrentDiv(1)”>个人求职</a></li>
<li><a href=”#”onmousemove=”showCurrentDiv(2)”>企业招聘</a></li>
</ul>
</div>
<div id=”nav”>
<div class=”hide”>这是首页</div>
<div class=”hide”>
<ul>
<li><a href=”#”>求职一</a></li>
<li><a href=”#”>求职二</a></li>
<li><a href=”#”>求职三</a></li>
</ul>
</div>
<div class=”hide”>
<ul>
<li><a href=”#”>招聘一</a></li>
<li><a href=”#”>招聘二</a></li>
<li><a href=”#”>招聘三</a></li>
</ul>
</div>
</div>
</center>
</body>
</html>
Recent Comments