如何通过链接点击关闭汉堡包菜单？ [英] How do I make my hamburger menu close on link click?

问题描述

所以我已经上网几个小时寻找解决方案，我尝试了至少20种不同的东西，但都没有用。当点击菜单中的链接时，我需要知道如何关闭汉堡菜单。



我的HTML：

So i've been on the internet for hours looking for a solution for this, i've tried at least 20 different things and none worked. I need to know how to make my Hamburger menu close when a link inside of the menu is clicked.

My HTML:

<!-- Hamburger Menu (for mobile) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

      <div class="topnav" id="myTopnav" style="position:absolute;top:0px;">
        <a href="#" class="active" class="nav-item" id="fn">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    
  </a>
    </div>

我的CSS：

My CSS:

/* Makes Hamburger Heading Visible On Mobile Only */
  .topnav .icon, #myTopnav, .active {
    visibility: visible;
    z-index: 10000;
  }

/* Width Of Hamburger Navigation */
  .topnav {
    width: 100%;
  }

/* Removes Desktop Heading & Navigation */
  .nav, .top-heading {
    display: none;
  }

/* Header Color */
  #fn {
    color: #ffffff;
    font-size: 32px;
  }

  /* Background And Overflow Of Hamburger Navigation */
  .topnav {
    background: linear-gradient(to top, #ff6699 0%, #ff9999 100%);
    overflow: hidden;
  }

/* Link Style Inside Hamburger Navigation */
  .topnav a {
    float: left;
    display: block;
    color: #ffffff;
    text-align: center;
    padding: 26px 16px;
    text-decoration: none;
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 28px;
  }

/* Link Properties On Hover */
  .topnav a:hover {
    background-color: #ffffff;
    color: black;
  }

/* Active Highlight Of Current Page */
  .active {
    background: linear-gradient(to top, #ff6699 0%, #ff9999 100%);
    color: #ffffff;
  }

/* Closed Hamburger Properties */
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
}

/* Open Hamburger Properties */
.topnav.responsive {position: relative;}
 .topnav.responsive a.icon {
   position: absolute;
   right: 0%;
   top: 0;
 }

 /* Open Link Properties */
 .topnav.responsive a {
   float: none;
   display: block;
   text-align: left;
 }
}

我的Javascript（这里是什么允许菜单打开，如果有办法让我保持这个功能，也可以在点击链接时关闭它太棒了）：

My Javascript (this here is what allows the menu to open, if there is a way for me to keep this functional and also be able to close it when link is clicked would be great):

function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

我的尝试：



我尝试了不同的Javascript代码，似乎都没有使用我已有的代码。

What I have tried:

I've tried different Javascript code, none seemed to work with the code i already have.

推荐答案

我可以提供你是一个有趣且非常规的答案。



将你的菜单构建为一个开放的列表，看起来如你所愿（链接等）的形式存储在javaScript变量中的HTML字符串。



现在

- 对于你的开放事件，设置innerHTML值=你的菜单字符串变量

- 对于关闭事件，将innerHTML设置为空字符串，或任何你想要的代替菜单。



这个这不是一个典型的解决方案，但是如果你明白我带你去哪里，你就会有一个非常强大的工具添加到你的'武器库中'，如果你还没有开始使用它，你的中途完成了学习使用AJAX。

I can offer you an interesting and non-conventional answer.

Build your menu as an open list that looks as you wish (links, etc.) in the form of an HTML-string stored in a javaScript variable.

Now
- for your open event, set innerHTML value = your menu string variable
- for close event, set innerHTML to an empty string, or whatever you wish in place of the menu.

This is not a 'typical' solution, but if you understand where I'm taking you with this you will have a very powerful tool added to your 'arsenal', and if you haven't started using it already, your half-way done with learning to use AJAX.

这篇关于如何通过链接点击关闭汉堡包菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！