I've been attempting to create a menu with very specific behavior: 1) Submenu transitions in when its corresponding menu item is hovered over 2) Submenu remains visible for a moment after moving the mouse away before transitioning out 3) If another menu item is hovered over, any remaining submenus from previous hovers disappear instantly.
I've been struggling with this for some time now and encountering unexplainable bugs along the way.
Here's the HTML structure I used (using divs instead of a list):
<div class="menu">
<div class="menu-item" id="item-1">
Item 1
<div class="menu-child" id="child-1">Child 1</div>
</div>
<div class="menu-item" id="item-2">
Item 2
<div class="menu-child" id="child-2">Child 2</div>
</div>
<div class="menu-item" id="item-3">
Item 3
<div class="menu-child" id="child-3">Child 3</div>
</div>
</div>
The accompanying CSS:
.menu-item .menu-child {
margin-top:10px;
border:1px solid #000000;
height:22px;
visibility:hidden;
opacity:0;
-webkit-transition: visibility 1s 1s, opacity 1s 1s;
transition: visibility 1s 1s, opacity 1s 1s;
}
.menu-item:hover .menu-child {
visibility:visible;
opacity:1;
-webkit-transition: visibility 1s, opacity 1s;
transition: visibility 1s, opacity 1s;
}
.menu {
display: -webkit-flex;
display:flex;
}
.menu-item {
display:inline-block;
width:32%;
padding-left:20px;
background:none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
And here's the JavaScript snippet:
$('#item-1').hover(
function() {
$("#child-2, #child-3").hide();
},
function() {
$("#child-2, #child-3").show();
}
);
$('#item-2').hover(
function() {
$("#child-1, #child-3").hide();
},
function() {
$("#child-1, #child-3").show();
}
);
$('#item-3').hover(
function() {
$("#child-2, #child-1").hide();
},
function() {
$("#child-1, #child-2").show();
}
);