[Solved] Unhide overlay menu after hiding it with javascript

Question

If I understand your question right, you want to hide and show the menu. Show on click of the menu input (which you currently do using the :checked pseudo class in CSS) and then hide when clicking the overlay box that appears?

If so, why not just uncheck the input using JQuery. This way the overlay will be controlled by the checkbox and the CSS essentially, using the JQuery to do so. Like this (using the basis of your code already):

$(function () {
    $(document).on('click', '.box', function () {
        $('#toggle-nav').attr('checked', false);
    });
});

Here is the updated fiddle to show you:

http://jsfiddle.net/lee_gladding/sqfyrkpo/7/

Also:

I think you were perhaps trying to overcomplicate it, using a checkbox to show using CSS and then using JQuery to hide, which are two different techniques-both separate and unknowing of each other.

Ideally the point of using a checkbox (hack) to toggle other CSS is to use the checkbox to toggle both states without the use of JQuery.

As you are using JQuery and the way in which you seem to want this to work, you might want to think about just using JQuery to handle all of this instead of part html checkbox (hack) part JQuery, by using a toggling class, say active, on your box (to show/hide the menu). This would give you much more flexibility of markup too and how you can structure your menu. Just an idea!

something like:

$(function () {
    $('#menuButton').on('click', function () {
        $('.box').toggleClass('active');
    });
    $('.box').on('click', function () {
        $(this).removeClass('active');
    });
});

and update the CSS to use the active class, similar to:

#menu .box.active
{ 
    opacity: 1; 
    z-index: 400;
}

(There are other updates to the CSS too in the example)

Here is an example with altered HTML, CSS and JQuery: http://jsfiddle.net/lee_gladding/sqfyrkpo/18/

However that said, following the JQuery approach either way, then limits your users to have JQuery enabled to use the menu (strictly not fully accessible). So you might also want to think about how a user with no JS enabled could navigate the page.

Accepted Answer