Witness the magic in action! By clicking on the black box below, a larger black box will gracefully emerge from beneath the sidebar. While it may not be as clear in jsfiddle, rest assured that this effect is more pronounced in browsers. Thanks to some clever z-index manipulation, I successfully achieved the desired slide-out motion for the window from under the sidebar. However, there's a glitch when trying to send the box back; instead of gliding underneath, it awkwardly hovers over the sidebar. I've tinkered with a few solutions but none have done the trick. Any help would be greatly appreciated! :)
HTML
<div id="sidemenu">
<div id="regionsContainer">
<div id="regionsUnitedStates" class="not-open">
<div id="regionsUnitedStatesTooltip"></div>
</div>
</div>
<div id="regionsUnitedStatesChooseState"></div>
</div>
CSS
#sidemenu {
width: 60px;
height: 100%;
min-width: 60px;
height: 100vh;
max-width: 60px;
background-color: #383D3F;
background-size: 100% 100%;
background-attachment: fixed;
position: absolute;
left:-60px;
transition: left ease-in-out 0.5s;
}
#sidemenu.show {
left: 0;
}
#regionsContainer {
width: 60px;
height: 481px;
min-height: 481px;
min-width: 60px;
max-width: 60px;
max-height: 481px;
background-color: #383D3F;
position: relative;
top: 25%;
bottom: 25%;
}
#regionsUnitedStates {
width: 60px;
height: 60px;
background: #000;
}
#regionsUnitedStatesTooltip {
opacity:0;
background: #555;
height:60px;
width:180px;
left:100px;
position:absolute;
transition:all ease-in-out 0.25s;
top:0;
visibility:hidden;
}
#regionsUnitedStates.not-open:hover #regionsUnitedStatesTooltip{
left: 60px;
opacity:1;
visibility:visible;
}
#regionsUnitedStatesChooseState{
position:absolute;
transition:all ease-in-out 0.25s;
left: -250px;
width: 250px;
height: 100%;
background: #000;
top:0;
}
#regionsUnitedStatesChooseState.show {
left: 60px;
z-index:-1;
}
jQuery
$(function() {
setTimeout(function() { $("#sidemenu").addClass("show") }, 500);
});
$(function() {
$("#regionsUnitedStates").on("click", function() {
$("#regionsUnitedStatesChooseState").toggleClass("show");
$("#regionsUnitedStates").toggleClass("not-open");
});
});
Experience the Example: