Question

I’m using the responsive drop down menu from CSS-Tricks

Responsive Menu Concepts

I’d like for the menu to disappear after the user clicks a link. It’s a responsive one page web site, so after the link is clicked the user is scrolled down to the content in question.

How could I automatically hide the menu after a click has been made?

Though the menu is currently CSS only, I have no qualms on adding javascript if it’s needed.

Here is the html

<div class="nav-container">
    <nav class="three columns" role="custom-dropdown">
        <input type="checkbox" id="button">
        <label for="button" onclick></label>

        <ul>
            <li><a href="#header"><span>Home</span></a></li>
            <li><a href="#aboutus"><span>About SoEmi</span></a></li>
            <li><a href="#massage"><span>Massage</span></a></li>
            <li><a href="#special"><span>Specials</span></a></li>
            <li><a href="#mobile"><span>Mobile Spa</span></a></li>
            <li><a href="#appointment"><span>Appointment</span></a></li>
            <li><a href="#where"><span>Find Us</span></a></li>
        </ul>
    </nav>
</div>

I modifed the code below from frenchie and fixed the issue. Thank you.

$(document).ready(function () {

$('.nav-container').on({

   click: function () { $("#button").prop("checked", false); }

}, 'a');

});

Answer 1

You need javascript for this because you need to handle an event.

Something like this:

$(document).ready(function () {

    $('.nav-container').on({

       click: function () { $('.nav-container').hide(); }

    }, 'a');

});

Make sure you have jQuery on the page.