JavaScript语言基础---(十五)应用编程练习--制作二级下拉菜单

最新推荐文章于 2022-09-12 01:08:12 发布

罗隽_jerChuan

最新推荐文章于 2022-09-12 01:08:12 发布

阅读量367

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_31678809/article/details/71577293

版权

javascript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

思路：我们通过onmouseover以及onmouseout方法来进行li（菜单栏项）标签上的下拉控制。并通过从方法修改li下的ul（每一个菜单项的子项块）的display进行显示和隐藏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>DHTML技术综合演示---示例:下拉风格的菜单条</title>
        <style type="text/css">
            #newslist{
                list-style:none;
            }
            #newslist ul{
                list-style:none;
                margin:0px;
                padding:0px;
            }
            #newslist li{
                float:left;
                width:180px;
            }
            #newslist li a{
                display:block;
                color:#ffffff;
                background-color:#0066cc;
                text-decoration:none;
                line-height:25px;
                text-align:center;
            }

            #newslist li a:hover{
                color:#ff66cc;
                background-color:#999999;
            }

            #newslist li a{
                background-color:#0099ff;
            }
        </style>

        <script type="text/javascript">
            function list(oLiNode){
                var oUlNode = oLiNode.getElementsByTagName("ul")[0];
                //alert(oUlNode.nodeName);
                //oUlNode.style.display = oUlNode.style.display=="block"? "none":"block";
                with(oUlNode.style){
                    display = display=="block"? "none":"block";
                }
            }

        </script>
    </head>

    <body>
  <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="${new1Url}">校园新闻内容摘要</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>

罗隽_jerChuan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript语言基础---(十五)应用编程练习--制作二级下拉菜单

思路：我们通过onmouseover以及onmouseout方法来进行li（菜单栏项）标签上的下拉控制。并通过从方法修改li下的ul（每一个菜单项的子项块）的display进行显示和隐藏<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html
复制链接

扫一扫