0

When I toggle open my Slide-Left menu and select an anchor tag link, it naviagtes to the anchored section on the same page, but the menu remains open.

I would like a simple javascript function to close the toggle menu everytime I click on an achor link and navigate to the desire section

https://jsfiddle.net/trsjL9th/

I've tried all the other solutions I found on stack overflow including:

$('#menu li').on('click', function(){ $("#menu").hide(); $("#menu-icon").removeClass("active"); });

But nothing seems to be working, I'm still really new at Javascript so any help or push in the right direction will be greatly appreciated.

Javascript:

(function(window) {

  'use strict';

  /**
   * Extend Object helper function.
   */
  function extend(a, b) {
    for(var key in b) { 
      if(b.hasOwnProperty(key)) {
        a[key] = b[key];
      }
    }
    return a;
  }

  /**
   * Each helper function.
   */
  function each(collection, callback) {
    for (var i = 0; i < collection.length; i++) {
      var item = collection[i];
      callback(item);
    }
  }

  /**
   * Menu Constructor.
   */
  function Menu(options) {
    this.options = extend({}, this.options);
    extend(this.options, options);
    this._init();
  }

  /**
   * Menu Options.
   */
  Menu.prototype.options = {
    wrapper: '#o-wrapper',          // The content wrapper
    type: 'slide-left',             // The menu type
    menuOpenerClass: '.c-button',   // The menu opener class names (i.e. the buttons)
    maskId: '#c-mask'               // The ID of the mask
  };

  /**
   * Initialise Menu.
   */
  Menu.prototype._init = function() {
    this.body = document.body;
    this.wrapper = document.querySelector(this.options.wrapper);
    this.mask = document.querySelector(this.options.maskId);
    this.menu = document.querySelector('#c-menu--' + this.options.type);
    this.closeBtn = this.menu.querySelector('.c-menu__close');
    this.menuOpeners = document.querySelectorAll(this.options.menuOpenerClass);
    this._initEvents();
  };

  /**
   * Initialise Menu Events.
   */
  Menu.prototype._initEvents = function() {
    // Event for clicks on the close button inside the menu.
    this.closeBtn.addEventListener('click', function(e) {
      e.preventDefault();
      this.close();
    }.bind(this));

    // Event for clicks on the mask.
    this.mask.addEventListener('click', function(e) {
      e.preventDefault();
      this.close();
    }.bind(this));
  };

  /**
   * Open Menu.
   */
  Menu.prototype.open = function() {
    this.body.classList.add('has-active-menu');
    this.wrapper.classList.add('has-' + this.options.type);
    this.menu.classList.add('is-active');
    this.mask.classList.add('is-active');
    this.disableMenuOpeners();
  };

  /**
   * Close Menu.
   */
  Menu.prototype.close = function() {
    this.body.classList.remove('has-active-menu');
    this.wrapper.classList.remove('has-' + this.options.type);
    this.menu.classList.remove('is-active');
    this.mask.classList.remove('is-active');
    this.enableMenuOpeners();
  };

  /**
   * Disable Menu Openers.
   */
  Menu.prototype.disableMenuOpeners = function() {
    each(this.menuOpeners, function(item) {
      item.disabled = true;
    });
  };

  /**
   * Enable Menu Openers.
   */
  Menu.prototype.enableMenuOpeners = function() {
    each(this.menuOpeners, function(item) {
      item.disabled = false;
    });
  };

  /**
   * Add to global namespace.
   */
  window.Menu = Menu;

})(window);


var slideLeft = new Menu({
  wrapper: '#o-wrapper',
  type: 'slide-left',
  menuOpenerClass: '.c-button',
  maskId: '#c-mask'
});

var slideLeftBtn = document.querySelector('#c-button--slide-left');

slideLeftBtn.addEventListener('click', function(e) {
  e.preventDefault;
  slideLeft.open();
});

HTML:

