单击锚点后如何关闭汉堡菜单

时间:2020-11-02 00:06:04

标签: javascript html css

首先,如果英语不正确,我想表示歉意,但是现在我遇到一个问题,试图将下面列出的代码制作为汉堡菜单,当锚定时关闭(标签)。我有打开菜单的代码,但是我希望关闭,也可以在单击锚点并使用section标签打开所选锚点时将其关闭。

<!DOCTYPE html>
<html>
    <head>
      <style>
        body
        {
            background-color: gray;
        }
        .menu__toggler 
        {
            position: absolute;
            top: 20px;
            left: 50%;
            z-index: 999;
            height: 28px;
            width: 28px;
            outline: none;
            cursor: pointer;
            display: -webkit-box;
            display: flex;
            -webkit-box-align: center;
                    align-items: center;
        }
        .menu__toggler span, .menu__toggler span::before, .menu__toggler span::after
        {
            position: absolute;
            content: "";
            width: 28px;
            height: 2.5px;
            background: #fafafa;
            border-radius: 20px;
            -webkit-transition: 500ms cubic-bezier(0.77, 0, 0.175, 1);
            transition: 500ms cubic-bezier(0.77, 0, 0.175, 1);
        }
        .menu__toggler span::before 
        {
            top: -8px;
        }
        .menu__toggler span::after 
        {
            top: 8px;
        }
        .menu__toggler.active > span 
        {
            background: transparent;
        }
        .menu__toggler.active > span::before, .menu__toggler.active > span::after 
        {
            background: white;
            top: 0px;
        }
        .menu__toggler.active > span::before 
        {
            -webkit-transform: rotate(-225deg);
                transform: rotate(-225deg);
        }
        .menu__toggler.active > span::after 
        {
            -webkit-transform: rotate(225deg);
                transform: rotate(225deg);
        }
        .menu 
        {
            position: absolute;
            left: -30%;
            z-index: 998;
            color: #005c9c;
            background: rgba(250, 250, 250, 0.7);
            -webkit-clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
                    clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
            width: 30%;
            height: 100%;
            padding: 100px;
            display: -webkit-box;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                    flex-direction: column;
            -webkit-box-pack: center;
                    justify-content: center;
            -webkit-transition: 300ms left cubic-bezier(0.77, 0, 0.175, 1);
            transition: 300ms left cubic-bezier(0.77, 0, 0.175, 1);
        }
        @media only screen and (max-width: 900px) 
        {
            .menu 
            {
                width: 3250px;
                left: -3250px;
                padding: 50px;
            }
        }
        .menu.active 
        {
            left: 0;
        }
        .menu p 
        {
            font-size: 1.4rem;
            margin-bottom: 1rem;
        }
        *, *::before, *::after 
        {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body 
        {
            min-height: 100vh;
            background-color: #1d1f20;
            font-family: "K2D", sans-serif;
            display: -webkit-box;
            display: flex;
            -webkit-box-pack: center;
                    justify-content: center;
            -webkit-box-align: center;
                    align-items: center;
        }
        section 
        {
            display: none;
        }
        section:target 
        {
            display: block;
        }
      </style>
    </head>
    <body>
        <div class="menu">
            <div class="test2" id="menu">
                <ul>
                <li><a href="#default" class="test">Main menu</a></li>
                <li><a href="#test1">test1</a></li>
                <li><a href="#test2">test2</a></li>
                </ul>
            </div>
            <div class="test3">
                <ul>
                <li><a href="#default" class="test">Second menu</a></li>
                <li><a href="#test3">test3</a></li>
                <li><a href="#test4">test4</a></li>
                </ul>
            </div>
        </div>
        <div class="menu__toggler">
            <span></span>
        </div>
        <section id="test1">
            test1
        </section>
        <section id="test2">
            test2
        </section>
        <script type="text/javascript">
                const toggler = document.querySelector('.menu__toggler');
        const menu    = document.querySelector('.menu');
        toggler.addEventListener('click', () => 
        {
            toggler.classList.toggle('active');
            menu.classList.toggle('active');
        })
        </script>
    </body>
</html>

我正在等待您的意见,看看我们是否可以对此做一些事情:D

1 个答案:

答案 0 :(得分:3)

添加另一个事件侦听器以捕获HTML锚点的单击,并使用classList remove方法隐藏菜单

 menu.addEventListener('click', (e) => {
        if (e.target.tagName === 'A') {
          toggler.classList.remove('active');
          menu.classList.remove('active');
        }
      })

提琴:https://jsfiddle.net/y6adsov3/