Cara membuat menu dropdown dengan efek delay

Cara membuat menu dropdown dengan efek delay - Tentu Kita sudah mengetahui bahwa menu dropdown sangatlah berguna bagi blog kita. Selain untuk navigasi, menu dropdown juga memberi efek menarik di blog apalagi dengan delay delay yang bisa di ubah ubah. Kali ini saya akan share Cara membuat menu dropdown dengan efek delay. Inilah caranya Check it out.

1. Masuk akun blogger sobat.
2. Buka tab menu Rancangan >> Template >> Edit Html.
3. Letakkan Kode tag berikut tepat sesudah tag pemuka </header>
Atau anda juga dapat meletakkanya tepat sebelum kode </body>

<style type='text/css'>
#nav_menu { font:bold 13px verdana; height: 35px; list-style: none; padding: 0px; margin: 0px auto; background:#008080; }
#nav_menu ul { left: -9999px; position: absolute; top: -9999px; z-index: 1; }
#nav_menu li { border-right: 1px solid #111; display: block; float: left; height: 35px; position: relative; width: 105px; }
#nav_menu li a { color: #fff; display: block; line-height: 35px; text-align: center; text-decoration: none; background-color:#008080; }
#nav_menu li a:hover{ background-color:#20B2AA; }
@-webkit-keyframes animation1 { 0% { -webkit-transform: scale(1); } 30% { -webkit-transform: scale(1.3); } 100% { -webkit-transform: scale(1); } }
@-moz-keyframes animation1 { 0% { -moz-transform: scale(1); } 30% { -moz-transform: scale(1.3); } 100% { -moz-transform: scale(1); } }
#nav_menu li > a:hover { -moz-animation-name: animation1; -moz-animation-duration: 0.0s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: animation1; -webkit-animation-duration: 0.0s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; }
#nav_menu li:hover > a { z-index: 4; }
#nav_menu li:hover ul.sub { padding: 0; left: 0; top: 35px; width: 200px; }
#nav_menu ul li { background: none repeat scroll 0 0 #838383; opacity: 0; width: 100%; }
#nav_menu ul li a{ text-align: left; padding-left: 10px; border-top: 1px solid #333; background:#222; }
#nav_menu ul li a:hover{ background:#20B2AA; }
@-webkit-keyframes animation2 { 0% { margin-left:185px; } 100% { margin-left:0px; opacity:1; } }
@-moz-keyframes animation2 { 0% { margin-left:185px; } 100% { margin-left:0px; opacity:1; } }
#nav_menu li:hover ul li { -moz-animation-name: animation2; -moz-animation-duration: 0.3s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: 1; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: animation2; -webkit-animation-duration: 0.3s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; }
#nav_menu li:hover ul li:nth-child(1) { -moz-animation-delay: 0; -webkit-animation-delay: 0; }
#nav_menu li:hover ul li:nth-child(2) { -moz-animation-delay: 0.05s; -webkit-animation-delay: 0.05s; }
#nav_menu li:hover ul li:nth-child(3) { -moz-animation-delay: 0.1s; -webkit-animation-delay: 0.1s; }
#nav_menu li:hover ul li:nth-child(4) { -moz-animation-delay: 0.15s; -webkit-animation-delay: 0.15s; }
#nav_menu li:hover ul li:nth-child(5) { -moz-animation-delay: 0.2s; -webkit-animation-delay: 0.2s; }
#nav_menu li:hover ul li:nth-child(6) { -moz-animation-delay: 0.25s; -webkit-animation-delay: 0.25s; }
#nav_menu li:hover ul li:nth-child(7) { -moz-animation-delay: 0.3s; -webkit-animation-delay: 0.3s; }
#nav_menu li:hover ul li:nth-child(8) { -moz-animation-delay: 0.35s; -webkit-animation-delay: 0.35s; }

