Cool Dropdown Navigation Menu (Zoom Template Style)

Home / Blog / Menu / Cool Dropdown Navigation Menu (Zoom Template Style)

Cool Dropdown Navigation Menu (Zoom Template Style)

By : Waff

Hari demi hari terus berlanjut, tutorial demi tutorial pun sudah saya sajikan di blog ini tetapi ketika saya iseng-iseng melihat email saya yang masuk di mwafiez@gmail.com eh...ternyata ada yang ngirim email ke saya dan menanyakan cara membuat menu navigasi seperti di blog saya yang satunya yaitu Ailaspark yang sudah lama ini tidak saya Update karena masih sibuk mengurusi blog ini (heheheh...).

Okelah MWcrew akan memberitahu cara membuat Cool Navigation menu ini, dan sebelumnya menu ini merupakan pengcodingan saya sendiri yang terinspirasi dari menunya Zoom Template karena menurut saya menu inilah yang cocok untuk template Ailaspark. Yah langsung disimak cara pembuatannya gan....

1. Masuk ke dasbor blog anda dan pilih Rancangan > Edit Html kemudian cari kode
]]></b:skin> tempatkan kode CSS berikut tepat diatasnya.

CSS

#ailas-wrapper{background: -moz-linear-gradient(top, #F2F2F2, #D8D8D8);  
background: -webkit-gradient(linear, left top, left bottom, from(#ececec), to(#D8D8D8));float:center;height:31px;width:100%px;margin:0 auto}
#nav-menu-label{float:center;margin:0;padding:0}
.text-style{color:#333;display:block;font-size:12px;font-weight:400;text-transform:normal;border-left:0 solid #CDCDCD;height:14px;margin:0;padding:8px 4px 8px 14px}
.text-style:hover{color:#045FB4;cursor:pointer;height:14px}
#nav-menu-label li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN1r8C96cybk1BGWjxXHV4CYbVqe8iosmuTU7ftIsbe95tDwWDD9V0Ol0N87iInFlgyoUc_hte5LDBlraEBfaWAYc0NL3mowHsVlt9v2cLnvBLVlPKNoB_m-NIUAvl7tkYSS2ne-4Rfi4/s200/bc_separator.png) no-repeat 2px 0;list-style:none;float:right;margin:0;padding:0}
#nav-menu-label li a,#nav-menu-label li a:link,#nav-menu-label li a:visited{color:#333;display:block;font-size:12px;font-weight:700;text-transform:normal;border-left:1px solid #CDCDCD;margin:0;padding:1px 8px 6px}
#nav-menu-label li a:hover,#nav-menu-label li a:active{color:#045FB4;text-decoration:none;margin:0;padding:1px 8px 6px}
#nav-menu-label li li a,#nav-menu-label li li a:link,#nav-menu-label li li a:visited{background:#f5f5f5;color:#333;font-size:12px;font-weight:400;text-transform:normal;text-align:left;width:150px;border-top:1px solid #FFF;border-bottom:1px solid #CDCDCD;border-left:1px solid #CDCDCD;border-right:1px solid #CDCDCD;margin:0;padding:7px 10px 6px}
#nav-menu-label li li a:hover,#nav-menu-label li li a:active{background:#fff;color:#000;border-top:1px solid #FFF;padding:7px 10px 6px}
#nav-menu-label li ul{z-index:999;position:absolute;left:-999em;height:auto;width:150px;float:left;margin:0;padding:0}
#nav-menu-label li ul a{width:150px}
#nav-menu-label li ul ul{margin:-31px 0 0 100px}
#nav-menu-label li:hover ul ul,#nav-menu-label li:hover ul ul ul,#nav-menu-label li.sfhover ul ul,#nav-menu-label li.sfhover ul ul ul{left:-999em}
#nav-menu-label li:hover ul,#nav-menu-label li li:hover ul,#nav-menu-label li li li:hover ul,#nav-menu-label li.sfhover ul,#nav-menu-label li li.sfhover ul,#nav-menu-label li li li.sfhover ul{left:auto}
#nav-menu-label li:hover,#nav-menu-label li.sfhover{position:static}
#nav li,#nav-menu-label ul{float:left;list-style:none;margin:0;padding:0}

2. Setelah itu cari kode <body> dan taruh kode ini tepat dibawahnya.

<div id='ailas-wrapper' style='text-align:center'>

<ul id='nav-menu-label'>
<li>
<div class='text-style'>Cartoon &#9660;</div>
<ul>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Cartoon West'>West</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Cartoon Japan'>Japan</a>
</li>
<li>
<a href='#'>-</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Cartoon'>All Cartoon Movies</a>
</li>
</ul>
</li>

<li>
<div class='text-style'>Malaysia &#9660;</div>
<ul>
<li>
<a href='#'>-</a>
</li>
<li>
<a href='#'>-</a>
</li>
</ul>
</li>

<li>
<div class='text-style'>China &#9660;</div>
<ul>
<li>
<a href='http://ailaspark.blogspot.com/search/label/China%20Action'>Action</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/China%20Adventure'>Adventure</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/China%20Drama'>Drama</a>
</li>
<li>
<a href='#'>Biography</a>
</li>
<li>
<a href='#'>Crime</a>
</li>
<li>
<a href='#'>Fighting</a>
</li>
<li>
<a href='#'>-</a>
</li>
<li>
<a href='#'>-</a>
</li>
<li>
<a href='#'>-</a>
</li>
<li>
<a href='#'>-</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/China'>All China Movies</a>
</li>
</ul>
</li>

<li>
<div class='text-style'>Asian &#9660;</div>
<ul>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Asian%20Action'>Action</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Asian%20Comedy'>Comedy</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Asian%20Drama'>Drama</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Asian%20Romance'>Romance</a>
</li>
</ul>
</li>

<li>
<div class='text-style'>West &#9660;</div>
<ul>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Action'>Action</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Adventure'>Adventure</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Biography'>Biography</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Comedy'>Comedy</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Crime'>Crime</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Drama'>Drama</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Family'>Family</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Fighting'>Fighting</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Horor'>Horor</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Kids'>Kids</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Sport'>Sports</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/West'>All West Movies</a>
</li>
</ul>
</li>

<li>
<div class='text-style'>Indonesian &#9660;</div>
<ul>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Drama%20Indonesian'>Drama</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Komedi'>Komedi</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Horor%20Indo'>Horor</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Musical'>Musical</a>
</li>
<li>
<a href='#'>All Indonesian Movies </a>
</li>
</ul>
</li>

</ul>
</div>

3. Klik Simpan.

Selesai...Lihat di bagian atas blog anda maka terdapat menu dropdown yang keren.
Selamat mencoba....

"MWcrew"