How do I make my hamburger menu close on link click?

Question

0.00/5 (No votes)

See more:

, +

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:

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>

My CSS:

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;
 }
}

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):

JavaScript

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

What I have tried:

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

Posted 7-Nov-18 18:17pm

Member 14047627

Updated 8-Nov-18 3:22am

Add a Solution

Comments

Mohibur Rashid 8-Nov-18 0:55am

What do you mean by close? Closing the window? If so, have you considered redirecting

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

W∴ Balboos, *GHB* · Answer 1 · 2018-11-08T03:23:00

Solution 1

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.

Posted 8-Nov-18 3:23am

W∴ Balboos, GHB

Comments

Richard Deeming 9-Nov-18 8:48am

That won't be particularly good for performance. And unless you're using delegated events, it will destroy any event handlers every time you open or close the menu.

W∴ Balboos, GHB 9-Nov-18 9:05am

As noted, non-conventional.

Since it's internet based - how much loss will really be observable in performance? It's not how I'd do it. It appears, as submitted, that the activity of the items is link-based - so no events (if you don't count clicking a link) are in jeopardy. It does, in its way, illustrate my strength and hamartia: Aut inveniam viam aut faciam

And ultimately - it will, at least, work.