I am currently working on developing a navigation bar that includes standard navigation elements along with an indicator bar positioned below the active page. My objective is to have this bar dynamically move beneath whichever element the user hovers over and adjust its size automatically based on predefined parameters, possibly considering the length of the text. While I have successfully created the navigation bar structure, I am unsure about how to implement this interactive effect. Should I continuously calculate the mouse's current position and factor in the variance between its current location and the hover point? The secondary goal of allowing for resizing is less critical but still desirable.
Here is a glimpse of what I have accomplished so far:
<header class="header">
<div class="logo">
<nav id="nav_bar">
<ul id="nav_ul">
<li><a href="#">apples</a></li>
<li><a href="#">bananas</a></li>
<li><a href="#">tomatos</a></li>
<li><a href="#">onions</a></li>
</ul>
<div id="container">
<div id="bar"></div>
</div>
</nav>
</div>
</header>
CSS:
#nav_ul a{
color: #685e6d;
text-decoration: none;
display: inline-block;
-webkit-transition: color 0.4s ease-in-out;
-moz-transition: color 0.4s ease-in-out;
-ms-transition: color 0.4s ease-in-out;
-o-transition: color 0.4s ease-in-out;
transition: color 0.4s ease-in-out;
}
#nav_ul{
display: inline-block;
list-style-type: none;
}
#nav_ul li{
display: inline-block;
position: relative;
left: 90px;
bottom: 30px;
font-size: 19px;
margin-left: 40px;
font-weight: 100;
font-size: 16px;
}
#nav_ul a:hover{
color: #4ad1fd;
}
#container{
position: relative;
left: 167px;
height: auto;
width: 530px;
top: 5px;
}
#bar{
position: absolute;
left: 0;
bottom: 0;
height: 7px;
width: 107px;
background-color: #ffcc00;
border-radius: 3px;
}
Considering something similar to the image below: