仿站长站滑动门导航效果



搜了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>

Categories: 设计布局

Leave a Comment