How to toggle a nav menu with CSS?

Question

Is it possible to create a transition on hover that toggles a nav li down with pure css?

I created a li named Categorie. I have several categories in my database, so each category gets a new li:

<ul id="categorie">
  <li><a href="?control=bezoeker&action=categorie">Categorie</a>
    <ul>
       <?php foreach($categorieen as $categorie):?>
         <li><a href="?control=bezoeker&action=category&aid=<?= $categorie->getId();?>"> 
         <?= $categorie->getNaam();?></a></li>
       <?php endforeach;?>
     </ul>
   </li>
</ul>

So I want to toggle 'Categorie' off and on hover on so you can see the all other sub-li's

I tried to add a transition: 500ms ease-out 1s;on my hover, but it didn't work out. Is there another way to accomplish this? Or do I need to use jQuery?

My toggle is not a onClick, it's on hover, so this question is not a duplicate

^ See any of the answers that mention the checkbox hack, and just set the menu class to hidden, then when checked set it to show. There's probably a more direct duplicate out there, but this one should cover the gist of what you're asking (how to toggle visibility via CSS). Just to be clear, toggling is a click action, hovering is just a cursor detection action. — TylerH, Mar 23 '16 at 14:32

rmondesilva · Answer 1 · 2016-03-24T07:52:03.183

3

Yes,

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown .dropdown-content {
    display: block;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    overflow: hidden;
    -webkit-transition: all 0.5s; /* Safari */
    transition: all 0.5s;
    height: 0;
    opacity: 0;
}

.dropdown:hover .dropdown-content {
    -webkit-transition: height 0.5s; /* Safari */
    transition: height 0.5s;
    height: 40px;
    opacity: 1;
}

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text below to open the dropdown content.</p>

<div class="dropdown">
  <span>Mouse over me to slide down</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

Reference

edited Mar 24 '16 at 07:52

answered Mar 23 '16 at 14:24

rmondesilva

1,732
3
17
29

This is exactly what my code does, your box appears suddenly, not with a transition. – Blank Mar 23 '16 at 14:26
What kind of transition do you want? – rmondesilva Mar 23 '16 at 14:26
A toggle, like this one, http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_toggle_speed – Blank Mar 23 '16 at 14:28
Upvoting because your answer solved what OP seemed to be asking for with the original phrasing. – TylerH Mar 23 '16 at 14:35
@TylerH thank you for that. Blank, I updated my answer. – rmondesilva Mar 23 '16 at 14:40

How to toggle a nav menu with CSS?

1 Answers1