Create CSS Animated dropdown menu

0
9
views
Featured image of CSS Animated dropdown menu

Learn how to create CSS Animated dropdown menu

In this tutorial we will create 9 Animated Dropdown Menus with CSS. We will only use HTML and CSS to create these Dropdown Menus. Below all the lists of CSS animated dropdown menu –

#1) Simple CSS Dropdown Menu

This shows how to create Dropdown menu with pure css
Demo

Source Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Dropdown Menu</title>
    <style>
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        body {
            font-family: sans-serif;
            margin: 0;
            padding: 0;
            background: #f2f2f2;
        }

        .navigation-bar {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            height: 60px;
            background-color: #000;
            
        }
        .navigation-bar  li  a{
            display: block;
            line-height: 60px;
            color: #999;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 14px;
            padding: 0 10px;
        }
        .navigation-bar  li  a:hover{
            background-color: #81d742;
            color: #FFF;
        }
        .dropdown-menu{
            list-style: none;
            margin: 0;
            padding: 0;
            background: #333;
            display: none;
            flex-direction: column;
            position: absolute;
            overflow: hidden;
            z-index: 999;
        }
        .dropdown-menu li{
            min-width: 200px;
        }
        .dropdown-menu li  a{
            font-size: 14px;
            text-decoration: none;
            text-transform: uppercase;
            line-height: 35px;
            padding: 0 10px;
            display: block;
            color: #999;
        }
        .dropdown-menu li  a:hover{
            background-color: #81d742;
            color: #FFF;
           
        }
        .navigation-bar  li:hover .dropdown-menu{
            display:flex;
        }
    </style>
</head>

<body>
    <ul class="navigation-bar">
        <li><a href="#">Home</a></li>
        <li><a href="javascript:void(0)">Categories</a>
            <ul class="dropdown-menu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">PHP</a></li>
            </ul>
        </li>
    </ul>

</body>

</html>

#2) CSS Dropdown Menu with Fade out Effect

Demo

Source Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Dropdown Menu</title>
    <style>
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        body {
            font-family: sans-serif;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            background: #f2f2f2;
        }

        .navigation-bar {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            height: 60px;
            background-color: #000;

        }

        .navigation-bar li a {
            display: block;
            line-height: 60px;
            color: #999;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 14px;
            padding: 0 10px;
        }

        .navigation-bar li a:hover {
            background-color: #81d742;
            color: #FFF;
        }

        .dropdown-menu {
            list-style: none;
            margin: 0;
            padding: 0;
            background: #333;
            display: flex;
            flex-direction: column;
            position: absolute;
            overflow: hidden;
            z-index: 999;
            /* animation */
            visibility: hidden;
            opacity: 0;
            -webkit-transition: opacity .5s;
            -moz-transition: opacity .5s;
            -ms-transition: opacity .5s;
            -o-transition: opacity .5s;
            transition: opacity .5s;
            /* end of animation */


        }

        .dropdown-menu li {
            min-width: 200px;
        }

        .dropdown-menu li a {
            font-size: 14px;
            text-decoration: none;
            text-transform: uppercase;
            line-height: 35px;
            padding: 0 10px;
            display: block;
            color: #999;
        }

        .dropdown-menu li a:hover {
            background-color: #81d742;
            color: #FFF;

        }

        .navigation-bar li:hover .dropdown-menu {
            opacity: 1;
            visibility: visible;
        
        }
    </style>
</head>

<body>
    <ul class="navigation-bar">
        <li><a href="#">Home</a></li>
        <li><a href="javascript:void(0)">Categories</a>
            <ul class="dropdown-menu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">PHP</a></li>
            </ul>
        </li>
    </ul>

</body>

</html>

#3) Slide down Dropdown Menu

Demo

Source Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slide down Dropdown Menu</title>
    <style>
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        body {
            font-family: sans-serif;
            margin: 0;
            padding: 0;
            background: #f2f2f2;
        }

        .navigation-bar {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            height: 60px;
            background-color: #000;

        }

        .navigation-bar li a {
            display: block;
            line-height: 60px;
            color: #999;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 14px;
            padding: 0 10px;
        }

        .navigation-bar li a:hover {
            background-color: #81d742;
            color: #FFF;
        }

        .dropdown-menu {
            list-style: none;
            margin: 0;
            padding: 0;
            background: #333;
            display: flex;
            flex-direction: column;
            position: absolute;
            overflow: hidden;
            z-index: 999;
            max-height: 0;
            transition: max-height .5s;
            -webkit-transition: max-height .5s;
            -moz-transition: max-height .5s;
            -o-transition: max-height .5s;
            -ms-transition: max-height .5s;
        }

        .dropdown-menu li {
            min-width: 200px;
        }

        .dropdown-menu li a {
            font-size: 14px;
            text-decoration: none;
            text-transform: uppercase;
            line-height: 35px;
            padding: 0 10px;
            display: block;
            color: #999;
        }

        .dropdown-menu li a:hover {
            background-color: #81d742;
            color: #FFF;

        }

        .navigation-bar li:hover .dropdown-menu {
            max-height: 400px;
        }
    </style>
