I recently added a navigation bar that expands in width upon hovering over it.
For an illustration, check out this example:
http://jsfiddle.net/Gsj27/822/
However, I encountered an issue when clicking on a button within the hover effect area. After loading the home page, the navigation bar initially appears with its default small width before expanding due to the hover effect.
The Query
Is there a way to load the page with the hover effect already activated immediately after clicking on a hyperlink within the navigation bar area? In my scenario, if the home button is clicked, the home page should load with the hover effect active because the button is located in the navbar area. But if a hyperlink in another section (e.g., the gray area in my demo) is clicked, the page should load without the hover effect.
I believe this can be accomplished using jQuery toggleClass like so:
$(document).ready(function(){
if(/* check if hover effect was previously active */) {
$('nav').toggleClass('hovered');
}
})