Ticker

10/recent/ticker-posts

Ad Code

Responsive Advertisement

Drop down menu dengan transition

H4nk Februari 08, 2020

Pernahkah melihat menu drop down dengan transition pada sebuah web ? tentu pernah bukan, tapi pasti penasaran dengan bagaimana cara membuat menu drop down dengan transition tersebut bukan.
Oke supaya tidak penasaran lagi silahkan copy source code berikut ini :

 Code HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drop down menu dengan transition</title>
</head>
<body>
    <div id="container">
        <h1>Drop down menu dengan transition</h1>
        <ul id="menu">
            <li><a href="">MENU 1</a>
            <ul>
                <li><a href="https://h4nk.blogspot.com">Menu 1.1</a></li>
                <li><a href="https://h4nk.blogspot.com">Menu 1.2</a></li>
            </ul>
        </li>
        <li><a href="">MENU 2</a>
            <ul>
                <li><a href="https://h4nk.blogspot.com">Menu 2.1</a></li>
                <li><a href="https://h4nk.blogspot.com">Menu 2.2</a></li>
                <li><a href="https://h4nk.blogspot.com">Menu 2.3</a></li>
            </ul>
        </li>   
        <li><a href="">MENU 3</a>
            <ul>
                <li><a href="https://h4nk.blogspot.com">Menu 3.1</a></li>
                <li><a href="https://h4nk.blogspot.com">Menu 3.2</a></li>
                <li><a href="https://h4nk.blogspot.com">Menu 3.3</a></li>
            </ul>
        </li>           
    </ul>
    </div>
</body>
</html>

Code CSS ;
<style type="text/css">
    #container{
        width: 600px;
        margin:auto;
        text-align: center;
    }
    #menu a{
        display:block;
        color: #fff;
        text-decoration: none;
    }
    #menu li,
    #menu li li {
        position: relative;
        display: inline-block;
        width: 110px;
        padding: 6px 15px;
        background: #0602f5;
    }
    #menu li li { background: transparent none;}
    #menu li li a { color: white;}
    #menu li li:hover { background: #3f3cf5;}
    #menu li:hover{
        background: #7779ec;
    }
    #menu ul {
        position: absolute;
        top: 2em; left:0;
        max-height:0em;
        margin:0; padding:0;
        background:#0602f5;
        overflow:hidden;
        transition: 0.4s ease-in-out;
    }
    #menu li:hover ul{
        max-height:13em;
    }
    </style>

Full Code :
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drop down menu dengan transition</title>
    <style type="text/css">
    #container{
        width: 600px;
        margin:auto;
        text-align: center;
    }
    #menu a{
        display:block;
        color: #fff;
        text-decoration: none;
    }
    #menu li,
    #menu li li {
        position: relative;
        display: inline-block;
        width: 110px;
        padding: 6px 15px;
        background: #0602f5;
    }
    #menu li li { background: transparent none;}
    #menu li li a { color: white;}
    #menu li li:hover { background: #3f3cf5;}
    #menu li:hover{
        background: #7779ec;
    }
    #menu ul {
        position: absolute;
        top: 2em; left:0;
        max-height:0em;
        margin:0; padding:0;
        background:#0602f5;
        overflow:hidden;
        transition: 0.4s ease-in-out;
    }
    #menu li:hover ul{
        max-height:13em;
    }
    </style>
</head>
<body>
    <div id="container">
        <h1>Drop down menu dengan transition</h1>
        <ul id="menu">
            <li><a href="">MENU 1</a>
            <ul>
                <li><a href="https://h4nk.blogspot.com">Menu 1.1</a></li>
                <li><a href="https://h4nk.blogspot.com">Menu 1.2</a></li>
            </ul>
        </li>
        <li><a href="">MENU 2</a>
            <ul>
                <li><a href="https://h4nk.blogspot.com">Menu 2.1</a></li>
                <li><a href="https://h4nk.blogspot.com">Menu 2.2</a></li>
                <li><a href="https://h4nk.blogspot.com">Menu 2.3</a></li>
            </ul>
        </li>   
        <li><a href="">MENU 3</a>
            <ul>
                <li><a href="https://h4nk.blogspot.com">Menu 3.1</a></li>
                <li><a href="https://h4nk.blogspot.com">Menu 3.2</a></li>
                <li><a href="https://h4nk.blogspot.com">Menu 3.3</a></li>
            </ul>
        </li>           
    </ul>
    </div>
</body>
</html>

untuk Code tersebut dapat di download di sini : DOWNLOAD

Untuk Tampilannya seperti ini 

Like And Subscribe Now



H4nk

Diposting oleh H4nk

Posting Komentar

1 Komentar

  1. Unknown14 Maret 2020 pukul 23.02

    Let me tell you something...

    What I'm going to tell you may sound really creepy, maybe even kind of "supernatural"

    HOW would you like it if you could just hit "Play" and LISTEN to a short, "musical tone"...

    And suddenly attract MORE MONEY to your LIFE?

    What I'm talking about is thousands... even MILLIONS of DOLLARS!!

    Sounds way too EASY? Think this couldn't possibly be for REAL???

    Well, I'll be the one to tell you the news..

    Usually the greatest blessings life has to offer are the easiest to GET!!

    Honestly, I'm going to provide you with PROOF by allowing you to PLAY a REAL "magical money-magnet tone" I've produced...

    (And COMPLETELY RISK FREE).

    You just press "Play" and the money will start coming into your life... starting almost INSTANTLY...

    TAP here now to experience this wonderful "Miracle Wealth Building Tone" - as my gift to you!!

    BalasHapus

Berikan Komentar yang bermanfaat dan sehat.