Click here to Skip to main content
14,641,293 members
Rate this:
Please Sign up or sign in to vote.
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>


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


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


What I have tried:

I've tried different Javascript code, none seemed to work with the code i already have.
Posted
Updated 8-Nov-18 3:22am
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

Rate this:
Please Sign up or sign in to vote.

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.
   
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.

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




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100