在 javascript 中创建汉堡菜单答案

【问题标题】：create hamburger menu in javascript在 javascript 中创建汉堡菜单
【发布时间】：2016-03-11 03:50:26
【问题描述】：

我需要帮助在 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>

【问题讨论】：

getElementById 奇怪的是会根据它的 ID 获取一个元素。
另外，列表元素需要一个实际的列表才能进入，或者换句话说，LI 元素应该是 UL 或 OL 的子元素。
而且...如果您要切换“激活”类，我认为您需要在 CSS 中添加一个“激活”类。

标签： javascript html css

【解决方案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>

定位有点丑，承认，但你可以自己微调。

导航列表首先位于顶部，并在您选中复选框时向下滚动。 “汉堡”位于复选框的 label 元素中，选中/取消选中复选框会更改 ul 元素的属性 top 的值。

【讨论】：

【解决方案2】：

你是对的。应该是getElementsByClassName:

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

【讨论】：

还是不行。当我点击它时，我希望它是一个下拉菜单。