</head>

<body>
    <ul class="navigation-bar">
        <li><a href="#">Home</a></li>
        <li><a href="javascript:void(0)">Categories</a>
            <ul class="dropdown-menu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">PHP</a></li>
            </ul>
        </li>
    </ul>

</body>

</html>

#4) Slide left to right Dropdown Menu

Demo

Source Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slide left to right Dropdown Menu</title>
    <style>
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        body {
            font-family: sans-serif;
            margin: 0;
            padding: 0;
            background: #f2f2f2;
        }

        .navigation-bar {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            height: 60px;
            background-color: #000;

        }

        .navigation-bar li a {
            display: block;
            line-height: 60px;
            color: #999;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 14px;
            padding: 0 10px;
        }

        .navigation-bar li a:hover {
            background-color: #81d742;
            color: #FFF;
        }

        .dropdown-menu {
            list-style: none;
            margin: 0;
            padding: 0;
            background: #333;
            display: flex;
            flex-direction: column;
            position: absolute;
            overflow: hidden;
            z-index: 999;
            /* animation */
            margin-left: -100%;

            -webkit-transition: margin-left .3s;
            -moz-transition: margin-left .3s;
            -o-transition: margin-left .3s;
            -ms-transition: margin-left .3s;
            transition: margin-left .3s;

            /* optional */
            visibility: hidden;

            /* end of animation */

        }

        .dropdown-menu li {
            min-width: 200px;
        }

        .dropdown-menu li a {
            font-size: 14px;
            text-decoration: none;
            text-transform: uppercase;
            line-height: 35px;
            padding: 0 10px;
            display: block;
            color: #999;
        }

        .dropdown-menu li a:hover {
            background-color: #81d742;
            color: #FFF;

        }

        .navigation-bar li:hover .dropdown-menu {
            margin-left: 0;
            /* optional */
            visibility: visible;


        }
    </style>
</head>

<body>
    <ul class="navigation-bar">
        <li><a href="#">Home</a></li>
        <li><a href="javascript:void(0)">Categories</a>
            <ul class="dropdown-menu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">PHP</a></li>
            </ul>
        </li>
    </ul>

</body>

</html>

#5) Slide right to left Dropdown Menu

Demo

Source Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slide right to left Dropdown Menu</title>
    <style>
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        body {
            font-family: sans-serif;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            background: #f2f2f2;
        }

        .navigation-bar {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            height: 60px;
            background-color: #000;

        }

        .navigation-bar li a {
            display: block;
            line-height: 60px;
            color: #999;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 14px;
            padding: 0 10px;
        }

        .navigation-bar li a:hover {
            background-color: #81d742;
            color: #FFF;
        }

        .dropdown-menu {
            list-style: none;
            margin: 0;
            padding: 0;
            background: #333;
            display: flex;
            flex-direction: column;
            position: absolute;
            overflow: hidden;
            z-index: 999;
            /* animation */
            margin-left: 100%;

            -webkit-transition: margin-left .3s;
            -moz-transition: margin-left .3s;
            -o-transition: margin-left .3s;
            -ms-transition: margin-left .3s;
            transition: margin-left .3s;

            /* optional */
            visibility: hidden;

            /* end of animation */

        }

        .dropdown-menu li {
            min-width: 200px;
        }

        .dropdown-menu li a {
            font-size: 14px;
            text-decoration: none;
            text-transform: uppercase;
            line-height: 35px;
            padding: 0 10px;
            display: block;
            color: #999;
        }

        .dropdown-menu li a:hover {
            background-color: #81d742;
            color: #FFF;

        }

        .navigation-bar li:hover .dropdown-menu {
            margin-left: 0;
            /* optional */
            visibility: visible;


        }
    </style>
</head>

<body>
    <ul class="navigation-bar">
        <li><a href="#">Home</a></li>
        <li><a href="javascript:void(0)">Categories</a>
            <ul class="dropdown-menu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">PHP</a></li>
            </ul>
        </li>
    </ul>

</body>

</html>

#6) Fold out Dropdown Menu

Demo

Source Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fold out Dropdown Menu</title>
    <style>
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        body {
            font-family: sans-serif;
            margin: 0;
            padding: 0;
            background: #f2f2f2;
        }

        .navigation-bar {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            height: 60px;
            background-color: #000;

        }

        .navigation-bar li a {
            display: block;
            line-height: 60px;
            color: #999;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 14px;
            padding: 0 10px;
        }

        .navigation-bar li a:hover {
            background-color: #81d742;
            color: #FFF;
        }

        .dropdown-menu {
            list-style: none;
            margin: 0;
            padding: 0;
            background: #333;
            display: flex;
            flex-direction: column;
            position: absolute;
            overflow: hidden;
            z-index: 999;
            /* animation */
            max-height: 0;
            transform: perspective(400) rotate3d(1, 0, 0, -90deg);
            -moz-transform: perspective(400) rotate3d(1, 0, 0, -90deg);
            -webkit-transform: perspective(400) rotate3d(1, 0, 0, -90deg);
            -moz-transform: perspective(400) rotate3d(1, 0, 0, -90deg);
            -ms-transform: perspective(400) rotate3d(1, 0, 0, -90deg);
            transform-origin: 50% 0;
            -moz-transform-origin: 50% 0;
            -webkit-transform-origin: 50% 0;
            -webkit-transition: 350ms;
            -o-transition: 350ms;
            transition: 350ms;
            /* end of animation */

        }

        .dropdown-menu li {
            min-width: 200px;
        }

        .dropdown-menu li a {
            font-size: 14px;
            text-decoration: none;
            text-transform: uppercase;
            line-height: 35px;
            padding: 0 10px;
            display: block;
            color: #999;
        }

        .dropdown-menu li a:hover {
            background-color: #81d742;
            color: #FFF;

        }

        .navigation-bar li:hover .dropdown-menu {
            max-height: 400px;
            transform: perspective(400) rotate3d(0, 0, 0, 0);
            -moz-transform: perspective(400) rotate3d(0, 0, 0, 0);
            -webkit-transform: perspective(400) rotate3d(0, 0, 0, 0);

        }
    </style>
</head>

<body>
    <ul class="navigation-bar">
        <li><a href="#">Home</a></li>
        <li><a href="javascript:void(0)">Categories</a>
            <ul class="dropdown-menu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">PHP</a></li>
            </ul>
        </li>
    </ul>

</body>

</html>

#7) Another fold out Dropdown Menu

Demo

Source Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fold out Dropdown Menu</title>
    <style>
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        body {
            font-family: sans-serif;
            margin: 0;
            padding: 0;
            background: #f2f2f2;
        }

        .navigation-bar {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            height: 60px;
            background-color: #000;

        }

        .navigation-bar li a {
            display: block;
            line-height: 60px;
            color: #999;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 14px;
            padding: 0 10px;
        }

        .navigation-bar li a:hover {
            background-color: #81d742;
            color: #FFF;
        }

        .dropdown-menu {
            list-style: none;
            margin: 0;
            padding: 0;
            background: #333;
            display: flex;
            flex-direction: column;
            position: absolute;
            overflow: hidden;
            z-index: 999;
            /* animation */
            max-height: 0;
            transform: perspective(400) rotate3d(1, 0, 0, -90deg);
            -moz-transform: perspective(400) rotate3d(1, 0, 0, -90deg);
            -webkit-transform: perspective(400) rotate3d(1, 0, 0, -90deg);
            -moz-transform: perspective(400) rotate3d(1, 0, 0, -90deg);
            -ms-transform: perspective(400) rotate3d(1, 0, 0, -90deg);
            -webkit-transition: 350ms;
            -o-transition: 350ms;
            transition: 350ms;
            /* end of animation */

        }

        .dropdown-menu li {
            min-width: 200px;
        }

        .dropdown-menu li a {
            font-size: 14px;
            text-decoration: none;
            text-transform: uppercase;
            line-height: 35px;
            padding: 0 10px;
            display: block;
            color: #999;
        }

        .dropdown-menu li a:hover {
            background-color: #81d742;
            color: #FFF;

        }

        .navigation-bar li:hover .dropdown-menu {
            max-height: 400px;
            transform: perspective(400) rotate3d(0, 0, 0, 0);
            -moz-transform: perspective(400) rotate3d(0, 0, 0, 0);
            -webkit-transform: perspective(400) rotate3d(0, 0, 0, 0);
            

        }
    </style>
