Template dan Tips Seputar Blogger

Thursday, June 22, 2017

CSS3 Animasi Menu Dropdown Blogger

CSS3 Animasi Menu Dropdown Blogger – pada tutorial ini setelah lama tidak membahas tentang menu navigasi blogger maka sekarang sedikit akan saya jelaskan tentang CSS animasi dropdown menu.

CSS3 Animasi Menu Dropdown Blogger

Untuk membuat animasi menu dropdown ini tidak memerlukan adanya jquery dan disinilah letak kehebatan fitur CSS transition untuk membuat animasi CSS yang berjalan secara halus dengan mengatur efek pada transition-delay. Berikut lebih jelasnya untuk memasang CSS Animasi Menu Dropdown Blogger ke dalam blog.

CSS Animasi Menu Dropdown Blogger


1. Login ke akun blogger lalu masuk ke Edit HTML template.

2. Lalu taruh kode CSS berikut ini 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 > 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 > 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 > li:hover .submenu,.menu > li:focus .submenu{max-height:2000px;z-index:10}
.menu > li:hover .submenu li,.menu > 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 > li:nth-child(1) {border-right:2px solid #111}
.menu > li:nth-child(2),.menu > li:nth-child(3),.menu > li:nth-child(4),.menu > li:nth-child(5),.menu > li:nth-child(6),.menu > li:nth-child(7),.menu > li:nth-child(8){border-right:2px solid #111;border-left:2px solid #333} 

3. Selanjutnya untuk menampilkan menu ini dibawah header, jika menggunakan struktur template HTML5 maka cari kode </header> lalu taruh kode berikut ini tepat di bawahnya. Cara lain, bisa juga dengan menaruh kode berikut tepat di atas 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> 

4. Langkah terakhir Simpan template.


Demikian tutorial sederhana untuk membuat CSS3 Animasi Menu Dropdown Blogger. Harapan saya setelah anda mengenal satu per satu elemen kode pada template maka anda bisa berkreasi sendiri untuk membuat tampilan blog seperti keinginan kreasi masing-masing.

Berikan tanggapan Anda
EmoticonEmoticon

Adblock Detected

Like this blog? Keep us running by whitelisting this blog in your ad blocker

This is how to whitelisting this blog in your ad blocker

Thank you

×