javascript2016 javascript2016 - 10 months ago 90
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;
}

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