CODEWITHSUNDEEP
javascriptjqueryhtmlcssoverlay
reidb
reidb

Reputation: 267

Close full screen nav overlay when link clicked

I am attempting to use a full screen nav overlay. Everything works pretty well, but I am having issues with closing it when a nav link is clicked. Currently a clicked link just takes you to the anchored section, but the overlay doesn't get removed.

Here is the fiddle of the current project and I've copied the js below.

I appreciate any help/advice you can give.

JS

(function() {

  var Menu = (function() {
    var burger = document.querySelector('.burger');
    var menu = document.querySelector('.menu');
    var menuList = document.querySelector('.menu__list');
    var brand = document.querySelector('.menu__brand');
    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');
        brand.classList.add('menu__brand--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');
        brand.classList.remove('menu__brand--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();

}());

Upvotes: 0

Views: 799

Answers (1)

Dale Nguyen
Dale Nguyen

Reputation: 1980

You didn't have the action function for clicked item. You can use it on menu_list class:

var menuItemClicked = function() {
      menuList.addEventListener('click', toggleMenu, false);
}

var init = function() {
      bindActions();
      menuItemClicked();
};

Take a look at the fiddle again: https://jsfiddle.net/w6n217xc/2/

Upvotes: 1

Related Questions