Currently, I am dealing with an unordered list that contains 4 items. The goal is to have the list grow to 100% of its width when hovered over, while all 'noun hovered li' items should shrink to a width of 0%. Once the cursor leaves, everything should revert back to their original state of 25% width. Here's a similar setup:
<ul id="menu2">
<li class="color"></li>
<li class="color"></li>
<li class="color"></li>
<li class="color"></li>
</ul>
CSS styling:
#menu2{
overflow: hidden;
padding-left: 0;
padding-right: 0;
margin: 0;
}
.color{
display: inline-block;
position: relative;
list-style: none;
float: left;
height: 110px;
margin-right: 0;
width: 25%;
background-color: blue;
cursor: pointer;
}
.stateHovered{
width: 100%;
transition: all 500ms ease-out;
background-color: #FAA500;
}
.stateOff{
width: 0;
}
Javascript functionality:
function addListeners(){
document.getElementById('menu2').children.addEventListener("mouseover", toggleClassFunction);
function toggleClassFunction() {
for(i = 0; i < menu2.length; i++) {
if(menu2[i] !=this) {
menu2[i].className = "stateOff";
}else if(menu2[i] === this){
menu2[i].className = "stateHovered";
}else {
menu2[i].className = "color";
}
}
}
}
window.addEventListener("load", addListeners);
Unfortunately, the end result doesn't seem to be functioning correctly...