CSS Question
CSS ONLY - how to slide out menu on button hover?
I want the menu to slide out when I hover over a button. Somehow I it only works when I add the hover effect to the menu itself, not to a button. All I could find online was the same (hover effect was attached to the menu that should slide out, not a button). How can I implement that?
jsfiddle: https://jsfiddle.net/codingcodingcoding/tuhug8x8/
html:
<span class="glyphicon glyphicon-home icon" style="font-size:40px;z-index:2;"> </span>
<nav id="navigation">
<ul>
<li>home</li>
<li>home</li>
<li>home</li>
</ul>
</nav>
css:
.icon:hover#navigation {
left: 0;
}
.icon {
left: 0px;
}
#navigation {
position: fixed;
width: 200px;
height: 300px;
background-color: red;
top: 0;
left: -200px;
}
Recommended for you: Get network issues from WhatsUp Gold. Not end users.
Answer Source
html
<span class="glyphicon glyphicon-home icon" style="font-size:40px;z-index:2;"> </span>
<nav id="navigation">
<ul>
<li>home</li>
<li>home</li>
<li>home</li>
</ul>
</nav>
css:
.icon:hover + #navigation {
left: 0;
}
.icon {
left: 0px;
}
#navigation {
position: fixed;
width: 200px;
height: 300px;
background-color: red;
top: 0;
left: -200px;
}
Here, I have added just + selector olny.
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download