H5+JS实现三级菜单（包括水平、垂直菜单及基本网页架构）完整

最新推荐文章于 2023-09-19 09:43:27 发布

folling*

最新推荐文章于 2023-09-19 09:43:27 发布

阅读量1.6k

点赞数

分类专栏：前端开发文章标签： javascript html5

本文链接：https://blog.csdn.net/Xiaofugongzi/article/details/104718017

版权

前端开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

用Html5和JavaScript实现三级菜单和基本的网页架构
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS实现三级菜单</title>
</head>
<style>
    *{padding:0;margin:0;}
    header{width:100%;height:100px;background-color: cyan;}
    .one{width:33%;height:100px;background-color: coral;float:left;margin-right: 6px;
        margin-bottom: 5px;border-bottom: 1px solid #234567;}
    .two{width:33%;height:100px;background-color: coral;float:left;margin-right: 6px;
        margin-bottom: 5px;border-bottom: 1px solid #234567;}
    .three{width:33%;height:100px;background-color: coral;float:right;
        margin-bottom: 5px;border-bottom: 1px solid #234567;}
    footer{width:100%;height:200px;background-color: cyan;margin-top: 418px;}
    nav{margin-left: 170px;
        position: absolute;top:58px;}
    ul li a{text-decoration: none;display: block;font-weight: bold;
        line-height: 40px;height:40px;text-align: center;padding:0px 10px;
        border-right: solid 1px #fff;background-color: darkgoldenrod;
        color:#fff;
    }
    a:hover{background: crimson;}
    ul li{float:left;list-style: none;}
    ul li ul li{float:none;margin-top: 1px;}
    ul li ul li ul{margin-left:90px;position:absolute;
        width: 90px;top:50px;top:0;margin-left: 85px;}
    ul li ul li{position: relative;}
    .ones{margin-bottom: 10px;}
</style>
<body>
<header>
    <nav>
        <ul>
            <li><a href="#">消息中心</a></li>
            <li onmouseover=showmenu(this) onmouseout=hidemenu(this)><a href="#">联系人</a>
                <ul>
                    <li><a>我的好友</a></li>
                    <li><a>我的分组</a></li>
                    <li onmouseover=showmen(this) onmouseout=hidemen(this)><a>我的群聊</a>
                        <ul>
                            <li><a>家人群</a></li>
                            <li><a>同学群</a></li>
                            <li><a>好友群</a></li>
                            <li><a>陌生人群</a></li>
                        </ul>
                    </li>
                    <li><a>我的设备</a></li>
                </ul>
            </li>
            <li><a href="#">新闻看点</a></li>
            <li><a href="#">好友动态</a></li>
            <li><a href="#">关于自己</a></li>
        </ul>
    </nav>
</header>
<section class="ones">
    <article class="one"></article>
    <article class="two"></article>
    <article class="three"></article>
</section>
<section class="twos">
    <article class="one"></article>
    <article class="two"></article>
    <article class="three"></article>
</section>
<section class="threes">
    <article class="one"></article>
    <article class="two"></article>
    <article class="three"></article>
</section>
<section class="fours">
    <article class="one"></article>
    <article class="two"></article>
    <article class="three"></article>
</section>
<footer></footer>
<script >
    function showmenu(obj){
        var submenu=obj.getElementsByTagName("ul")[0];/*鼠标放到一级菜单*/
        submenu.style.display="block";/*二级菜单显示*/
        submen.style.display="none";/*三级菜单隐藏*/
    }

    function hidemenu(obj){
        var submenu=obj.getElementsByTagName("ul")[0];
        submenu.style.display="none";/*鼠标离开一级菜单，二级菜单隐藏*/
    }
    function showmen(obj){
        var submen=obj.getElementsByTagName("ul")[0];
        submen.style.display="block";/*鼠标放到二级菜单，三级菜单显示*/
    }

    function hidemen(obj){
        var submen=obj.getElementsByTagName("ul")[0];
        submen.style.display="none";/*鼠标离开二级菜单，三级菜单隐藏*/
    }
</script>
</body>
</html>

folling*

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
H5+JS实现三级菜单（包括水平、垂直菜单及基本网页架构）完整

用Html5和JavaScript实现三级菜单和基本的网页架构代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS实现三级菜单</title></head><style> ...
复制链接

扫一扫