下拉导航

竖向 下拉导航 单击打开 再单击关闭

代码如下：

<!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>无标题文档</title>
<style type="text/css">
*{ margin:0px auto; padding:0px}
#menu{width:150px; height:300px; position:fixed; left:100px; top:20px}
.yiji{ width:150px; height:35px; background-color:#63C; border:1px solid white; text-align:center; line-height:35px; vertical-align:middle; color:white; font-weight:bold}
#erji1{ width:150px; display:none}
.xiang21{width:150px; height:35px; background-color:#F96; border:1px solid white; text-align:center; line-height:35px; vertical-align:middle; color:white; font-weight:bold}
#erji2{ width:150px; display:none}
.xiang22{width:150px; height:35px; background-color:#F96; border:1px solid white; text-align:center; line-height:35px; vertical-align:middle; color:white; font-weight:bold}
#erji3{ width:150px; display:none}
.xiang23{width:150px; height:35px; background-color:#F96; border:1px solid white; text-align:center; line-height:35px; vertical-align:middle; color:white; font-weight:bold}*/
</style>
</head>

<body>
<div id="menu">
	<div class="yiji" onclick="showa('erji1')">
    	首页
    </div>
    <div id="erji1">
    	<div class="xiang21">首页1</div>
        <div class="xiang21">首页2</div>
        <div class="xiang21">首页3</div>
    </div>
    
    
    <div class="yiji" onclick="showa('erji2')">
    	产品中心
    </div>
    <div id="erji2">
    	<div class="xiang22">产品1</div>
        <div class="xiang22">产品2</div>
        <div class="xiang22">产品3</div>
    </div>
    
    <div class="yiji" onclick="showa('erji3')">
    	活动中心
    </div>
    <div id="erji3">
    	<div class="xiang23">活动1</div>
        <div class="xiang23">活动2</div>
        <div class="xiang23">活动3</div>
    </div>
</body>
<script type="text/javascript">
function showa(d)
{
	//找对应的二级菜单
	var ej = document.getElementById(d);
	if(ej.style.display=="block")
	{
		ej.style.display="none";
	}
	else
	{
		ej.style.display = "block";
	}
}
</script>

</html>

　　效果如图：

横向 下拉导航 单击打开 再单击关闭

代码如下：

<!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>无标题文档</title>
<style type="text/css">
*{ margin:0px auto; padding:0px}
#heng{ width:700px; height:36px; border:1px solid #60F;}
.list{ float:left; width:100px; height:36px; text-align:center; line-height:36px; vertical-align:middle; font-weight:bold}
.list:hover{ cursor:pointer; background-color:#63F; color:white;}
#ej1{ width:100px; height:100px; position:relative; top:36px; left:-100px; background-color:#06C; display:none}
#ej2{width:100px; height:100px; position:relative; top:36px; left:-100px; background-color:#9C3;display:none}
#ej3{width:100px; height:100px; position:relative; top:36px; left:-100px; background-color:#F33;display:none}
#ej4{width:100px; height:100px; position:relative; top:36px; left:-100px; background-color:#696;display:none}
#ej5{width:100px; height:100px; position:relative; top:36px; left:-100px; background-color:#FF3;display:none}
.s{ widows:100px; height:30px; text-align:center; vertical-align:middle; line-height:30px;}

</style>
</head>
<body>
</div>
<div id="heng">

	<div class="list" onmouseover="showc('ej1')" onmouseout="hidec('ej1')">首页</div>
    	<div style="float:left; width:0px">
        	<div id="ej1">
            	<div class="s">首页1</div>
                <div class="s">首页2</div>
                <div class="s">首页3</div>
            </div>
        </div>
    <div class="list" onmouseover="showc('ej2')" onmouseout="hidec('ej2')">产品中心</div>
    	<div style="float:left;width:0px">
        	<div id="ej2"></div>
        </div>
    <div class="list" onmouseover="showc('ej3')" onmouseout="hidec('ej3')">活动中心</div>
    	<div style="float:left;width:0px">
        	<div id="ej3"></div>
        </div>
    <div class="list" onmouseover="showc('ej4')" onmouseout="hidec('ej4')">新闻中心</div>
    	<div style="float:left;width:0px">
        	<div id="ej4"></div>
        </div>
    <div class="list" onmouseover="showc('ej5')" onmouseout="hidec('ej5')">联系我们</div>
    	<div style="float:left;width:0px">
        	<div id="ej5"></div>
        </div>

</div>
<script type="text/javascript">
function showc(d)
{
	var ej = document.getElementById(d);
	ej.style.display="block";
}

function hidec(d)
{
	var ej = document.getElementById(d);
	ej.style.display="none";
}

</script>
</body>
</html>

　　效果如图：

posted @ 2017-02-09 22:11  心若微漪  阅读(211)  评论(0)    收藏  举报