#nav_menu li:hover ul li:nth-child(9) { -moz-animation-delay: 0.35s; -webkit-animation-delay: 0.39s; }
#nav_menu li:hover ul li:nth-child(10) { -moz-animation-delay: 0.05s; -webkit-animation-delay: 0.4s; }
#nav_menu li:hover ul li:nth-child(11) { -moz-animation-delay: 0.1s; -webkit-animation-delay: 0.45s; }
#nav_menu li:hover ul li:nth-child(12) { -moz-animation-delay: 0.15s; -webkit-animation-delay: 0.5s; }
#nav_menu li:hover ul li:nth-child(13) { -moz-animation-delay: 0.2s; -webkit-animation-delay: 0.55s; }
#nav_menu li:hover ul li:nth-child(14) { -moz-animation-delay: 0.25s; -webkit-animation-delay: 0.6s; }
#nav_menu li:hover ul li:nth-child(15) { -moz-animation-delay: 0.3s; -webkit-animation-delay: 0.65s; }
#nav_menu li:hover ul li:nth-child(16) { -moz-animation-delay: 0.35s; -webkit-animation-delay: 0.7s; }
#searchform{float:right;height:35px;margin:0}
#formsearch{position:relative;float:right}
#formsearch input{color:#f0eded;background:#494949;font:12px Electrolize;outline:0 none;width:194px;height:19px;float:left;border:none;margin:0;padding:8px}
#formsearch input:focus{color:#fff}
#searchform button{text-indent:-9999px;overflow:hidden;background:#008080 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiybi1625JAEa07WDQOSQz6xInRzc6HBRZi_YwB-hCTmaYp-g_BKH0PGNC7yvD4nf_DeJzO3iPHBZdh7x9JIlrVPO980YtwjuZFsnF3NL-DFYjFBAVhrKTGX8kfmCYqaGSrf5uynQ6SDhf-/s30/search_icon.png) 50% 50%;width:30px;height:35px;position:relative;cursor:pointer;border:none!important;outline:none!important;transition:all 1s ease;font:12px Electrolize;margin:0}
.status-msg-wrap{padding:5px 0;position:relative;color:#20B2AA;}
</style>
<nav>
<ul id='nav_menu'>
    <li><a expr:href='data:blog.homepageUrl'>HOME</a></li>
    <li><a href='#'>KATEGORI</a>
        <ul class='sub'>
        <li><a href='#'>18+</a></li>
        <li><a href='#'>Chord</a></li>
        <li><a href='#'>Latihan Otot</a></li>
        <li><a href='#'>Musik</a></li>
        <li><a href='#'>Otomotif</a></li>
        <li><a href='#'>Software</a></li>
        <li><a href='#'>Tentang Islam</a></li>
        <li><a href='#'>Seputar Tokoh</a></li>
        <li><a href='#'>Wawasan</a></li>
        <li><a href='#'>Tutorial Blog</a></li>
        <li><a href='#'>Tutorial PC</a></li>
        <li><a href='#'>Tutorial Photoshop</a></li>
        <li><a href='#'>Other</a></li>
        </ul>
    </li>
    <li><a href='#'>NARUTO</a>
        <ul class='sub'>
        <li><a href='#'>Naruto Shippuden</a></li>
        <li><a href='#'>Ost Naruto</a></li>
        </ul>
    </li>
  <li><a href='#'>CHAT BOX</a>
    </li>

<div id='searchform'>
<form action='/search' id='formsearch'>
<input name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Text to search...&quot;;}' onfocus='if (this.value == &quot;Text to search...&quot;) {this.value = &quot;&quot;;}' type='text' value='Text to search...'/>
<button title='Search' type='submit'>Search</button>
</form>
</div>
</ul>
</nav>

4. Simpan Temolate anda.

Catatan: Anda juga dapat mengganti warnanya dengan mengubah kode yang saya beri warna Merah.

Selesai sudah Cara membuat menu dropdown dengan efek delay. Semoga dapat bermanfaat.