使用JavaScript实现汉堡菜单按钮

最新推荐文章于 2024-06-28 09:45:00 发布

阿常11

最新推荐文章于 2024-06-28 09:45:00 发布

阅读量420

点赞数 6

分类专栏： web 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_72939806/article/details/139411727

版权

web 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

倘若文章和代码中有任何错误或疑惑，欢迎提出交流哦~

在前文超小屏幕下的导航栏-汉堡菜单按钮效果，我们编写了响应式设计中，超小屏幕下的汉堡菜单按钮效果。

但是先前我们使用的是css和html的简单代码，如果使用JavaScript语言来编写的话，那就简单很多了。

大家自己在开发中可以自己再改进CSS样式进行美化，这里为了简便，所以页面很是简陋。

初始化html和css代码

首先，编写导航栏的基础样式，以及超小屏幕下的效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用JavaScript实现汉堡菜单按钮</title>
    <style>
        /* 将所有元素的内外边距和边框初始化为0 */
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }
        /* 使网页占满整个窗口 */
        html, body {
            width: 100%;
            height: 100%;
        }
        /* 导航栏的宽，以及横向排列 */
        .nav {
            width: 100%;
            margin-top: 10px;
        }
        /* 一般情况下汉堡菜单不会显示 */
        #ham_icon{
            display: none;
        }
        /* 列表的样式 */
        .nav ul {
            width: 100%;
            list-style: none;
            float: left;
        }
        .nav ul li {
            display: inline;
            margin-left: 3%;
        }
        .nav ul li a {
            text-decoration: none;
            color: black;
        }
        /* 超小屏幕情况下 */
        @media (max-width: 575px) {
            /* 注意只显示汉堡图标，而不显示复选框的选中框 */
            #ham_icon {
                display: block;
                /* 让汉堡图标居中显示 */
                text-align: center;
            }
            /* 复选框没选中时（一般情况）隐藏列表 */
            .nav ul {
                display: none;
            }
        }
    </style>
</head>
<body>
    <div class="nav">
        <label for="toggle" id="ham_icon">☰</label>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">联系我们</a></li>
          </ul>
    </div>
</body>
</html>

效果如图：
正常屏幕
在这里插入图片描述
超小屏幕

注意现在我们点击汉堡按钮是没有效果的，接下来我们要实现的就是当我们点击按钮时，会出现列表项。

这里我们需要知道，我们可以通过id获取dom对象，并且通过它的style属性，来改变对象的css样式，
那么将上面代码改进并加上JavaScript代码得到：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用JavaScript实现汉堡菜单按钮</title>
    <style>
        /* 将所有元素的内外边距和边框初始化为0 */
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }
        /* 使网页占满整个窗口 */
        html, body {
            width: 100%;
            height: 100%;
        }
        /* 导航栏的宽，以及横向排列 */
        .nav {
            width: 100%;
            margin-top: 10px;
        }
        /* 一般情况下汉堡菜单不会显示 */
        #ham_icon{
            display: none;
        }
        /* 列表的样式 */
        .nav ul {
            width: 100%;
            list-style: none;
            float: left;
        }
        .nav ul li {
            display: inline;
            margin-left: 3%;
        }
        .nav ul li a {
            text-decoration: none;
            color: black;
        }
        /* 超小屏幕情况下 */
        @media (max-width: 575px) {
            /* 注意只显示汉堡图标，而不显示复选框的选中框 */
            #ham_icon {
                display: block;
                /* 让汉堡图标居中显示 */
                text-align: center;
            }
            /* 复选框没选中时（一般情况）隐藏列表 */
            .nav ul {
                display: none;
            }
        }
    </style>
</head>
<body>
    <div class="nav">
        <label for="toggle" id="ham_icon" onclick="ham_click()">☰</label>
        <ul id="nav-links">
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">联系我们</a></li>
          </ul>
    </div>
</body>
<script>
    function ham_click() {
        var links = document.getElementById('nav-links');
        if(links.style.display == "none") {
            links.style.display = "block";
        }else links.style.display = "none";
    }
</script>
</html>

现在我们实现了汉堡按钮的点击响应效果：
如图
在这里插入图片描述

但是显然这里横向排列不是很好看，下面进行改进，即让这个列表项是纵向排列的。即如下效果：

思路为获取列表项，并且在if语句中通过JavaScript代码来修改列表项的css样式。

最终的总代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用JavaScript实现汉堡菜单按钮</title>
    <style>
        /* 将所有元素的内外边距和边框初始化为0 */
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }

        /* 使网页占满整个窗口 */
        html,
        body {
            width: 100%;
            height: 100%;
        }

        /* 导航栏的宽，以及横向排列 */
        .nav {
            width: 100%;
            margin-top: 10px;
        }

        /* 一般情况下汉堡菜单不会显示 */
        #ham_icon {
            display: none;
        }

        /* 列表的样式 */
        .nav ul {
            width: 100%;
            list-style: none;
            float: left;
        }

        .nav ul li {
            display: inline;
            margin-left: 3%;
        }

        .nav ul li a {
            text-decoration: none;
            color: black;
        }

        /* 超小屏幕情况下 */
        @media (max-width: 575px) {

            /* 注意只显示汉堡图标，而不显示复选框的选中框 */
            #ham_icon {
                display: block;
                /* 让汉堡图标居中显示 */
                text-align: center;
            }

            /* 复选框没选中时（一般情况）隐藏列表 */
            .nav ul {
                display: none;
            }
        }

    </style>
</head>

<body>
    <div class="nav">
        <label for="toggle" id="ham_icon" onclick="ham_click()">☰</label>
        <ul id="nav-links">
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </div>
</body>
<script>
        // 编写点击函数
        function ham_click() {
            // 获取列表和列表项对象
        var links = document.getElementById('nav-links');
        var lis = document.getElementsByTagName('li');
        if(links.style.display == "none") {
            // 点击菜单按钮时显示列表
            links.style.display = "block";
                for(let i = 0; i < lis.length; i++) {
                    // 一系列对列表项的css样式修改，纵向排列
                    lis[i].style.display = "block";
                    lis[i].style.width = "100%"
                    lis[i].style.textAlign = "center";
                    lis[i].style.margin = "0";
                    lis[i].style.padding = "0";
                }
        }else links.style.display = "none";
    }
</script>

</html>