Recently, I have implemented a header and footer navigation on my website. The header navigation consists of 1 UL (unordered list), while the footer navigation comprises 5 ULs. My goal is to align the first child of each UL in the footer navigation with the corresponding item in the header nav. The footer nav shares similar main items as the header nav but includes sub-items within them. Can someone provide assistance with this task?
To better illustrate my issue, I have created a jsFiddle:
$(".Nav > li").live({
mouseover:function(){
$(this).addClass("menuHover");
},
mouseout:function(){
$(this).removeClass("menuHover");
},
click:function(){
$(".Nav > li").removeClass("menuClicked");
$(this).addClass("menuClicked");
}
});
$(".footer > li:first-child").live({
mouseover:function(){
$(this).addClass("menuHover");
},
mouseout:function(){
$(this).removeClass("menuHover");
},
click:function(){
$(".Nav > li").removeClass("menuClicked");
$(".Nav > li").eq($(this).index()).addClass("menuClicked");
$(".footer > li").removeClass("menuClicked");
$(this).addClass("menuClicked");
}
});
.menuHover{
background-color:#666;
color:#fff;
}
.menuClicked{
background-color:yellow;
color:#666;
}
.footerTitle{
font-weight: bold;
color:black;
}
<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>