zoukankan      html  css  js  c++  java
  • 下拉导航

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

    代码如下:

    <!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{150px; height:300px; position:fixed; left:100px; top:20px}
    .yiji{ 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{ 150px; display:none}
    .xiang21{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{ 150px; display:none}
    .xiang22{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{ 150px; display:none}
    .xiang23{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{ 700px; height:36px; border:1px solid #60F;}
    .list{ float:left; 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{ 100px; height:100px; position:relative; top:36px; left:-100px; background-color:#06C; display:none}
    #ej2{100px; height:100px; position:relative; top:36px; left:-100px; background-color:#9C3;display:none}
    #ej3{100px; height:100px; position:relative; top:36px; left:-100px; background-color:#F33;display:none}
    #ej4{100px; height:100px; position:relative; top:36px; left:-100px; background-color:#696;display:none}
    #ej5{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; 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;0px">
            	<div id="ej2"></div>
            </div>
        <div class="list" onmouseover="showc('ej3')" onmouseout="hidec('ej3')">活动中心</div>
        	<div style="float:left;0px">
            	<div id="ej3"></div>
            </div>
        <div class="list" onmouseover="showc('ej4')" onmouseout="hidec('ej4')">新闻中心</div>
        	<div style="float:left;0px">
            	<div id="ej4"></div>
            </div>
        <div class="list" onmouseover="showc('ej5')" onmouseout="hidec('ej5')">联系我们</div>
        	<div style="float:left;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>
    

      效果如图:

  • 相关阅读:
    将aaaa替换成aaba 分类: python 小练习 2013-10-28 18:28 246人阅读 评论(0) 收藏
    使用生成器返回fibs列表 分类: python Module python基础学习 2013-10-28 18:19 283人阅读 评论(0) 收藏
    python中的生成器(generator) 分类: python Module python基础学习 2013-10-28 17:41 310人阅读 评论(0) 收藏
    遇到的问题总结 分类: 问题总结 2013-10-28 17:21 263人阅读 评论(0) 收藏
    win7 下安装ipython 分类: python基础学习 software 2013-10-19 12:23 1383人阅读 评论(0) 收藏
    获取函数中的参数 分类: 正则表达式 2013-10-16 15:14 221人阅读 评论(0) 收藏
    使用termcolor模块 分类: python Module 2013-10-12 14:06 459人阅读 评论(0) 收藏
    Mysql启动失败
    java-抽象类
    java三大特性--多态(1)
  • 原文地址:https://www.cnblogs.com/bhmmlxieliming/p/6384425.html
Copyright © 2011-2022 走看看