Tutorial: Menu utama ke bawah (drop-down menu)

Tutorial: Menu utama ke bawah (drop-down menu)

Baca Juga

Terdapat pertanyaan oleh rakan blog melalui Shoutbox mengenai "Drop-down Menu" yang terdapat di blog Riwayat Hariku (RH).

Untuk makluman, Sop hanya menggunakan simple drop-dwon menu sahaja untuk blog RH. Terdapat banyak tutorial yang boleh dicari dari Google. Ada yang lagi menarik, canggih dan hebat. Pilihan menu yang ringkas supaya blog tidak terlalu berat dan tidak terikat dengan banyak script.

Untuk membuat drop-down menu seperti blog RH, sila ikuti tutorial mudah berikut:
1. Sila ke 'Design' -> 'Edit HTML'
2. Cari </head>
3. Masukkan kod di bawah sebelum </head>


<!--jquery-DD-Menu-Starts-->
<style type="text/css">
/* menu styles */
#jsddm
{ margin: 0;
padding: 0}

#jsddm li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial}

#jsddm li a
{ display: block;
background: #324143; /*DARK-GREEN*/
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap}

#jsddm li a:hover
{ background: #24313C}

#jsddm li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white}

#jsddm li ul li
{ float: none;
display: inline}

#jsddm li ul li a
{ width: auto;
background: #A9C251; /*LIGHT-GREEN*/
color: #24313C}

#jsddm li ul li a:hover
{ background: #8EA344}
</style>


<!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}

function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}

$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open);
$('#jsddm > li').bind('mouseout', jsddm_timer);});

document.onclick = jsddm_close;
</script>
<!--jquery-DD-Menu-Stops-http://gnesop.com-->




4. Anda boleh mengubah warna menu anda mengikut kesesuaian template blog anda.  Warna untuk kod di atas adalah seperti berikut:

5. Simpan "Edit HTML'

6. Pergi ke 'Layout' -> Page Element -> Add a Gadget -> HTML/JavaScript dan masukkan kod di bawah:

<!--BODY-CODE-->

<ul id="jsddm">

<li><a href="#">JavaScript</a>

<ul>

<li><a href="#">Drop Down Menu</a></li>

<li><a href="#">jQuery Plugin</a></li>

<li><a href="#">Ajax Navigation</a></li>

</ul>

</li>

<li><a href="#">Effect</a>

<ul>

<li><a href="#">Slide Effect</a></li>

<li><a href="#">Fade Effect</a></li>

<li><a href="#">Opacity Mode</a></li>

<li><a href="#">Drop Shadow</a></li>

<li><a href="#">Semitransparent</a></li>

</ul>

</li>

<li><a href="#">Navigation</a></li>

<li><a href="#">HTML/CSS</a></li>

<li><a href="http://bloggerstop.net">Blogger Help</a></li>

</ul>

7. Tukar '#' dengan link pautan anda dan nama link anda. Anda boleh link terus kepada entry, label, page dan link luar.

8. Simpan.