您的位置：首页 > Web前端 > JavaScript

Javascript-网页编程-DHTML-下拉菜单

2016-07-16 16:53 471 查看

列表菜单

1、实现功能：点击菜单，显示菜单下的内容，再次点击，隐藏内容(允许和不允许同时打开多个菜单项)

[java] view
plain copy

<html>

  <head>

    <title>DHTML技术演示---菜单列表1</title>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <style type="text/css">

        /*老版本的IE支持，新版本不支持了

        dl{

            height:18px;

            overflow:hidden;

        }*/



        /*

        ul{

            //display:none;//不显示

            display:block;//块显示

        }

        */

        table {

            /*border:#ff80ff;*/

            width:80px;

        }



        table ul{

            list-style:none;

            margin:0px;

            padding:0px;

            background-color:#ff8000;

            display:none;

        }

        table td{

            /*border:#0000ff 1px solid;*/

            background:#80ff00;

        }



        table td a:link, table td a:visited{

            color:#8080c0;

            text-decoration:none;

        }

        table td a:hover{

            color:#0000ff;;

        }



        .open{

            display:block;

        }

        .close{

            display:none;

        }



     </style>



     <script type="text/javascript">

        /*当前菜单的开关切换，当点开其他菜单时，此菜单不会关闭

        function list(node){

            var oTdNode = node.parentNode;

            //alert( oTdNode.nodeName);//TD

            var oUlNode = oTdNode.getElementsByTagName("ul")[0];

            //alert( oUlNode.nodeName);//UL

            if( oUlNode.className =="open"){

                oUlNode.className ="close";

            }else{

                oUlNode.className ="open";

            }

        }

        */

        //实现当前菜单开关切换的同时，把其它菜单全部关闭，即只能打开一个菜单

        function list(node){

            var oTdNode = node.parentNode;

            var oUlNode = oTdNode.getElementsByTagName("ul")[0];

            //获取菜单表格(tableMenu)对象下的所有菜单块(Ul)对象

            var oTableNode = document.getElementById("tableMenu");

            var arrUlNodes = oTableNode.getElementsByTagName("ul");

            //遍历所有菜单块(Ul)对象，分别对它进行开关显示设置

            for(var x=0; x<arrUlNodes.length; x++){

                if(arrUlNodes[x]==oUlNode && oUlNode.className!="open"){

                    oUlNode.className ="open";//等价于：arrUlNodes[x].className ="open";

                }else{

                    arrUlNodes[x].className="close";

                }

            }

        }



     </script>

  </head>



  <body>

    <table id="tableMenu">

        <tr>

            <td>

                <a href="javascript:void(0)" onclick="list(this)">文件菜单</a>

                <ul>

                    <li>菜单项一</li>

                    <li>菜单项二</li>

                    <li>菜单项三</li>

                    <li>菜单项四</li>

                </ul>

            </td>

        </tr>

        <tr>

            <td>

                <a href="javascript:void(0)" onclick="list(this)">编辑菜单</a>

                <ul>

                    <li>菜单项一</li>

                    <li>菜单项二</li>

                    <li>菜单项三</li>

                    <li>菜单项四</li>

                </ul>

            </td>

        </tr>

        <tr>

            <td>

                <a href="javascript:void(0)" onclick="list(this)">调试菜单</a>

                <ul>

                    <li>菜单项一</li>

                    <li>菜单项二</li>

                    <li>菜单项三</li>

                    <li>菜单项四</li>

                </ul>

            </td>

        </tr>

    </table>



  </body>



</html>

2、实现功能：鼠标放在菜单条上时，显示菜单块，离开菜单条和菜单块时，隐藏菜单块，且鼠标放的行有颜色变化

[java] view
plain copy

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>列表菜单</title>

<style type="text/css">

    #newsid ul{

        list-style:none;

    }

    #newslist li{

        float:left;

        width:180px;

    }

    #newslist li ul{

        margin:0px;

        padding:0px;

    }

    #newslist li ul li{

        line-height:25px;

    }

    #newslist li a{

        display:block;

        color:#ffffff;

        background-color:#0066cc;

        text-decoration:none;

        line-height:25px;

        text-align:center;

    }

    #newslist li a:hover{

        color:#0066cc;

        background-color:#999999;

    }

    #newslist li ul a{

        color:#000000;

        background-color:#0099ff;

    }

    #newslist li ul li a:hover{

        color:#0066ff;

        background-color:#999999;

    }

    #newslist li ul{

        display:none;

    }

</style>

<script type="text/javascript">

    function list(liNode){

        var ulNode = liNode.getElementsByTagName("ul")[0];

        with(ulNode.style){

            display = display=="block"?"none":"block";

        }

    }

</script>

</head>

<body background="bg-img.jpg">



<div id="newsid">

    <ul id="newslist">

        <li onmouseover="list(this)"; onmouseout="list(this)" >

            <a href="javascript:void(0)">城院新闻</a>

            <ul style="display:none;">

                <li><a href="http://www.hncu.net/">校园新闻内容摘要</a></li>

                <li><a href="http://www.hncu.net/">校园新闻内容摘要</a></li>

                <li><a href="http://www.hncu.net/">校园新闻内容摘要</a></li>

                <li><a href="http://www.hncu.net/">校园新闻内容摘要</a></li>

            </ul>

        </li>

        <li onmouseover="list(this)"; onmouseout="list(this)" >

            <a href="javascript:void(0)">大学新闻</a>

            <ul style="display:none;">

                <li><a href="http://www.hncu.net/">大学新闻内容摘要</a></li>

                <li><a href="http://www.hncu.net/">大学新闻内容摘要</a></li>

                <li><a href="http://www.hncu.net/">大学新闻内容摘要</a></li>

                <li><a href="http://www.hncu.net/">大学新闻内容摘要</a></li>

            </ul>

        </li>

        <li onmouseover="list(this)"; onmouseout="list(this)" >

            <a href="javascript:void(0)">社会新闻</a>

            <ul style="display:none;">

                <li><a href="http://www.hncu.net/">社会新闻内容摘要</a></li>

                <li><a href="http://www.hncu.net/">社会新闻内容摘要</a></li>

                <li><a href="http://www.hncu.net/">社会新闻内容摘要</a></li>

                <li><a href="http://www.hncu.net/">社会新闻内容摘要</a></li>

            </ul>

        </li>

        <li onmouseover="list(this)"; onmouseout="list(this)" >

            <a href="javascript:void(0)">就业新闻</a>

            <ul style="display:none;">

                <li><a href="http://www.hncu.net/">就业新闻内容摘要</a></li>

                <li><a href="http://www.hncu.net/">就业新闻内容摘要</a></li>

                <li><a href="http://www.hncu.net/">就业新闻内容摘要</a></li>

                <li><a href="http://www.hncu.net/">就业新闻内容摘要</a></li>

            </ul>

        </li>



    </ul>



</div>



</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript dhtml 下拉菜单 html

相关文章推荐

新的分享

章节导航