0

I found this great slide out menu for a site I'm building.

http://www.sitepoint.com/pure-css-off-screen-navigation-menu/

I was wondering if anyone knows how I could go about making the menu close when I select one of the list-items.

The page I'm building is a one page design and I wanted the menu to close for the user when its scrolling to the section they have selected.

Thanks!

Jason Hess
  • 1
  • 3
  • You should read the comments to the article you posted, which do answer your question. Explicitly the answer by "Sylvain Primeau Ian Baker • 17 days ago". – BananaAcid Jun 01 '15 at 00:51
  • I saw that answer and though it worked, it worked with a method that was clunky and I did not like the result. Thanks though. – Jason Hess Jun 01 '15 at 12:52

1 Answers1

0

You could use some JavaScript/JQuery to unchecked the checkbox that triggers the menu. I don't think this can be simply done in css/html:

Event Listener Method

This code listens out for a click on one of the menu items and then removes the checked attribute from the check-box controlling the menu slide out.

JavaScript:

function addEventListenerList(list, event, fn) {
    for (var i = 0, len = list.length; i < len; i++) {
        list[i].addEventListener(event, fn, false);
    }
}

var navitems = document.getElementsByClassName('nav-item');
addEventListenerList(navitems, 'click', hidemenu); 

function hidemenu() {
    document.getElementById("nav-trigger").checked = false; 
}

source: addEventListener on NodeList

OR jQuery: (if you are alreayd using jQuery in your site)

$( ".nav-item" ).click(function() {
   $( "#nav-trigger" ).attr('checked', false);
});

On Click call Function method

Or another method would be to attach the function directly to the menu items on click. You can do this with the following code:

HTML

<ul class="navigation">
    <li class="nav-item"><a href="#" onclick="hidemenu()">Home</a></li>
    <li class="nav-item"><a href="#" onclick="hidemenu()>Portfolio</a></li>
    <li class="nav-item"><a href="#" onclick="hidemenu()>About</a></li>
    <li class="nav-item"><a href="#" onclick="hidemenu()>Blog</a></li>
    <li class="nav-item"><a href="#" onclick="hidemenu()>Contact</a></li>
</ul>

JavaScript

function hidemenu() {
    document.getElementById("nav-trigger").checked = false; 
}
Community
  • 1
  • 1
Aaron Vanston
  • 755
  • 7
  • 19
  • I'm kind of new to all of this and I saw that. But I didn't quite understand. Just to be clear, I would add that to the bottom of the page in a tag? – Jason Hess Jun 01 '15 at 00:52
  • @JasonHess I have added jQuery OR JavaScript code for you to choose. Simply copy the code as shown for the Javascript and add it into tags at the bottom of your body and it should work. So it should be: – Aaron Vanston Jun 01 '15 at 01:14
  • Hey man, thanks but still not working. Here's my code from the script to the bottom. ... – Jason Hess Jun 01 '15 at 01:32
  • Are you able to include the page/fragment you're working inside a code sample viewer such as jsfiddle? http://jsfiddle.net/ Hard to tell whats' not working from here – Aaron Vanston Jun 01 '15 at 01:34
  • also, the .menubar option is display: none; on some of the breaks. So ignore that. – Jason Hess Jun 01 '15 at 02:59
  • @JasonHess Try the JavaScript code in my answer, I have updated the code further. Make sure the menu items you want to trigger it have the class="nav-item" on the
  • tag
    • – Aaron Vanston Jun 01 '15 at 03:47
  • @JasonHess no worries! Glad I can help. Remember to mark the answer that helped you fixed it, helps me and also lets other know what the correct answer was :) – Aaron Vanston Jun 01 '15 at 23:20