<!-- Start of Slidesmenu -->
<div class="slidesmenu">
    <div id="o-wrapper" class="o-wrapper">
        <div class="c-buttons">
            <button id="c-button--slide-left" class="c-button"></button>
        </div>
        <!-- other content in here -->
    </div>
    <!-- /o-wrapper -->
    <!-- menus here -->
    <div id="c-mask" class="c-mask"></div>
    <!-- /c-mask -->
    <nav id="c-menu--slide-left" class="c-menu c-menu--slide-left">
        <button class="c-menu__close"></button>
        <ul class="c-menu__items">
            <li class="c-menu__item"><a href="#home" class="c-menu__link">Home</a></li>
            <li class="c-menu__item"><a href="#about" class="c-menu__link">about</a></li>
            <li class="c-menu__item"><a href="#contact" class="c-menu__link">contact</a></li>
            <li class="c-menu__item"><a href="#howitworks" class="c-menu__link">howitworks</a></li>
            <li class="c-menu__item"><a href="#tools" class="c-menu__link">Tools</a></li>
            <li class="c-menu__item"><a href="#help" class="c-menu__link">Help</a></li>
            <li class="c-menu__item"><a href="#customers" class="c-menu__link">Customers</a></li>
            <li class="c-menu__item"><a href="#business" class="c-menu__link">business</a></li>
            <li class="c-menu__item"><a href="#location" class="c-menu__link">location</a></li>
        </ul>
    </nav>
    <!-- /c-menu slide-left -->
</div>
<!-- End of Slidesmenu -->
<div id="about"><p>About</p></div>
<div id="contact"><p>Contact</p></div>
<div id="howitworks"><p>How it Works</p></div>
<div id="tools"><p>Tools</p></div>
<div id="help"><p>Help</p></div>
<div id="customers"><p>Customers</p></div>
<div id="business"><p>Business</p></div>
<div id="location"><p>Location</p></div>

CSS:

.c-menu {
  position: fixed; 
  z-index: 200;
  background-color: #333;
  transition: transform 0.3s;
}

.c-menu__items {
  list-style: none;
  margin: 0;
  padding: 0; margin-top:90px;
}



.c-menu__items li {
  font-size:20px; margin-top:20px;
}

/**
 * Close button resets.
 */
