CSS Side Menu Not Returning To Original State After Nav Link Click - css

Question

Please help!!!! I'm including a link to a page with a menu I would like to use for a site I'm building. I can't seem to figure out how to get the ".menu-outer" to reposition itself after I click on a link in the nav. I've tried all sorts of combinations of code but to no available. Could anyone be of any assistance?
http://cssdeck.com/labs/css-side-menu
The Menu has a hover effect that moves the menu back and forth, but I would also like the links to allow the menu to retract once a page link is clicked.
Thank You

Answer 1

You never mentioned using Javascript but here is a version that uses it to close the menu once and item is clicked (Note: from the url below a slight change to the css):
var menu = document.querySelector('.menu-outer');
var links = document.querySelectorAll('nav ul li a');
var addClass = function(element, className) {
if (element.classList) {
element.classList.add(className);
} else {
removeClass(element, className);
element.className = (element.className + ' ' + className).replace(/^\s/, '');
}
};
var removeClass = function(element, className) {
if (className.indexOf('*') !== -1) {
var aryClasses = element.className.split(' ');
for (var i = 0; i < aryClasses.length; i++) {
if (aryClasses[i].indexOf(className.replace('*', '')) !== -1) {
element.removeClass(aryClasses[i]);
}
}
} else {
if (element.classList) {
element.classList.remove(className);
} else {
element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
}
};
var open = function() {
console.log('opening');
addClass(menu, 'active');
};
var close = function() {
console.log('closing');
removeClass(menu, 'active');
};
if (menu) {
menu.addEventListener('mouseover', open, false);
menu.addEventListener('mouseout', close, false);
for (var l = 0; l < links.length; l++) {
var link = links[l];
link.addEventListener('click', close, false);
}
}
jQuery would be something like:
$('body').on('click', 'nav ul li a', function() {
$('.menu-outer').removeClass('active');
});
$('body').on('mouseover', '.menu-outer', function() {
$(this).addClass('active');
});
$('body').on('mouseout', '.menu-outer', function() {
$(this).removeClass('active');
});
http://cssdeck.com/labs/x0lpogde