Adding Transition to dropdown menu

Question

How can I add transition to the dropdown menu? following is the code.

HTML

<div class="dropdown">
        <button>BLOG</button>
        <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
</div>

CSS

.dropdown
{
    position: relative;
}
.dropdown .dropdown-content
{
    display: none;
    position: absolute;
    height: 0px;
    transition: height 1s;
    z-index: 1;
}
.dropdown:hover .dropdown-content
{
    display: block;
    background-color: #0d0f5b;
    height: 60px;
}

This code does not show transition. How can I enable it?

What is the issue you're having? I see the dropdown when I hover over BLOG — PolarisRouge, Aug 08 '20 at 18:35

PolarisRouge · Answer 1 · 2020-08-08T19:02:56.490

0

You can play around with transition to your preference but this is how you would do it. Basically in the transition property add any property you want to transition.

.dropdown
{
    position: relative;
}
.dropdown .dropdown-content
{
    visibility: hidden;
    position: absolute;
    min-height: 0px;
    z-index: 1;
    opacity: 0;
    transition: visibility 0s, min-height 1s, opacity 0.5s linear;
}
.dropdown:hover .dropdown-content
{
    visibility: visible;
    background-color: #0d0f5b;
    min-height: 60px;
    opacity: 1;
}

<div class="dropdown">
        <button>BLOG</button>
        <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
</div>

edited Aug 08 '20 at 19:02

answered Aug 08 '20 at 18:46

PolarisRouge

395
5
14

answer by you and @sergey kuznetsov do the same thing but I want the height of dropdown menu to reach from 0 to 60px smoothly. your answer shows the visibilty smoothly. – Zain Ul Abideen Aug 08 '20 at 18:54
I have added height transition – PolarisRouge Aug 08 '20 at 19:03

score 0 · Answer 2 · answered Aug 08 '20 at 18:48

transition to display: none does not work.

.dropdown
{
    position: relative;
}

.dropdown-content
{
    position: absolute;
    background-color: #0d0f5b;
    height: 60px;
    transition: 1s;
    z-index: 1;
    opacity: 0;
}
.dropdown:hover .dropdown-content
{
    opacity: 1
}

<div class="dropdown">
        <button>BLOG</button>
        <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
</div>

score 0 · Accepted Answer · answered Aug 08 '20 at 18:55

Height is not effected by the transition, To have such visual effect of a height transition, you can use max-height, but keep in mind that you can't have display:none, and display:block

.dropdown
{
    position: relative;
}
.dropdown .dropdown-content
{
    display: none;
    position: absolute;
    height: 0px;
    transition: height 1s;
    z-index: 1;
}
.dropdown:hover .dropdown-content
{
    display: block;
    background-color: #0d0f5b;
    height: 60px;
}

To

.dropdown
{
    position: relative;
}
.dropdown .dropdown-content
{
    position: absolute;
    max-height: 0px;
    transition: max-height 1s;
    z-index: 1;
    overflow: hidden;
}
.dropdown:hover .dropdown-content
{
    display: block;
    background-color: #0d0f5b;
    max-height: 60px;
}

If its possible remove the display:none, and replace the height with max-height, because max-height can have a transition, hope this fix your issue, i find that your height is smaller than 60px maybe 20px fits your need better, try to adjust it to what you want. Good luck

score 0 · Answer 4 · answered Aug 08 '20 at 19:03

Try this

.dropdown
{
    position: relative;
}
.dropdown .dropdown-content
{
    display: none;
    position: absolute;
    height: 0px;
    z-index: 1;
    transition: 20s opacity linear;
    align-items:center;
    opacity: 0.1;
}
.dropdown:hover .dropdown-content
{
    display: flex;
    background-color: #0d0f5b;
    height: 60px;
    opacity:1;
}
.dropdown:hover .dropdown-content a{
    color:white;
    padding:10px;
    margin-right:3px;
}

<div class="dropdown">
        <button>BLOG</button>
        <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
</div>

Adding Transition to dropdown menu

4 Answers4