Almost every one of us might have come across this scenario where transitions and animations won’t apply to display properties.

There are many works around to achieve this depending on the scenario. Similarly, I have taken one to explain this.

Assume you have a navigation bar on your page where it displays the submenu on hovering it under that category.

At first, I achieved this simply by applying CSS display block and none properties. but the challenge is to apply transitions for smooth interaction. I tried this using visibility: hidden; and opacity:0; but this won’t work as it still occupies some space on your page. Then after doing some research and development from other sources height:0px, overflow: hidden, and opacity:0 worked for me. All you need to do some additional adjustments using positions to meet the requirement.

CODE

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body{margin:0px}

.Menu{
background-color:#000;
color:#fff;
padding:20px;
text-align:center;
cursor:pointer;
position:relative;
}

.submenu ul{margin:0px;}

.submenu{
background-color:#2071b3;
height:0px;
overflow:hidden;
opacity: 0;
position:absolute;
width:100%;
left:0px;
top: 58px;
}

.Menu:hover .submenu{
height:auto;
transition: all .5s ease-in-out;
opacity: 1;
}

</style>
</head>
<body>
<div class="mainContainer">
	<div class="Menu">
		Home
        <div class="submenu">
    	<ul>
        	<li>About</li>
            <li>Faqs</li>
            <li>Appointment</li>
            <li>Contact</li>
        </ul>
    </div>
    </div>
</div>
</body>
</html>
Page Title

Result:

Write a comment