The HTML:
<div id="main_menu">
<a id="menu_item_articles" href="articles">articles</a>
</div>
The CSS:
#main_menu {
float: left;
padding-top: 10px;
vertical-align: middle;
text-align: center;
width: 500px;
}
#main_menu a {
border: 1px solid #000;
font-weight: bold;
background: #fff;
color: #000;
padding: 7px;
text-decoration: none;
}
#main_menu a:hover {
border: 1px solid #000;
font-weight: bold;
background: #ff9935;
color: #000;
padding: 7px;
text-decoration: none;
}
.selected_menu_item {
background: #ff9935;
color: #000;
}
My Goal with jQuery:
Edit: Included the missing piece of code (pathArray), which extracts the path depending on whether it's a development environment or not.
var pathArray = $(location).attr('pathname').split('/');
var selectedMenuItem = (pathArray[1] == 'sitename') ? pathArray[2] : pathArray[1];
$('#menu_item_' + selectedMenuItem).attr('class', 'selected_menu_item');
Essentially, I aim to retrieve the current page's URI, break it down, extract the page name, and then highlight the corresponding menu item once the page has finished loading ($(document).ready()).
It appears that the "#main_menu a" styling defined in my CSS is rigid and not allowing the new style to be applied. Any recommendations?