</head>

<body>
    <ul class="navigation-bar">
        <li><a href="#">Home</a></li>
        <li><a href="javascript:void(0)">Categories</a>
            <ul class="dropdown-menu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">PHP</a></li>
            </ul>
        </li>
    </ul>

</body>

</html>

#8) Dropdown Menu with transform effect

Demo

Source Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transform Dropdown Menu</title>
    <style>
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        body {
            font-family: sans-serif;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            background: #f2f2f2;
        }

        .navigation-bar {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            height: 60px;
            background-color: #000;

        }

        .navigation-bar li a {
            display: block;
            line-height: 60px;
            color: #999;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 14px;
            padding: 0 10px;
        }

        .navigation-bar li a:hover {
            background-color: #81d742;
            color: #FFF;
        }

        .dropdown-menu {
            list-style: none;
            margin: 0;
            padding: 0;
            background: none;
            display: flex;
            flex-direction: column;
            position: absolute;
            z-index: 999;
            /* animation */
            visibility: hidden;
            /* end of animation */


        }
        .dropdown-menu > li:nth-child(odd){transform:translate(100px);}
        .dropdown-menu > li:nth-child(even){transform:translate(-100px);}


        .dropdown-menu li {
            min-width: 200px;
            background: #333;
            transition:transform 0.5s;
        }

        .dropdown-menu li a {
            font-size: 14px;
            text-decoration: none;
            text-transform: uppercase;
            line-height: 35px;
            padding: 0 10px;
            display: block;
            color: #999;
        }

        .dropdown-menu li a:hover {
            background-color: #81d742;
            color: #FFF;

        }

        .navigation-bar li:hover .dropdown-menu {
            visibility: visible;
        
        }

        .navigation-bar li:hover .dropdown-menu > li{
	        transform:translate(0);
        
        }
    </style>
</head>

<body>
    <ul class="navigation-bar">
        <li><a href="#">Home</a></li>
        <li><a href="javascript:void(0)">Categories</a>
            <ul class="dropdown-menu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">PHP</a></li>
            </ul>
        </li>
    </ul>

</body>

</html>

#9) Dropdown Menu with Zoom in and Zoom out effect

Demo

Source Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zoom in and Zoom out Dropdown Menu</title>
    <style>
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        body {
            font-family: sans-serif;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            background: #f2f2f2;
        }

        .navigation-bar {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            height: 60px;
            background-color: #000;

        }

        .navigation-bar li a {
            display: block;
            line-height: 60px;
            color: #999;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 14px;
            padding: 0 10px;
        }

        .navigation-bar li a:hover {
            background-color: #81d742;
            color: #FFF;
        }

        .dropdown-menu {
            list-style: none;
            margin: 0;
            padding: 0;
            background: none;
            display: flex;
            flex-direction: column;
            position: absolute;

            /* animation */
            opacity: 0;
            visibility: hidden;
            
            -webkit-transform: scale(.5);
            -moz-transform: scale(.5);
            -ms-transform: scale(.5);
            -o-transform: scale(.5);
            transform: scale(.5);
            
            -webkit-transform: scale(.5);
            -moz-transform: scale(.5);
            -o-transform: scale(.5);
            -ms-transform: scale(.5);
            transform: scale(.5);
            
            -webkit-transition: all .3s ease;
            -moz-transition: all .3s ease;
            -o-transition: all .3s ease;
            -ms-transition: all .3s ease;
            transition: all .3s ease;
            /* end of animation */

        }



        .dropdown-menu li {
            min-width: 200px;
            background: #333;
            transition: transform 0.5s;
        }

        .dropdown-menu li a {
            font-size: 14px;
            text-decoration: none;
            text-transform: uppercase;
            line-height: 35px;
            padding: 0 10px;
            display: block;
            color: #999;
        }

        .dropdown-menu li a:hover {
            background-color: #81d742;
            color: #FFF;

        }

        .navigation-bar li:hover .dropdown-menu {
            transform: scale(1);
            opacity: 1;
            visibility: visible;
        }
    </style>
</head>

<body>
    <ul class="navigation-bar">
        <li><a href="#">Home</a></li>
        <li><a href="javascript:void(0)">Categories</a>
            <ul class="dropdown-menu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">PHP</a></li>
            </ul>
        </li>
    </ul>

</body>

</html>

LEAVE A REPLY

Please enter your comment!
Please enter your name here