Dua Style Menu Navigasi Dropdown

Welcome To GENETIK [ Generasi Teknik Informatika ] :

Hallo Semua Sobat Inside Lovers, kali ini Blog's GENETIK [ Generasi Teknik Informatika ] akan memposting Dua Style Menu Navigasi Dropdown,
oke tanpa basa basi lagi liat tutorialnya di bawah :

Inilah Screenshotnya :

Kali ini saya akan share cara membuat style menu navigasi dropdown ala cunayz.mungkin ada dua style yang sering menu navigation yang populer digunakan oleh para Blogger, yaitu efek Fading dan Sliding (Lihat Demonya Disini) Di postingan ini saya akan share dua efek yang sederhana namun tetap satu jenis silahkan sobat tinggal pilih saja efek yang mana yang paling bagus menurut sobat.

Langkah pertama : harus sobat lakukan adalah menentukan penempatan menu navigasi ini (misalnya di atas atau di bawah header), Salin kode berikut dan letakan ditempat sobat ingin meletakan menu navigasi ini :

<div class='cunayzmenu'>

<ul>

<li><a href='#'>HOME</a></li>

<li><a href='#'>GUEST BOOK</a>
<ul>
<li><a href='#'>Satu</a></li>
<li><a href='#'>Dua</a></li>
<li><a href='#'>Tiga</a></li>
<li><a href='#'>Empat</a></li>
<li><a href='#'>Lima</a></li>
</ul>
</li>

<li><a href='#'>TOOLS BLOG</a>
<ul>
<li><a href='#'>Satu</a></li>
<li><a href='#'>Dua</a></li>
<li><a href='#'>Tiga</a></li>
<li><a href='#'>Empat</a></li>
<li><a href='#'>Lima</a></li>
</ul>
</li>

<li><a href='#'>KONTAK</a>
<ul>
<li><a href='#'>Satu</a></li>
<li><a href='#'>Dua</a></li>
<li><a href='#'>Tiga</a></li>
<li><a href='#'>Empat</a></li>
<li><a href='#'>Lima</a></li>
</ul>
</li>

</ul>

</div>

Langkah Kedua : Letakan CSS dibawah ini,kemudian letakan di atas kode ]]</b:skin> atau </style>:

.cunayzmenu{font:normal 12px "Times New Roman", Times, serif;line-height:normal;text-transform:uppercase;margin:5px 0;padding:0 0;color:#fff;text-decoration:none;}
.cunayzmenu ul{float:left;height:34px;line-height:34px;background-color:#333;margin:0 0 10px;padding:0 0;border:2px solid #e6e6e6;box-shadow:0 1px 5px #000;-moz-box-shadow:0 1px 5px #000;-webkit-box-shadow:0 1px 5px #000;}
.cunayzmenu li{list-style-type:none;margin:0 0;padding:0 0;color:#fff;float:left;display:inline;}
.cunayzmenu li a{line-height:14px;background-color:#333;border-left:1px solid #444;border-right:1px solid #222;margin:0 0;padding:10px 15px;color:#fff;text-decoration:none;font-weight:bold;vertical-align:top;text-shadow:1px 1px 2px #000;outline:none;display:block;}
.cunayzmenu li ul{position:absolute;z-index:10;left:auto;height:auto;margin:0 0;padding:0 0;width:200px;box-shadow:0 1px 5px #000;-moz-box-shadow:0 1px 5px #000;-webkit-box-shadow:0 1px 5px #000;display:none;}
.cunayzmenu li ul li a{border-left-width:0;border-right-width:0;border-top:1px solid #444;border-bottom:1px solid #222;width:170px;display:block;}
.cunayzmenu li a:focus{background-color:#666;border-left-color:#777;border-right-color:#555;}
.cunayzmenu ul li a:focus{background-color:#666;border-top-color:#777;border-bottom-color:#555;}
.cunayzmenu li a:hover, .cunayzmenu ul li a:hover{color:#ccc;}

Langkah Terakhir : Nah sekarang sobat tinggal memilih efek mana yang paling cocok untuk sobat (pilih salah satu) :


Untuk efek SlideDown - SlideUp salin kode berikut dan letakan diatas kode </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(document).ready(function () {
$('.cunayzmenu ul li').hover(
function () {
$('ul', this).stop(true, true).slideDown(500);},
function () {
$('ul', this).stop(true, true).slideUp(250);});
});
</script>

Untuk efek Fadeln - FadeOut salin kode berikut dan letakan diatas kode </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(document).ready(function () {
$('.cunayzmenu ul li').hover(
function () {
$('ul', this).stop(true, true).fadeIn(600);},
function () {
$('ul', this).stop(true, true).fadeOut(200);});
});
</script>

Khusus untuk kode yang Saya beri warna merah, jika sudah ada tidak perlu ditambahkan.Sekarang klik Pratinjau. Jika sudah puas dengan hasilnya, simpan templatemu.