CSS Animasi Menu Dropdown Blogger

 

CSS Animasi Menu Dropdown Blogger - Kali ini saya akan membahas ini gan. Yang belum tau nih lihat dibawah ini. Caranya cukup mudah kok. Langsung aja ya. Cekidot! 

• 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

Sekian ya sobat. Semoga berhasil dan bermanfaat bagi kalian~ 
Suka Dengan Artikel Ini ?

Anda baru saja membaca artikel yang berkategori Tips Blog dengan judul "CSS Animasi Menu Dropdown Blogger". Anda bisa bookmark halaman ini dengan URL https://darkcoder-technology.blogspot.com/2014/02/css-animasi-menu-dropdown-blogger.html.