My website features a hidden side menu that slides out when the main div is hovered over. The challenge arises when I want the side menu to remain visible when interacting with its elements, while still hiding when both the main div and side menu are not being hovered over. The solution involves adjusting the z-index after sliding out, but this causes issues when trying to hide the side menu upon hover out.
How can I implement a functionality where the side bar slides out when the main div is hovered over, remains visible when interacting with it, and slides back to being hidden when both elements are not hovered over?
Jsfiddle: http://jsfiddle.net/aritro33/RY87e/1/embedded/result/
See below for the code:
HTML:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato">
<div class="profile_card">
<div class="profile">
<div class="avatar_image">
<h1 id="grade">A</h1>
</div>
<div class="inner_content">
<h2 class="name" id="name">Math</h2>
<span id="desc">
<p class="description" id="desc_one">Megan Babat </p>
<p class="description" id="desc_two">Room 207, Raisin Building </p></span>
<div class="social_links"> <span class="bottom entypo-mail"></span> <span class=" bottom entypo-phone"></span>
<span class="bottom entypo-cloud"></span>
</div>
</div>
<div class = "box">
<div class="sidemenu1" id="sidemenu1"> <span class="menuicon entypo-plus"></span></div>
<div class="sidemenu2" id="sidemenu2"> <span class="menuicon entypo-eye"></span></div>
</div>
</div>
</div>
</div>
CSS:
@import url(http://weloveiconfonts.com/api/?family=entypo);
/* styling rules */
JS:
$("#grade").hover(function () {
document.getElementById("grade").innerHTML = "95";
});
$("#grade").mouseout(function () {
document.getElementById("grade").innerHTML = "A";
});
$('.profile').hover(function(){
setInterval(function(){document.getElementById("sidemenu1").style.zIndex="1"; document.getElementById("sidemenu2").style.zIndex="1";}, 150);
});