Membuat Drop Down Menu Menggunakan Menu Matic

Membuat drop down menu memanglah suatu hal yang penting untuk mendeklarasikan kategori suatu website atau blog. Karena dengan adanya drop down menu, pengunjung bisa mengetahu subkategori/submenu dari menu utama.
Kali ini saya akan membahas mengenai bagaimana membuat drop down menu dengan menggunakan JQuery MenuMatic.

Pada tahap pertama, buatlah CSS untuk menu. Pada blogspot, anda letakkan code berikut setelah tag <b:skin><![CDATA[ atau letakkan setelah tag </title>

/*menu tengah*/
#navcontainer{
width:857px;
height:38px;
display:block;
overflow:hidden;
padding-left:15px;
background:#E0E0E0 left top repeat-x;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;
border-radius:5px;
margin-left:54px
}

#navcontainer .current-cat a{
background:#1A76B5 left top repeat-x;
color:#FFF
}

#nav a,#subMenusContainer a{
text-decoration:none;
display:block
}

#nav a{
margin:0;
float:left;
background:none;
padding:13px 14px;
color:#1E1E1E;
text-transform:uppercase;
font-weight:bold;
font-size:12px
}

#nav li a:hover,#nav li a:focus,#nav a.mainMenuParentBtnFocused{
background:#1A76B5 left top repeat-x;
color:#fff
}

#subMenusContainer a,#nav li li a{
color:#fff;
font-size:12px;
text-align:left;
background-color:#0F6FB1;
padding:6px 24px;
text-shadow:none
}

#subMenusContainer a:hover,#subMenusContainer a:focus,#subMenusContainer a.subMenuParentBtnFocused{
background:#2092E1;
color:#fff;
text-shadow:none
}

.subMenuParentBtn{
background:url(../img/arrow_right.gif) right center no-repeat
}

.subMenuParentBtnFocused{
background:url(../img/arrow_right_over.gif) right center no-repeat
}

.mainMenuParentBtn{}

.mainMenuParentBtnFocused{}

.smOW{
display:none;
position:absolute;
overflow:hidden;
padding:0 2px;
margin:0 0 0 -2px
}

#nav,#nav ul,#nav ol,#subMenusContainer ul,#subMenusContainer ol{
padding:0;
margin:0;
list-style:none;
line-height:1em
}

#nav ol,#nav ul,#subMenusContainer ul,#subMenusContainer ol{
background:none;left:0
}

#nav li{
background-image:url(../img/mainnav-sep.gif);
background-repeat:no-repeat;
background-position:100% 5px;
cursor:pointer;
float:left;
margin:0 2px 0 0;
padding:0 2px 0 0;
height:38px;
display:inline
}

#subMenusContainer li{
list-style:none
}

#nav{
width:950px;
margin:0 auto;
clear:both;
overflow:hidden;
font-size:12px;
display:block
}

#nav .children{
display:none
}

#subMenusContainer{
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:0;
overflow:visible;
z-index:1000000000
}
/*end of menu tengah*/

Pada #navcontainer ada yang perlu disesuaikan aturan:

width untuk panjang menu.
height untuk lebar menu.
padding-left untuk pengaturan posisi tulisan menu yang pertama terhadap posisi paling kiri.
margin-left pengaturan untuk posisi menu dilihat dari sisi kiri.

Pasangkan plugin jQuery MenuMatic pada blog atau website anda. Letakkan code berikut sebelum tag <body> atau setelah tag </head>

<script src='http://www.google.com/jsapi'/><script>google.load('mootools', '1.2.1');</script>


<script src='http://sagaraproject.googlecode.com/files/MenuMatic_0.68.3.js' type='text/javascript'/>


<script type='text/javascript'>
    window.addEvent('domready', function() {
        var myMenu = new MenuMatic();
    });
</script>

Kemudian isikan menu beserta submenunya pada posisi/letak yang anda inginkan (akan tetapi wajib diletakkan di antara tag <body> </body>). Berikut contoh isi menunya:

<div id='navcontainer'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='/search/label/News'>NEWS</a></li>

<li><a href='#'>TUTORIAL</a>
<ul class='children'>
<li><a href='/search/label/Programming'>PROGRAMMING</a>
<ul class='children'>
<li><a href='/search/label/Java'>Java</a></li>
<li><a href='/search/label/PHP'>PHP</a></li>
<li><a href='/search/label/HTML'>HTML</a></li>
<li><a href='/search/label/C/C++'>C/C++</a></li>
<li><a href='/search/label/JavaScript'>JavaScript</a></li>
<li><a href='/search/label/JQuery'>JQuery</a></li>
<li><a href='/search/label/Google API'>Google API</a></li>
<li><a href='/search/label/WAP'>WAP</a></li>
</ul>
</li>
<li><a href='/search/label/Programming'>DATABASE</a>
<ul class='children'>
<li><a href='/search/label/MySQL'>MySQL</a></li>
<li><a href='/search/label/Oracle'>Oracle</a></li>
<li><a href='/search/label/PostgreSQL'>PostgreSQL</a></li>
</ul>
</li>
<li><a href='/search/label/Programming'>SISTEM OPERASI</a>
<ul class='children'>
<li><a href='/search/label/Ubuntu'>Ubuntu</a></li>
<li><a href='/search/label/Tips Trik Windows'>Windows</a></li>
<li><a href='/search/label/Linux Mint'>Linux Mint</a></li>
<li><a href='/search/label/OpenSolaris'>OpenSolaris</a></li>
</ul>
</li>
<li><a href='/search/label/CMS'>CMS</a>
<ul class='children'>
<li><a href='/search/label/Joomla'>Joomla</a></li>
<li><a href='/search/label/Prestashop'>Prestashop</a></li>
<li><a href='/search/label/Mahara'>Mahara</a></li>
</ul>
</li>
</ul>
</li>

<li><a href='/search/label/Download'>DOWNLOAD</a>
<ul class='children'>
<li><a href='/search/label/Software'>Software</a></li>
<li><a href='/search/label/Antivirus'>Antivirus</a></li>
<li><a href='/search/label/Musik'>Musik</a>
<ul class='children'>
<li><a href='/search/label/Kartun'>Kartun</a></li>
<li><a href='/search/label/Jazz'>Jazz</a></li>
<li><a href='/search/label/Video Klip'>Video Klip</a></li>
</ul>
</li>
<li><a href='/search/label/E-Book'>E-Book</a>
<ul class='children'>
<li><a href='/search/label/Android'>Android</a></li>
</ul>
</li>
<li><a href='/search/label/Jurnal'>Jurnal</a></li>
</ul>
</li>

<li><a href='/search/label/Desain'>DESAIN</a>
<ul class='children'>
<li><a href='/search/label/Brosur'>Brosur</a></li>
<li><a href='/search/label/Piagam dan Sertifikat'>Piagam dan Sertifikat</a></li>
<li><a href='/search/label/Poster'>Poster</a></li>
<li><a href='#'>Spanduk</a></li>
</ul>
</li>

</ul>
</div>

SELAMAT MENCOBA. SEMOGA BERMANFAAT.

8 komentar:

Arif Setyawan24 Mei 2011 pukul 10.19
dapet dari mana yan menu maticnya... mantep banget... tak liat-liat... kok sourcenya sampean host di google codenya sampean...
BalasHapus
Balasan
Mudafiq Riyan Pratama24 Mei 2011 pukul 12.31
hehehe iya mas, disini http://sagaraproject.googlecode.com/files/MenuMatic_0.68.3.js itu menu maticnya
BalasHapus
Balasan
Fadly Ndowo27 Mei 2011 pukul 15.13
kq masih ga bisa tampil yah mas...
apa aq harus hapus "pages" dulu yah?
BalasHapus
Balasan
Mudafiq Riyan Pratama27 Mei 2011 pukul 15.35
@fadly: hapus pages? pages apa ya?
BalasHapus
Balasan
Fadly Ndowo27 Mei 2011 pukul 16.50
hahaha...
tab bawaan blogger mas...
yang ada home dkk...
tapi udah bisa kq, aq pindah ke bawah,
tinggal ganti font-nya aja,
gimana tuh solusinya,,,
BalasHapus
Balasan
Mudafiq Riyan Pratama27 Mei 2011 pukul 21.55
kamu tambahin CSS codenya di bagian #navcontainer.
tambahin --> font-family: "comic sans", sans-serif;
BalasHapus
Balasan
Anonim31 Mei 2011 pukul 09.42
Sip
BalasHapus
Balasan
Mansur21 November 2011 pukul 18.40
banyak banget yang harus dipelajari, mending kopi paste saja, beres, hehe!!
BalasHapus
Balasan

Tambahkan komentar

Dhafiq Sagara

22 Mei 2011

Membuat Drop Down Menu Menggunakan Menu Matic

8 komentar:

Jumlah Pengunjung

Contact Support

Email:

Subscribe via email

Random Post

Recent Post

Recent Comment

Link Ilmu Komputer

Link Sahabat