share all free for you

Advertiser Here

Dua Style Menu Navigasi Dropdown Ala Cunayz

BLOGCUNAYZ - 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 :



View Demo


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 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.

Title : Dua Style Menu Navigasi Dropdown Ala Cunayz
URL : http://blogcunayz.blogspot.com/2011/12/dua-style-menu-navigasi-dropdown-ala.html
Anda boleh menyebar Luaskan atau Meng Copy-Paste Artikel ini bila dapat bermanfaat bagi teman-teman anda, Namun jangan lupa untuk meletakkan Link Dua Style Menu Navigasi Dropdown Ala Cunayz sebagai Sumbernya.

Sudah ada [ 68 komentar ] bagaimana pendapat Anda,,?

  1. keren juga ya menu ala kk cunayz. keren banget ya stylenya hitam putih seperti itu :D makin mantap saja nih tutorialnya

    ReplyDelete
  2. @ Farixsantips : selamat atas pertamax nya sob,hatur thank you masbro,iseng2 aja share abis gak ada inspirasi wkwkw =)) =))

    ReplyDelete
  3. KereN gan boleh juga Nih buat di Coba

    ReplyDelete
  4. menu nav nya keren gan,, kyk nya ane pernah liat di hompimpa dah menu nav kyk gini,, =)) =)) keren gan =))

    ReplyDelete
  5. Keren nih infonya sob, sukses selalu,,

    ReplyDelete
  6. Keren Juga Nigh Menu Drop downnya Ala Cunayas

    Mantab,, Keep Blogwalking

    ReplyDelete
  7. keren menunya, makasih infonya, sukses selalu

    ReplyDelete
  8. mantep navigasinya, punya saya ancur gara2 amatiran..

    ReplyDelete
  9. kalo pengguna hape seperti saya sepertinya mending biasa aja gan, boros pulsa..hehe :D

    ReplyDelete
  10. modifikasi menu navigasi ang bagus bro. :)

    ReplyDelete
  11. Kunjungan silaturahmi sahabat setelah sekian lama vakum...style nya menarik saudaraku.Teruskan untuk berbagi hal yang bermanfaat

    ReplyDelete
  12. Keren sob tipsnya nih..ala sobat cunazy hehehe...Lanjutkan

    ReplyDelete
  13. Pena hadir dan absen sore gan...weuh cool dropdownnya gan..pena belum menggunakannya karena isi di tempat pena tidak terlalu banyak.Simpan dulu siapa tahu nanti pena membutuhkannya gan.
    Thanks

    ReplyDelete
  14. Dua tips menu yang cantik sob.Dengan menu navigasi ini memudahkan kita atau pengunjung untuk mengobok-obok blog kita.Makasih banyak infonya,Oh ya UAS-nya semoga lancar.happy blogging aja.

    ReplyDelete
  15. @ Zh!nTho : trimakasih gan,silahkan,...

    @ Rama88 : wkwkwk mungkin kami satu hati sob :)) :)) =)) =))

    ReplyDelete
  16. @ AYRIY ZONE : thank sob,amien sukses juga untuk agan,...

    @ Mharjipes Blog : ia dong wkwkwk silahkan d cicipi gan

    ReplyDelete
  17. dari perbedaan style keduanya itu hanya beda efek jquerynya ya? :)

    ReplyDelete
  18. @ Tutorial Blog : sama2 gan,amin sukses juga untuk agan

    @ ®obinhut : gak apa2 sob dulu saya juga begitu,tapi kita sebagai manusia diberi akal,jadi jangan pernah menyerah sob.

    ReplyDelete
  19. @ Herry : bloggingnya pake hp gan?? ga ada tes'ny dong :D

    @ panduan belajar blog : thank masbro

    ReplyDelete
  20. @ abufarras : trimakasih atas kunjungannya sobat,iya kemana aja nih jarang kelihatan,siap laksanakan sobat :D

    @ cardiacku : thank sob

    ReplyDelete
  21. @ tautanpena : trimakasih atas kunjungannya gan,silahkan gan,sama2.

    @ Er'end : amin,...amin,...amin sob,happy blogging juga :)

    ReplyDelete
  22. @ Farixsantips : iya sob yang kedua pake efek kaya di blog saya ketika membuka page,...:D

    ReplyDelete
  23. wah... makin mantap aja nih...
    udh go blog magazine nih...
    nanti klo dh banyak waktu pasti ane coba deh. hehe

    sukses untuk UASnya. smoga dimudahkan...

    ReplyDelete
  24. @ Oemar : iya gan saya ingin agar pengunjung gak bosan nungguin loading wkwkwk, amin gan trimakasih atas do'a nya,...

    ReplyDelete
  25. wah kamu masih sekolah tapi sdh punya blog keren ini,, saalutt dech

    ReplyDelete
  26. kereeennnn.......
    bisa dicoba nih...
    menu thumbail yang diatas juga mantab sob,
    bisa geser....kalo yang menu thumbail diatas itu gimana caranya sob?
    bagi2 dong ilmunya,hehe...
    ane tunggu sob, thanks....

    ReplyDelete
  27. @ al kahfi : trimakasih gan temen2 saya juga banyak yang masih sekolah tapi blognya kren kya mbahqopet,zhido,farix dll wkwkwk

    @ zaenal Blog : saya kan sudah share,sebelum posting ini, " Menu Rocking Rolling Rounded Dengan jQuery"

    ReplyDelete
  28. dropdown yang keren kawan, trims sudah berbagi tutorial :)

    ReplyDelete
  29. wokwowkwok,, 2 hati donk,, kan beda orang,, =))

    ReplyDelete
  30. @ BlogS of Hariyanto : sama2 kawan,...

    @ Rama88 : hahaha :)) 2 hati satu cinta sob hahaha =)) =))

    ReplyDelete
  31. mantap bro.., kebetulan sy lagi nyari menu kyk gini., tuk pasang di blog sy yg kedua..,thx ya bro....*smile

    ReplyDelete
  32. @ Rohis Facebook : wah kebetulan sekali ya :)),sama2 sob,...

    ReplyDelete
  33. keren sob, izin di sedot ya sob untuk koleksi,,hehe :D

    ReplyDelete
  34. Nice post sob...

    Salam kenal dan sukses selalu ya sob..

    Oh ya sudah saya follow..follback yah.. jangan lupa tinggalin jejak..hehe :D

    ReplyDelete
  35. menunya bagus juga sob, boleh ne buat dicoba

    ReplyDelete
  36. msh setia nunggu updatan blog Kang mas

    ReplyDelete
  37. ditunggu sob postingan terbarunya :) hihihi ane ada postingan baru nih sob. monggo :)

    ReplyDelete
  38. bagus menunya terlihat profesional, terimakasih ya tutorialnya, ini snagatmembantu bagi yang ingin membuatnya, salam ukhuwah sahabat.

    ReplyDelete
  39. Menunya elegan banget nih,terlihat keren :)

    ReplyDelete
  40. kunjungan silahturahimn ke blogcunayz :) sobat mau gak masuk ke 10 blog deal. dah pada setuju nih didalem :D

    ReplyDelete
  41. Mantab neh infonya.................izin nyoba gan :)

    ReplyDelete
  42. mirip punya si Farixsantips.blogspot.com =))

    ReplyDelete
  43. @ Bayu Rifai : hah? izin sedot sob? ini kan bukan software =)) =))

    @ Najibblog2010 : thank sob,...

    ReplyDelete
  44. @ All : trimakasih atas kunjungan dan supportnya,mohon maaf saya tidak bisa membalas komentar sobat semua satu persatu,... ^_^

    ReplyDelete
  45. selamat malam sobat :) selamat yang atas kedatangannya di 10 blog deal :) hellcomel and happy blogger!

    ReplyDelete
  46. Salam kenal Sob :D N Salam Blogger :D
    Nice :D kapan 2 saya coba kalau Isi blog dah sak Abregggg :D
    He..he... :D

    ReplyDelete
  47. @ Farixsantips : malam juga sob,thank sob,itu kan berkat sobat juga :)

    @ Aku mau gratisan : samlam kenal juga sob,hahaha bukannya udah banyak isi blognya sob? :D

    ReplyDelete
  48. berkat ente juga yang semangat blogging :D hehehe

    ReplyDelete
  49. @ Farixsantips : wkwkwk hatur thank you sob

    ReplyDelete
  50. Blogwalking :D, Jangan lupa kasih komentar ya sob! :D

    ReplyDelete
  51. mantappp tu gan.. keduanya keren banget gan

    ReplyDelete
  52. wah mantap gan menu navigasinya... :D

    ReplyDelete
  53. @ Official Blog Of ALDI-XP : siaplah sob laksanakan

    @ Bangjal Dua Tiga : thank gan

    @ Cirebon-Cyber4rt : thank :)

    ReplyDelete
  54. Makasih gan udah ane pakai di salah satu blog ane, ilmunya sangat bermanfaat bagi blogger pemula seperti ane

    http://jasapengantin.blogspot.com
    http://promosi-ukm.blogspot.com

    ReplyDelete
  55. @ Jasa Pengantin : sama2 gan kan sesama blogger harus saling berbagi :)

    ReplyDelete
  56. keren gan, tapi ni bikin berat blog gak sih? soalnya banyak pake javascript ni blog ane.. :p

    ReplyDelete
  57. keren ni sob......
    thanks buat info ny.....

    follow back ya...
    salam kenal ya sob....

    ReplyDelete
  58. mantap..mkasihh...oya blognya keren mas,,lanjutkan...heheheh

    ReplyDelete
  59. @ ESEMKA : thank gan,sepertinya tidak gan coba di cek demonya berat gak

    @ Aplikasi Why_93 : sama2 gan,siap,salam kenal juga

    @ Dextoshare : thank gan,asik ada yang bilang blog ane kren thank gan,siap

    ReplyDelete
  60. gan, kalo cara meletakkan kode di kolom pertama di bawah header blog gmna? harus cari kode apa dulu?
    tolong di jawab segera :D

    ReplyDelete
    Replies
    1. jika agan ingin meletakan menunya di bawah header silahkan letakan atribut menunya di bawah tag header

      Delete

Untuk menyisipkan kode,gunakan tag
[code]KODE ANDA[/code]
Untuk menyisipkan quote,gunakan tag
[blockquote]KATA-KATA ANDA[/blockquote]
Untuk menyisipkan gambar,gunakan tag
[img]URL GAMBAR ANDA[/img]
Untuk menyisipkan video,gunakan tag
[youtube]URL VIDEO ANDA[/youtube]
Anda juga bisa menggunakan emoticon seperti biasa.

Pasang Iklan Anda Disini

 
Copyright © 2011 Blogcunayz Template Design By Rizky Wardiansyah