Question

我需要帮助在javascript中创建一个汉堡包菜单。在不使用jquery的情况下创建它的最有效方法是什么？我底部的javascript代码应该可以工作，但是我错过了其他的东西。

<html>
    <head>
        <style>
            .hamburger {
                position: relative;
                display: inline-block;
                width: 1.25em;
                height: 0.75em;
                border-top: 0.18em solid #000;
                border-bottom: 0.18em solid #000;
            }

            .hamburger:before {
                content: "";
                position: absolute;
                top: 0.3em;
                left: 0px;
                width: 100%;
                border-top: 0.18em solid #000;
            }

        </style>
    </head>
    <body>
        <span class="hamburger"></span>
        <li>Development</li>
        <li>Illustrations</li>
        <script type="text/javascript">
            var myEl = document.getElementById('hamburger');
            myEl.addEventListener('click', function() {
                this.classList.toggle('activated');
            }, false);
        </script>
    </body>
</html>

Answer 1

问题是

在不使用jquery的情况下创建它的最有效方法是什么？

我认为纯粹的CSS会好的吗？

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Hamburger Menu</title>
        <style>
            ul {
                list-style-type: none;
                position: relative;
                top: -200px;
                transition: all .5s ease;
                margin-right: 10px;
            }

            .nav {
                display: none;
            }

            #nav:checked ~ ul {
                top: 0;
            }

            #nav {
                display: none;
            }

            .navmenu {
                position: relative;
                display: block;
                margin: -1ex 10px -2ex 10px;
                padding: 5px 20px;
                background: linear-gradient(to right, #445566, #888);
                color: #fff;
                z-index: 999;
                /* The UX expert said so */
                cursor: pointer;
            }

            li {
                background: linear-gradient(to right, #445566, #888);
                color: white;
                padding-left: 5em;
                padding-top: 1ex;
                margin-left: -30px;
            }

        </style>
    </head>
    <body>
        <div class="navigation">
            <input type="checkbox" id="nav">
            <label for="nav" class="navmenu">&#9776;</label>
            <ul>
                <li>First entry</li>
                <li>Second entry</li>
                <li>Third entry</li>
                <li>Fourth of July entry</li>
            </ul>
        </div>
    </body>
</html>

定位有点难看，承认，但你可以自我调整。

导航列表首先位于顶部，然后在选中复选框时向下滚动。＆＃34;汉堡＆＃34;在复选框的label元素中，选中/取消选中复选框会更改top元素的属性ul的值。

Answer 2

你是对的。它应该是getElementsByClassName：

var myEl = document.getElementsByClassName('hamburger')[0];

在javascript中创建汉堡包菜单

2 个答案: