I have implemented header and footer navigation with different states using jQuery. However, I am encountering an issue when trying to update the header nav upon clicking on the footer nav items. Specifically, I want the header nav to reflect the same selection as the footer nav when a user clicks on a list item. Please refer to the jsfiddle example I provided.
Update: The header nav contains the main list items, while the footer nav includes both main list items and sub-navs. My goal is to achieve the same functionality where clicking on the first list item labeled "footerTitle" updates the header nav accordingly. I have made changes to the jsfiddle link.
$(".Nav > li").live({
mouseover:function(){
$(this).addClass("menuHover");
},
mouseout:function(){
$(this).removeClass("menuHover");
},
click:function(){
$(".Nav > li").removeClass("menuClicked");
$(this).addClass("menuClicked");
}
});
$(".footer > li").live({
mouseover:function(){
$(this).addClass("menuHover");
},
mouseout:function(){
$(this).removeClass("menuHover");
},
click:function(){
$(".Nav > li").removeClass("menuClicked");
$(".Nav > li").addClass("menuClicked");
$(".footer > li").removeClass("menuClicked");
$(this).addClass("menuClicked");
}
});
.menuHover{
background-color:#666;
color:#fff;
}
.menuClicked{
background-color:yellow;
color:#666;
}
<h1>Header NAV</h1>
<ul class="Nav">
<li class ="menuClicked"> List 1 </li>
<li>List 2 </li>
<li> List 3 </li>
<li> List 4 </li>
<li> List 5</li>
</ul>
<hr />
<h1>FOOTER NAV</h1>
<ul class="footer">
<li class ="footerTitle"> List 1 </li>
<li>Sub List 2 </li>
<li>Sub List 3 </li>
<li> Sub List 4 </li>
<li>Sub List 5</li>
</ul>
<ul class="footer">
<li class ="footerTitle"> List 2 </li>
<li>Sub List 2 </li>
<li>Sub List 3 </li>
<li> Sub List 4 </li>
<li>Sub List 5</li>
</ul>
<ul class="footer">
<li class ="footerTitle"> List 3 </li>
<li>Sub List 2 </li>
<li>Sub List 3 </li>
<li> Sub List 4 </li>
<li>Sub List 5</li>
</ul>
<ul class="footer">
<li class ="footerTitle"> List 4 </li>
<li>Sub List 2 </li>
<li>Sub List 3 </li>
<li> Sub List 4 </li>
<li>Sub List 5</li>
</ul>
<ul class="footer">
<li class ="footerTitle"> List 5 </li>
<li>Sub List 2 </li>
<li>Sub List 3 </li>
<li> Sub List 4 </li>
<li>Sub List 5</li>
</ul>