Add a transition on a dropdown menu

Question

I have a dropdown menu, which I toggle with Javascript. On click the dropdown opens (display:none -> display:block)

Now I would like to add a transition, so the dropdown looks a little smoother. I tried multiple ways, but nothing changes. Any tips? :)

To the code:https://codepen.io/pkl_9876/pen/vzOEPj

function ToggleDropdownAdmin() {
    document.getElementById("Dropdown_Admin").classList.toggle("js_show"),
    document.getElementById("DropdownRotate_Admin").classList.toggle("js_rotate"),
    document.getElementById("DropdownBtn_Admin").classList.toggle("js_color");
}

function ToggleDropdownUsers() {
    document.getElementById("Dropdown_Users").classList.toggle("js_show"),
    document.getElementById("DropdownRotate_Users").classList.toggle("js_rotate"),
    document.getElementById("DropdownBtn_Users").classList.toggle("js_color");
}

function ToggleDropdownHome() {
    document.getElementById("DropdownBtn_Home").classList.toggle("js_color");
}

.list-unstyled,
.list-unstyled > li > a {
 list-style-type: none;
 text-decoration: none;
}


/** MENUEAREA **/

#MenueArea {
 float: right;
 width: 30%;
 height: 100%;
 padding: 0px;
 background-color: #DC0000;
}

.spacer { height: 80px; }


/** NAVIGATION LIST **/

.mainmenue>li>a {
 position: relative;
 display: block;
 padding: 8px 20px;
 margin: 0;
 color: #fff;
 text-decoration: none;
 font-size: 18px;
}

.menueicon {
 width: 20px;
 color: #fff;
 margin-right: 15px;
}

.rotate-icon {
 position: absolute;
 top: 8px;
 right: 20px;
}

.submenue {
 display: none;
 padding: 8px 0px 8px 80px;
 margin: 0;
}

.submenue > li > a {
 display: block;
 padding: 3px 0;
 margin: 0;
 color: #fff;
 text-decoration: none;
 font-size: 16px;
}

.submenue > li > a:hover { color: #000; }
.js_show { display: block; }

.js_rotate {
 transform: rotate(180deg);
 -webkit-transition-duration: 0.5s;
 /* Safari */
 transition-duration: 0.5s;
}

.js_color { background-color: #000; }


/** RIPPLE EFFECT **/

.ripple {
 background-position: center;
 transition: background 0.8s;
}

.ripple:hover {
 background: #000 radial-gradient(circle, transparent 1%, #000 1%) center/15000%;
}

.ripple:active {
 background-color: #444;
 background-size: 100%;
 transition: background 0s;
}

<!-- MENUEAREA -->
<aside id="MenueArea">               
    <ul class="mainmenue list-unstyled">
        <li><a href="#" onclick="ToggleDropdownAdmin()" id="DropdownBtn_Admin" class="ripple"><i class="menueicon fas fa-cogs"></i> Main 1<i id="DropdownRotate_Admin" class="rotate-icon fa fa-angle-down"></i></a>

            <ul id="Dropdown_Admin" class="submenue list-unstyled dropdown-content">
                <li><a href="#">Sub 1</a></li>
                <li><a href="#">Sub 2</a></li>
                <li><a href="#">Sub 3</a></li>
                <li><a href="#">Sub 4</a></li>
                <li><a href="#">Sub 5</a></li>
            </ul>

        </li>

        <li><a href="#" onclick="ToggleDropdownUsers()" id="DropdownBtn_Users" class="ripple"><i class="menueicon fas fa-users"></i> Main 2<i id="DropdownRotate_Users" class="rotate-icon fa fa-angle-down"></i></a>

            <ul id="Dropdown_Users" class="submenue list-unstyled dropdown-content">
                <li><a href="#">Sub 1</a></li>
                <li><a href="#">Sub 2</a></li>
                <li><a href="#">Sub 3</a></li>
            </ul>

        </li>

        <li><a href="#" onclick="ToggleDropdownHome()" id="DropdownBtn_Home" class="ripple"><i class="menueicon fas fa-home"></i> Main 3</a></li>
    </ul>
    <!-- END NAVIGATION LIST -->    

</aside>

What you need to do is use `max-height` on start set it to 0 and expanded set it to max-height or a height it will never reach. the max-height can be animated. — SuperDJ, Aug 22 '18 at 14:30

score -1 · Answer 1 · answered Aug 22 '18 at 14:34

You can't transition from display: none; to display: block;

You could try something like this if you're using vanilla only js.

.submenue {
    padding: 8px 0px 8px 80px;
    margin: 0;
  visibility: hidden;
  opacity: 0;
  max-height: 0;
  transition: all .4s;
}
.js_show {
  max-height: 500px;
  opacity: 1;
  visibility: visible;
}

Or, if you have jQuery included - you could use the slideDown() function.

Add a transition on a dropdown menu

1 Answers1