Butterflied
New Member
I'm using the responsive drop down menu from CSS-TricksResponsive Menu ConceptsI'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 \[code\]<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="http://stackoverflow.com/questions/14544051/#header"><span>Home</span></a></li> <li><a href="http://stackoverflow.com/questions/14544051/#aboutus"><span>About SoEmi</span></a></li> <li><a href="http://stackoverflow.com/questions/14544051/#massage"><span>Massage</span></a></li> <li><a href="http://stackoverflow.com/questions/14544051/#special"><span>Specials</span></a></li> <li><a href="http://stackoverflow.com/questions/14544051/#mobile"><span>Mobile Spa</span></a></li> <li><a href="http://stackoverflow.com/questions/14544051/#appointment"><span>Appointment</span></a></li> <li><a href="http://stackoverflow.com/questions/14544051/#where"><span>Find Us</span></a></li> </ul> </nav></div>\[/code\]I modifed the code below from frenchie and fixed the issue. Thank you. \[code\]$(document).ready(function () {$('.nav-container').on({ click: function () { $("#button").prop("checked", false); }}, 'a');\[/code\]});