How to put a animation on dropmenu using CSS?

mind set

/*.dropdownMenuLista {
  -webkit-transition: max-height 0.5s, opacity 0.2s 0.1s, visibility 0s 4s;
  -moz-transition: max-height 0.5s, opacity 0.2s 0.1s, visibility 0s 4s;
  -ms-transition: max-height 0.5s, opacity 0.2s 0.1s, visibility 0s 4s;
  -o-transition: max-height 0.5s, opacity 0.2s 0.1s, visibility 0s 4s;
  transition: max-height 0.5s, opacity 0.2s 0.1s, visibility 0s 4s;
  max-height: 0;
  display: block;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}

.dropdownMenu {
  -webkit-transition: max-height 0.6s, opacity 0.2s, visibility 0s;
  -moz-transition: max-height 0.6s, opacity 0.2s, visibility 0s;
  -ms-transition: max-height 0.6s, opacity 0.2s, visibility 0s;
  -o-transition: max-height 0.6s, opacity 0.2s, visibility 0s;
  transition: max-height 0.6s, opacity 0.2s, visibility 0s;
  max-height: 290px;
  opacity: 1;
  visibility: visible;
  padding: 0;
}*/

ul.ulDropMenu{
        float: left;
    }
    ul.ulDropMenu li{
        float: left;
        list-style: none;
        position: relative;
    }
    ul.ulDropMenu li a{
        display: block;
        padding: 9px 14px;
    }
    ul.ulDropMenu li ul{
        display: none;
        position: absolute;
        background-color: #fff;
        border-radius: 4px;
        padding: 8px;
    }
    ul.ulDropMenu li:hover ul{
        display: block;
    }
    ul.ulDropMenu li ul li{
        width: 120px;
    }
    ul.ulDropMenu li ul li a{
        padding: 6px 14px;
        color: #2A2A2A;
    }
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

    <ul class="ulDropMenu">

      <li class="pr-5 dropdownMenu">

        <a class="nav-link" id="navbarDropdown" aria-haspopup="true" aria-expanded="false" role="button" data-toggle="dropdown" style="transition: color .4s;" href="#">Drop Menu
        <i class="fa fa-caret-down"></i>
          
        </a>

          <ul class="dropdownMenuLista">                     

            <li aria-labelledby="navbarDropdown">
              <a style="transition: color .4s;" href="#">items</a>
              <a style="transition: color .4s;" href="#">items</a>
              <a style="transition: color .4s;" href="#">items</a>
            </li>

          </ul>

      </li>

    </ul>

How to put an animation with transition on this drop menu? I have this code that should put an animation on drop menu, but it's not working.

When i add the classes dropdownMenuLista and dropdownMenu the dropmenu stop working.

I'm using bootstrap, but I don't want to use the JS drop menu from bootstrap. I need a CSS version of the drop menu for some purposes.....

Jaan Oras

The whole thing could be cleaned up a lot, but doing this would not explain to you what is wrong, so I will change only what is necessary.

The core issue here is that you cannot animate from max-height of display: none to display: block, because there is no max-height for non-block items.

Thus we need to remove switching of display of ul.ulDropMenu li:hover ul(. dropdownMenuLista) element and show/hide some other way. Since it is hidden in .dropdownMenuLista class, by max-height, opacity and visibility props, we need to enable those on hover.

Additionally, your visibility animation was 4 secs but others were < 1sec. Thus the possibly visible animations would run through before the element actually became visible after 4 seconds.

All changes are marked with comments it the snippet.

.dropdownMenuLista {
  -webkit-transition: max-height 1s, opacity 0.2s 0.1s;
  -moz-transition: max-height 1s, opacity 0.2s 0.1s;
  -ms-transition: max-height 1s, opacity 0.2s 0.1s;
  -o-transition: max-height 1s, opacity 0.2s 0.1s;
  transition: max-height 1s, opacity 0.2s 0.1s;
  
  /* removed visibility animation */
  
  max-height: 0;
  display: block;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}

.dropdownMenu {
  -webkit-transition: max-height 0.6s, opacity 0.2s, visibility 0s;
  -moz-transition: max-height 0.6s, opacity 0.2s, visibility 0s;
  -ms-transition: max-height 0.6s, opacity 0.2s, visibility 0s;
  -o-transition: max-height 0.6s, opacity 0.2s, visibility 0s;
  transition: max-height 0.6s, opacity 0.2s, visibility 0s;
  max-height: 290px;
  opacity: 1;
  visibility: visible;
  padding: 0;
}

ul.ulDropMenu{
        float: left;
    }
    ul.ulDropMenu li{
        float: left;
        list-style: none;
        position: relative;
    }
    ul.ulDropMenu li a{
        display: block;
        padding: 9px 14px;
    }
    ul.ulDropMenu li ul{
       /* display: none; - cannot animate */
        
        position: absolute;
        background-color: #fff;
        border-radius: 4px;
        padding: 8px;
    }
    ul.ulDropMenu li:hover ul{
        /*  display: block; - cannot animate */
      
        
        /* show by enabling all props that
        hide this element in .dropdownMenuLista
        style */
        max-height: 290px;
        visibility: visible;
        opacity: 1;      
    }
    ul.ulDropMenu li ul li{
        width: 120px;
    }
    ul.ulDropMenu li ul li a{
        padding: 6px 14px;
        color: #2A2A2A;
    }
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

    <ul class="ulDropMenu">

      <li class="pr-5 dropdownMenu">

        <a class="nav-link" id="navbarDropdown" aria-haspopup="true" aria-expanded="false" role="button" data-toggle="dropdown" style="transition: color .4s;" href="#">Drop Menu
        <i class="fa fa-caret-down"></i>
          
        </a>

          <ul class="dropdownMenuLista">                     

            <li aria-labelledby="navbarDropdown">
              <a style="transition: color .4s;" href="#">items</a>
              <a style="transition: color .4s;" href="#">items</a>
              <a style="transition: color .4s;" href="#">items</a>
            </li>

          </ul>

      </li>

    </ul>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related