title: Hamburger menu close on click
body: <p>I'm having some trouble with a script I've often used for a responsive dropdown menu. The responsiveness works, the dropdowns work, the links work - but now I'm using smoothscroll internal links and the menu stays open when an internal link is clicked. it never mattered with external links, because loading a new page caused the menu to reload closed. But now, with internal links, the menu stays open while the page smoothscrolls to the correct spot on the page, covering all of the content.</p>
  
  <p>Here is my basic html:</p>
  
  <pre><code>&lt;div id='cssmenu'&gt;
  &lt;ul&gt;
     &lt;li&gt;&lt;a href='#'&gt;Home&lt;/a&gt;&lt;/li&gt;
         &lt;li class='active'&gt;&lt;a href='#'&gt;Products&lt;/a&gt;
            &lt;ul&gt;
           &lt;li&gt;&lt;a href='#'&gt;Product 1&lt;/a&gt;
              &lt;ul&gt;
                 &lt;li&gt;&lt;a href='#'&gt;Sub Product&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href='#'&gt;Sub Product&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
           &lt;/li&gt;
           &lt;li&gt;&lt;a href='#'&gt;Product 2&lt;/a&gt;
              &lt;ul&gt;
                 &lt;li&gt;&lt;a href='#'&gt;Sub Product&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href='#'&gt;Sub Product&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
           &lt;/li&gt;
        &lt;/ul&gt;
     &lt;/li&gt;
     &lt;li&gt;&lt;a href='#'&gt;About&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href='#'&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my Jquery</p>
  
  <pre><code>(function($) {
  
    $.fn.menumaker = function(options) {
  
        var cssmenu = $(this), settings = $.extend({
          title: "Menu",
          format: "dropdown",
          sticky: false
        }, options);
  
        return this.each(function() {
          cssmenu.prepend('&lt;div id="menu-button"&gt;' + settings.title +     '&lt;/div&gt;');
          $(this).find("#menu-button").on('click', function(){
            $(this).toggleClass('menu-opened');
            var mainmenu = $(this).next('ul');
            if (mainmenu.hasClass('open')) { 
              mainmenu.hide().removeClass('open');
            }
            else {
              mainmenu.show().addClass('open');
              if (settings.format === "dropdown") {
                mainmenu.find('ul').show();
              }
            }
          });
  
          cssmenu.find('li ul').parent().addClass('has-sub');
  
          multiTg = function() {
            cssmenu.find(".has-sub").prepend('&lt;span class="submenu-button"&gt;    &lt;/span&gt;');
            cssmenu.find('.submenu-button').on('click', function() {
              $(this).toggleClass('submenu-opened');
              if ($(this).siblings('ul').hasClass('open')) {
                $(this).siblings('ul').removeClass('open').hide();
              }
              else {
                $(this).siblings('ul').addClass('open').show();
              }
            });
          };
  
          if (settings.format === 'multitoggle') multiTg();
          else cssmenu.addClass('dropdown');
  
          if (settings.sticky === true) cssmenu.css('position', 'fixed');
  
          resizeFix = function() {
            if ($( window ).width() &gt; 768) {
              cssmenu.find('ul').show();
            }
  
            if ($(window).width() &lt;= 768) {
              cssmenu.find('ul').hide().removeClass('open');
            }
          };
          resizeFix();
          return $(window).on('resize', resizeFix);
  
        });
    };
  })(jQuery);
  
  (function($){
  $(document).ready(function(){
  
  $("#cssmenu").menumaker({
     title: "Menu",
     format: "multitoggle"
  });
  
  
  });
  })(jQuery);
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/*------------------------------------------------------
      Dropdown Menu Styles
  --------------------------------------------------------*/
  
  #cssmenu,
  #cssmenu ul,
  #cssmenu ul li,
  #cssmenu ul li a,
  #cssmenu #menu-button {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    line-height: 1;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  #cssmenu ul li a.current {
      color: #fff;
  }
  #cssmenu:after,
  #cssmenu &gt; ul:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
  }
  #cssmenu #menu-button {
    display: none;
  }
  #cssmenu {
    width: auto;
    font-family: 'Open Sans', Helvetica, sans-serif;
    background: #333;
  }
  #cssmenu.align-center &gt; ul {
    font-size: 0;
    text-align: center;
  }
  #cssmenu.align-center ul ul {
    text-align: left;
  }
  #cssmenu.align-center &gt; ul &gt; li {
    display: inline-block;
    float: none;
  }
  #cssmenu.align-right &gt; ul &gt; li {
    float: right;
  }
  #cssmenu.align-right ul ul {
    text-align: right;
  }
  #cssmenu &gt; ul &gt; li {
    float: left;
  }
  #cssmenu &gt; ul &gt; li &gt; a {
    padding: 15px 15px;
    font-size: 13px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    font-weight: 400;
    text-decoration: none;
    -webkit-transition: color .2s ease;
    -moz-transition: color .2s ease;
    -ms-transition: color .2s ease;
    -o-transition: color .2s ease;
    transition: color .2s ease;
  }
  
  #cssmenu &gt; ul &gt; li:hover &gt; a,
  #cssmenu &gt; ul &gt; li &gt; a:hover,
  #cssmenu &gt; ul &gt; li.active &gt; a {
    color: #fff;
  }
  #cssmenu &gt; ul &gt; li.has-sub &gt; a {
    padding-right: 20px;
  }
  #cssmenu ul &gt; li.has-sub &gt; a:after {
    content: '';
    position: absolute;
    right: 5px;
    top: 15px;
    display: block;
    width: 18px;
    height: 18px;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -ms-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
  }
  #cssmenu ul &gt; li.has-sub:hover &gt; a:after {
    background-position: 0 -18px;
  }
  #cssmenu ul &gt; li.has-sub &gt; a:before {
    content: '';
    position: absolute;
    right: 11px;
    top: 21px;
    display: block;
    width: 0;
    height: 0;
    border: 3px solid transparent;
    border-top-color: #ffffff;
    z-index: 99;
  }
  #cssmenu ul &gt; li.has-sub:hover &gt; a:before {
    border-top-color: #888;
  }
  #cssmenu ul ul {
    position: absolute;
    left: -9999px;
    opacity: 0;
    -webkit-transition: top .2s ease, opacity .2s ease;
    -moz-transition: top .2s ease, opacity .2s ease;
    -ms-transition: top .2s ease, opacity .2s ease;
    -o-transition: top .2s ease, opacity .2s ease;
    transition: top .2s ease, opacity .2s ease;
  }
  #cssmenu &gt; ul &gt; li &gt; ul {
    top: 91px;
    padding-top: 4px;
  }
  #cssmenu &gt; ul &gt; li:hover &gt; ul {
    left: auto;
    top: 39px;
    opacity: 1;
  }
  #cssmenu.align-right &gt; ul &gt; li:hover &gt; ul {
    right: 0;
  }
  #cssmenu ul ul ul {
    top: 40px;
  }
  #cssmenu ul ul &gt; li:hover &gt; ul {
    top: 0;
    left: 178px;
    padding-left: 10px;
    opacity: 1;
  }
  #cssmenu.align-right ul ul &gt; li:hover &gt; ul {
    left: auto;
    right: 178px;
    padding-left: 0;
    padding-right: 10px;
    opacity: 1;
  }
  #cssmenu ul ul li a {
    width: 180px;
    padding: 12px 25px;
    font-size: 13px;
    border-bottom: solid 1px #888;
    font-weight: 700;
    color: #A82923;
    text-decoration: none;
    background: #ffffff;
    -webkit-transition: color .2s ease;
    -moz-transition: color .2s ease;
    -ms-transition: color .2s ease;
    -o-transition: color .2s ease;
    transition: color .2s ease;
  }
  #cssmenu ul ul li:hover &gt; a,
  #cssmenu ul ul li &gt; a:hover,
  #cssmenu ul ul li.active &gt; a {
    color: #888;
  }
  #cssmenu ul ul li:first-child &gt; a {
  
  }
  #cssmenu ul ul li:last-child &gt; a {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom: solid 1px #888;
  }
  #cssmenu ul ul &gt; li.has-sub &gt; a:after {
    right: 12px;
    top: 9.5px;
    background: #A82923;
  }
  #cssmenu.align-right ul ul &gt; li.has-sub &gt; a:after {
    right: auto;
    left: 12px;
  }
  #cssmenu ul ul &gt; li.has-sub:hover &gt; a:after {
    background-position: 0 -18px;
  }
  #cssmenu ul ul &gt; li.has-sub &gt; a:before {
    top: 15.5px;
    right: 16px;
    border-top-color: transparent;
    border-left-color: #ffffff;
  }
  #cssmenu.align-right ul ul &gt; li.has-sub &gt; a:before {
    top: 15.5px;
    right: auto;
    left: 16px;
    border-top-color: transparent;
    border-right-color: #ffffff;
    border-left-color: transparent;
  }
  #cssmenu ul ul &gt; li.has-sub:hover &gt; a:before {
    border-top-color: transparent;
    border-left-color: #1c89b5;
  }
  #cssmenu.align-right ul ul &gt; li.has-sub:hover &gt; a:before {
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: #1c89b5;
  }
  @media all and (max-width: 768px), only screen and (-webkit-min-device-    pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and     (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
    #cssmenu {
      width: 100%;
    }
    #cssmenu ul,
    #cssmenu ul ul,
    #cssmenu ul ul ul,
    #cssmenu &gt; ul,
    #cssmenu.align-center &gt; ul,
    #cssmenu &gt; ul &gt; li &gt; ul,
    #cssmenu &gt; ul &gt; li:hover &gt; ul,
    #cssmenu ul ul li:hover &gt; ul,
    #cssmenu ul ul ul li:hover &gt; ul,
    #cssmenu.align-right ul ul,
    #cssmenu.align-right ul ul li:hover &gt; ul,
    #cssmenu.align-right ul ul ul li:hover &gt; ul {
      position: relative;
      left: 0;
      right: auto;
      top: 0;
      width: 100%;
      display: none;
      padding: 0;
      opacity: 1;
      text-align: left;
    }
    #cssmenu ul li {
      width: 100%;
      border-top: 1px solid rgba(120, 120, 120, 0.2);
    }
    #cssmenu &gt; ul &gt; li &gt; a,
    #cssmenu ul ul li a,
    #cssmenu ul ul li:first-child &gt; a,
    #cssmenu ul ul li:last-child &gt; a {
      width: 100%;
      border-radius: 0;
      box-shadow: none;
      background: none;
    }
    #cssmenu ul li a {
      padding-left: 12.5px;
    }
    #cssmenu ul ul li a {
      padding: 14px 25px 14px 27.5px;
    }
    #cssmenu ul ul ul li a {
      padding-left: 42.5px;
    }
    #cssmenu ul ul ul ul li a {
      padding-left: 57.5px;
    }
    #cssmenu &gt; ul &gt; li.has-sub &gt; a:after,
    #cssmenu &gt; ul &gt; li.has-sub &gt; a:before,
    #cssmenu ul ul li.has-sub &gt; a:after,
    #cssmenu ul ul li.has-sub &gt; a:before {
      display: none;
    }
    #cssmenu #menu-button {
      position: relative;
      display: block;
      padding: 20px;
      padding-left: 12.5px;
      cursor: pointer;
      font-size: 13px;
      color: #ffffff;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
    }
    #cssmenu .submenu-button {
      position: absolute;
      right: 0;
      display: block;
      width: 53px;
      height: 53px;
      border-left: 1px solid rgba(120, 120, 120, 0.2);
      z-index: 10;
      cursor: pointer;
    }
    #cssmenu ul ul .submenu-button {
      height: 41px;
    }
    #cssmenu ul .submenu-button:after,
    #cssmenu #menu-button:after {
      content: '';
      position: absolute;
      right: 12.5px;
      top: 12.5px;
      display: block;
      width: 28px;
      height: 28px;
      border-radius: 15px;
      background: #3db2e1;
      background: -webkit-linear-gradient(top, #58bde5 0%, #4ab7e3 25%,     #2babde 50%, #58bde5 75%, #4ab7e3 100%);
      background: -ms-linear-gradient(top, #58bde5 0%, #4ab7e3 25%,     #2babde 50%, #58bde5 75%, #4ab7e3 100%);
      background: -moz-linear-gradient(top, #58bde5 0%, #4ab7e3 25%,     #2babde 50%, #58bde5 75%, #4ab7e3 100%);
      background: -o-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde     50%, #58bde5 75%, #4ab7e3 100%);
      background: linear-gradient(to bottom, #58bde5 0%, #4ab7e3 25%,     #2babde 50%, #58bde5 75%, #4ab7e3 100%);
      box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #7fcceb;
      background-size: 56px 56px;
      background-position: 0 0;
      background-repeat: no-repeat;
      -webkit-transition: all 0.1s ease-out;
      -moz-transition: all 0.1s ease-out;
      -ms-transition: all 0.1s ease-out;
      -o-transition: all 0.1s ease-out;
      transition: all 0.1s ease-out;
    }
    #cssmenu ul .submenu-button.submenu-opened:after,
    #cssmenu #menu-button.menu-opened:after {
   background-position: 0 -28px;
    }
    #cssmenu ul ul .submenu-button:after {
      top: 6.5px;
    }
    #cssmenu #menu-button:before,
    #cssmenu .submenu-button:before {
      content: '';
      position: absolute;
      right: 22.5px;
      top: 25.5px;
      display: block;
      width: 0;
      height: 0;
      border: 4px solid transparent;
      border-top-color: #ffffff;
      z-index: 99;
    }
    #cssmenu ul ul .submenu-button:before {
      top: 19.5px;
    }
    #cssmenu #menu-button.menu-opened:before,
    #cssmenu .submenu-button.submenu-opened:before {
      border-top-color: #19799f;
    }
  }
  </code></pre>
  
  <p>Is there something I need to add in order for the menu to close again once a link is clicked?  Any help would be greatly appreciated!</p>