My current project involves a navigation bar with four items, each accompanied by an icon. These icons are positioned absolutely one behind the other and are loaded into the view from different templates within the same controller.
I am attempting to dynamically change the z-index of the icon based on the clicked menu item using AngularJS. I have experimented with methods like ng-switch, but my lack of experience has made it challenging to find a solution.
If anyone has any ideas or insights on how to resolve this issue, I would greatly appreciate your input.
Thank you in advance!
HTML
Header View:
<nav id="top-nav">
<ul>
<li ui-sref="root.home";>Home</li>
<li ui-sref="root.drinks">Drinks</li>
<li ui-sref="root.food-and-snacks">Food And Snacks</li>
<li ui-sref="root.contacts">Contacts</li>
</ul>
</nav>
Icons View:
<ul>
<li>Home Icon</li>
<li>Drinks Icon</li>
<li>Food Icon</li>
<li>Contacts Icon</li>
</ul>
CSS
ul li{
position: absolute;
height: 50px;
width: 50px;
lefT: 0;
top: 0;
z-index: 0;
}