.c-menu__close {
  color: #fff; 
  background-color:#333;
  font-size: 14px;
  border: none; 
  box-shadow: none;
  border-radius: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

/**
 * Close button resets.
 */
.c-menu__close:focus {
  outline: none;
}

/**
 * Body states.
 *
 * When a menu is active, we want to hide the overflows on the body to prevent
 * awkward document scrolling.
 */
body.has-active-menu {
  overflow: hidden;
}

 .c-button {

    background-color: blue; 
    background-repeat: no-repeat;  
    background-position: 0px 0px;  
    border: none; margin-top:13px; margin-left:5px;          
    cursor: pointer; z-index:1;       
    height: 25px;          
    padding-left: 25px;     
    vertical-align: middle;      
 }


 .c-menu__close { 
    background-color: white; 
    background-repeat: no-repeat;  
    background-position: 0px 0px;  
    border: none; margin-top:10px; margin-right:2px;          
    cursor: pointer;        
    height: 25px;          
    padding-left: 25px;     
    vertical-align: middle;      
 }



.c-mask {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 0;
  height: 0;
  background-color: #000;
  opacity: 0;
  transition: opacity 0.3s, width 0s 0.3s, height 0s 0.3s;
}

.c-mask.is-active {
  width: 100%;
  height: 100%;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.c-menu--slide-left,
.c-menu--slide-right,
.c-menu--push-left,
.c-menu--push-right {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

@media all and (min-width: 320px) {
  .c-menu--slide-left,
  .c-menu--slide-right,
  .c-menu--push-left,
  .c-menu--push-right {
    width: 300px;
  }
}

.c-menu--slide-left .c-menu__item,
.c-menu--slide-right .c-menu__item,
.c-menu--push-left .c-menu__item,
.c-menu--push-right .c-menu__item {
  display: block;
  text-align: left;

}

.c-menu--slide-left .c-menu__item:first-child,
.c-menu--slide-right .c-menu__item:first-child,
.c-menu--push-left .c-menu__item:first-child,
.c-menu--push-right .c-menu__item:first-child {
  border-top: none;
}

.c-menu--slide-left .c-menu__item:last-child,
.c-menu--slide-right .c-menu__item:last-child,
.c-menu--push-left .c-menu__item:last-child,
.c-menu--push-right .c-menu__item:last-child {
  border-bottom: none;
}

.c-menu--slide-left .c-menu__link,
.c-menu--slide-right .c-menu__link,
.c-menu--push-left .c-menu__link,
.c-menu--push-right .c-menu__link {
  display: block; text-decoration:none; margin-top:15px;
  padding: 4px 24px; 
  color: #fff;
}

.c-menu__link:hover {color:#c8d100;}

.c-menu--slide-left .c-menu__close,
.c-menu--slide-right .c-menu__close,
.c-menu--push-left .c-menu__close,
.c-menu--push-right .c-menu__close {
  display: block;
  padding: 10px 10px; clear:both;
  width: 30px;float:right;
}

.c-menu--slide-left,
.c-menu--push-left {
  top: 0;
  left: 0;
  transform: translateX(-100%);
}

@media all and (min-width: 320px) {
  .c-menu--slide-left,
  .c-menu--push-left {
    transform: translateX(-300px);
  }
}

.c-menu--slide-left.is-active,
.c-menu--push-left.is-active {
  transform: translateX(0);
}

.c-menu--slide-right,
.c-menu--push-right {
  top: 0;
  right: 0;
  transform: translateX(100%);
}

@media all and (min-width: 320px) {
  .c-menu--slide-right,
  .c-menu--push-right {
    transform: translateX(300px);
  }
}

.c-menu--slide-right.is-active,
.c-menu--push-right.is-active {
  transform: translateX(0);
}

.o-wrapper.has-push-left {
  transform: translateX(100%);
}

@media all and (min-width: 320px) {
  .o-wrapper.has-push-left {
    transform: translateX(300px);
  }
}

.o-wrapper.has-push-right {
  transform: translateX(-100%);
}

@media all and (min-width: 320px) {
  .o-wrapper.has-push-right {
    transform: translateX(-300px);
  }
}




#about { background:blue; height:100vh; width:100%; color:white; font-size:100px;}

#contact { background:yellow; height:100vh; width:100%; color:white; font-size:100px;}

#howitworks { background:green; height:100vh; width:100%; color:white; font-size:100px;}

#tools { background:red; height:100vh; width:100%; color:white; font-size:100px;}

#about { background:black; height:100vh; width:100%; color:white; font-size:100px;}

#help { background:green; height:100vh; width:100%; color:white; font-size:100px;}

#customers { background:purple; height:100vh; width:100%; color:white; font-size:100px;}

#business { background:orange; height:100vh; width:100%; color:white; font-size:100px;}

#location { background:brown; height:100vh; width:100%; color:white; font-size:100px;}
1
  • You've tagged jquery and slidetoggle but at least in your fiddle and code there is no use of jquery. Only jQuery I see is the small section of something you tried to make it work. Jan 15, 2016 at 19:30

2 Answers 2

2

I added this code to the bottom of your JavaScript:

// Find all menu links
var navLinks = document.querySelectorAll('.c-menu__link');
// For each menu link
var index = 0, length = navLinks.length;
for ( ; index < length; index++) {
    // Attach click event, on click call close function
    navLinks[index].addEventListener('click',
        function () {
            slideLeft.close();
        }
    );
}

Fiddle: https://jsfiddle.net/trsjL9th/3/

Basically finds all the links in the menu by their class and attaches a click event that calls your menu close function.

2
  • 1
    Thank you so much for your help! This works like a charm!
    – ChosenJuan
    Jan 15, 2016 at 21:01
  • Happy to help! Good luck! Jan 15, 2016 at 21:04
0

Add an ID to a link:

    <li class="c-menu__item"><a href="#about" id="about-link" class="c-menu__link">about</a></li>

JavaScript add an onclick listener:

document.getElementById('about-link').addEventListener('click', function(e) {
  e.preventDefault;
  slideLeft.close();
});

Repeat as necessary for other ID's. I find this to be the most easily-readable code for when someone reviews the code 1-2 years down the line, but YMMV.

2
  • If you add anymore links to the menu you will need to change the javascript as well though in this scenario. Individually attaching the same functionality to multiple elements by ID seems like a lot of extra work, code and doesn't help readability. But thats just my opinion. To each his own I suppose. Jan 15, 2016 at 19:40
  • 1
    @AtheistP3ace Just saw your solution, I agree something that doesn't need to be updated for new links is superior. Edit: Actually I like it a lot, nicely done. I have much to learn when it comes to js
    – HC_
    Jan 15, 2016 at 19:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.