javascriptmobilemenuwp-nav-menu-item

Javascript how to reload the page when clicking on the link in the same page?

I apply a ready-to use plugin for the mobile navigation, but I find a problem. Because the website is one-page site, and the links in navigation direct to different sections in the same page by using hash tag.

When I click on the hamburger and select one of the links, it will go to the section but the navigation is still there! Meanwhile I need the page to be reloaded and go to the section after clicking each link. Or, maybe the navigation could close itself when the link is clicked.

Sorry I don't understand javascript, please teach me how to modify the codes, thanks in advance!

(function() {
  
  var Menu = (function() {
    var burger = document.querySelector('.burger');
    var menu = document.querySelector('.menu');
    var menuList = document.querySelector('.menu__list');
    var menuItems = document.querySelectorAll('.menu__item');
    
    var active = false;
    
    var toggleMenu = function() {
      if (!active) {
        menu.classList.add('menu--active');
        menuList.classList.add('menu__list--active');
        burger.classList.add('burger--close');
        for (var i = 0, ii = menuItems.length; i < ii; i++) {
          menuItems[i].classList.add('menu__item--active');
        }
        
        active = true;
      } else {
        menu.classList.remove('menu--active');
        menuList.classList.remove('menu__list--active');
        burger.classList.remove('burger--close');
        for (var i = 0, ii = menuItems.length; i < ii; i++) {
          menuItems[i].classList.remove('menu__item--active');
        }
        
        active = false;
      }
    };
    
    var bindActions = function() {
      burger.addEventListener('click', toggleMenu, false);
    };
    
    var init = function() {
      bindActions();
    };
    
    return {
      init: init
    };
    
  }());
  
  Menu.init();
  
}());
.mobile_menu{display:block;}
.burger {position: absolute;z-index: 15;right: 25px;top: 25px;cursor: pointer;-webkit-transform: rotateY(0);transform: rotateY(0);-webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);}
.burger__patty {width: 28px;height: 2px;margin: 0 0 4px 0;background: black;-webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);}
.burger__patty:last-child {margin-bottom: 0;}
.burger--close {-webkit-transform: rotate(180deg);transform: rotate(180deg);}
.burger--close .burger__patty:nth-child(1) {-webkit-transform: rotate(45deg) translate(4px, 4px);transform: rotate(45deg) translate(4px, 4px);}
.burger--close .burger__patty:nth-child(2) {opacity: 0;}
.burger--close .burger__patty:nth-child(3) {-webkit-transform: rotate(-45deg) translate(5px, -4px);transform: rotate(-45deg) translate(5px, -4px);}
.menu {position: fixed;top: 0;width: 100%;visibility: hidden;}
.menu--active {visibility: visible;}
.menu__list {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-flex-flow: column wrap;-ms-flex-flow: column wrap;flex-flow: column wrap;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-webkit-justify-content:center;-ms-flex-pack: center;justify-content:center;float: left;width: 100%;height: 100vh;overflow: hidden;}
.menu__list {margin: 0;padding: 0;background:rgba(0, 0, 0, 0.5);list-style-type: none;-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);-webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);}
.menu__list--active {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
.menu__brand {background: #38C5B9;-webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);}
.menu__brand--active {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
.menu__item {-webkit-transform: translate3d(500px, 0, 0);transform: translate3d(500px, 0, 0);-webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);}
.menu__item--active {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
.menu__link {display: inline-block;position: relative;font-size: 25px;padding: 5px 0;font-weight: 300;color: white;text-decoration: none;color: white;-webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);}
.menu__lan{font-family: Helvetica, Arial, 'Noto Sans TC', 'LiHei Pro', 'Microsoft JhengHei', '微軟正黑體', '新細明體', sans-serif;}
.menu__link:before {content: "";position: absolute;bottom: 0;left: 50%;height: 2px;background: white;-webkit-transform: translateX(-50%);transform: translateX(-50%);-webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);}
.menu__en:before {content: "";position: absolute; bottom: 0;left: 50%;width: 30px;height: 2px;background: white;-webkit-transform: translateX(-50%);transform: translateX(-50%);-webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);}
.menu__link:hover:before {width: 100%;}
.menu__link:hover{ color:#FFF;}
.menu .menu__item:nth-child(1) {-webkit-transition-delay: 0.1s;transition-delay: 0.1s;}
.menu .menu__item:nth-child(2) {-webkit-transition-delay: 0.2s;transition-delay: 0.2s;}
.menu .menu__item:nth-child(3) {-webkit-transition-delay: 0.3s;transition-delay: 0.3s;}
.menu .menu__item:nth-child(4) {-webkit-transition-delay: 0.4s;transition-delay: 0.4s;}
.menu .menu__item:nth-child(5) {-webkit-transition-delay: 0.5s;transition-delay: 0.5s;}
.menu .menu__item:nth-child(6) {-webkit-transition-delay: 0.6s;transition-delay: 0.6s;}
.desktop_menu{ float:right; margin-right:280px; margin-top:25px;}
.desktop_menu ul li{ float:left; list-style:none; font-size:16px; margin-right:25px; font-weight:400; text-transform:uppercase; }
.desktop_menu ul li a{color:#000;}
.desktop_menu ul li a:hover, .desktop_menu ul li a.active{color:#000;}
.header.menu_change { background-color:#000; background: rgba(0,0,0,0.8); height:100px;}
.header.menu_change_mobile {background: rgba(0,0,0,0.8); height:70px;}
.header.menu_change .desktop_menu ul li a{color:#fff;}
.header.menu_change .desktop_menu ul li a:hover, .header.menu_change .desktop_menu ul li a.active{color:#fff;}

.title{ color:#cf6b22; font-size:40px; padding-bottom: 1000px;}
<!DOCTYPE html>
<html lang="en" xml:lang="en">
    <head>
        <title>test</title>
            
        <!-- meta -->
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, maximum-scale=1">
            
        <!-- css -->
        <link rel="stylesheet" href="css/circlestar.css">
    </head>
      
    <body>

        <!-- Header --> 
        <header class="header">
                <div class="mobile_menu">
                    <div class="burger">
                       <div class="burger__patty"></div>
                       <div class="burger__patty"></div>
                       <div class="burger__patty"></div>
                    </div>
                    <nav class="menu">
                       <ul class="menu__list">
                         <li class="menu__item"><a href="#hash1" class="menu__link">HASH1</a></li>
                         <li class="menu__item"><a href="#hash2" class="menu__link">HASH2</a></li>
                         <li class="menu__item"><a href="#hash3" class="menu__link">HASH3</a></li>
                       </ul>
                    </nav>
                </div>
        </header>
  

        <a name="hash1"></a>
        <div class="title">HASH1</div>

        <a name="hash2"></a> 
        <div class="title">HASH2</div>     

        <a name="hash3"></a>
        <div class="title">HASH3</div>

        <!-- JS for general --> 
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/circlestar.js"></script>

    </body>
</html>

Solution

  • You just need to add a click handler on menuList . You can do this right under where you specify the click handler on burger.

    burger.addEventListener('click', toggleMenu, false);
menuList.addEventListener('click', toggleMenu, false);

    JSFiddle

    As a side note, please include only the relevant code in your question and post the full code, if need be, as a separate fiddle.