Mozz4rt.com

pada tutorial kali ini saya akan membahas tentang pembuatan CSS Animasi Menu Dropdown, disini saya akan menjelaskan tentang CSS Animasi Menu dropdown ini seperti gambar di bawah ini namun untuk membuat animasi dropdown ini kita tidak memerlukan adanya jquery dan disinilah letak kehebatan fitur CSS transition untuk membuat animasi CSS yang berjalan halus dengan mengatur efek pada transition-delay.

tanpa banyak basa-basi kita langsung saja ke praktiknya

• login ke akun blogspot
• edit HTML 
• cari kode ]]></b:skin> setelah ketemu taruh kode di bawah ini tepat di atas kode ]]></b:skin>

.menu,.menu ul{list-style:none;margin:0;padding:0}
.menu{background:#252525;height:35px;width:100%;border-bottom:2px solid #181818;border-top:2px solid #303030}
.menu li{background:#252525}
.menu &gt; li{display:block;float:left;position:relative;box-shadow:2px 0 0 0 rgba(51,51,51,1)}
.menu a{border-left:3px solid rgba(0,0,0,0);color:gray;display:block;font-family:Electrolize,sans-serif;font-size:18px;line-height:35px;text-decoration:none;text-transform:uppercase;padding:0 25px}
.menu a:first-letter{color:#0091d6}
.menu li:hover{background-color:#1c1c1c}
.menu li:hover &gt; a{border-left:3px solid #0091d6;color:#fff}
.submenu{left:0;max-height:0;position:absolute;top:100%;z-index:0;perspective:400px;width:200%}
.submenu li{opacity:0;transform:rotateY(90deg);transition:opacity .4s, transform .5s;border-bottom:2px solid #181818;border-top:2px solid #303030}
.menu .submenu li:hover a{border-left:3px solid #454545;color:#fff}
.menu &gt; li:hover .submenu,.menu &gt; li:focus .submenu{max-height:2000px;z-index:10}
.menu &gt; li:hover .submenu li,.menu &gt; li:focus .submenu li{opacity:1;transform:none}
.menu li:hover .submenu li:nth-child(1){transition-delay:0s}
.menu li:hover .submenu li:nth-child(2){transition-delay:50ms}
.menu li:hover .submenu li:nth-child(3){transition-delay:100ms}
.menu li:hover .submenu li:nth-child(4){transition-delay:150ms}
.menu li:hover .submenu li:nth-child(5){transition-delay:200ms}
.menu li:hover .submenu li:nth-child(6){transition-delay:250ms}
.menu li:hover .submenu li:nth-child(7){transition-delay:300ms}
.menu li:hover .submenu li:nth-child(8){transition-delay:350ms}
.submenu li:nth-child(1){transition-delay:350ms}
.submenu li:nth-child(2){transition-delay:300ms}
.submenu li:nth-child(3){transition-delay:250ms}
.submenu li:nth-child(4){transition-delay:200ms}
.submenu li:nth-child(5){transition-delay:150ms}
.submenu li:nth-child(6){transition-delay:100ms}
.submenu li:nth-child(7){transition-delay:50ms}
.submenu li:nth-child(8){transition-delay:0s}
.menu &gt; li:nth-child(1) {border-right:2px solid #111}
.menu &gt; li:nth-child(2),.menu &gt; li:nth-child(3),.menu &gt; li:nth-child(4),.menu &gt; li:nth-child(5),.menu &gt; li:nth-child(6),.menu &gt; li:nth-child(7),.menu &gt; li:nth-child(8){border-right:2px solid #111;border-left:2px solid #333}

• setelah itu untuk menampilkan menu di bawah header, jika kita menggunakan struktur template HTML5 maka cari kode </header> lalu taruh kode dibawah ini tepat di bawah kode </header>, anda juga bisa menaruh kode di bawah ini tepat diatas kode <div id='main-wrapper'> atau <article id='main-wrapper'>

<nav>
<ul class='menu'>
    <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
    <li><a href='#'>Menu 1</a>
        <ul class='submenu'>
            <li><a href='#'>Submenu a</a></li>
            <li><a href='#'>Submenu b</a></li>
            <li><a href='#'>Submenu c</a></li>
            <li><a href='#'>Submenu d</a></li>
            <li><a href='#'>Submenu e</a></li>
            <li><a href='#'>Submenu f</a></li>
            <li><a href='#'>Submenu g</a></li>
            <li><a href='#'>Submenu h</a></li>
        </ul>
    </li>
    <li class='active'><a href='#'>Menu 2</a>
        <ul class='submenu'>
            <li><a href='#'>Submenu a</a></li>
            <li><a href='#'>Submenu b</a></li>
            <li><a href='#'>Submenu c</a></li>
            <li><a href='#'>Submenu d</a></li>
            <li><a href='#'>Submenu e</a></li>
            <li><a href='#'>Submenu f</a></li>
            <li><a href='#'>Submenu g</a></li>
            <li><a href='#'>Submenu h</a></li>
        </ul>
    </li>
    <li><a href='#'>Menu 3</a>
        <ul class='submenu'>
            <li><a href='#'>Submenu a</a></li>
            <li><a href='#'>Submenu b</a></li>
            <li><a href='#'>Submenu c</a></li>
            <li><a href='#'>Submenu d</a></li>
            <li><a href='#'>Submenu e</a></li>
            <li><a href='#'>Submenu f</a></li>
            <li><a href='#'>Submenu g</a></li>
            <li><a href='#'>Submenu h</a></li>
        </ul>
    </li>
    <li><a href='#'>Menu 4</a></li>
    <li><a href='#'>Menu 5</a></li>
</ul>
</nav> 

• setelah itu anda tinggal simpat template yang sudah diedit barusan

Demikian tutorial kali ini yaitu CSS Animasi Menu Dropdown Blogger jika saya punya waktu luang saya akan terus memberikan tutorial agar teman-teman disini bisa menguasai semua materi yang saya akan berikan terus-menerus

Share this post