Dua Style Menu Navigasi Dropdown

DeeJayHan-Blog - Akhirnya bisa update lagi,mohon maaf karena sekarang saya agak lama update,karena sekarang saya sibuk mengerjakan tugas-tugas sekolah and hari senin besok saya akan melaksanakan UAS (Ujian Akhir Semester).di postingan ini sekalian saya ingin meminta ijin karena mungkin untuk 2 minggu kedepan saya tidak akan blogging. loh kok jadi curhat ya,...?? ok langsung saja cekedot

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.

Tweet

Subscribe to receive free email updates: