Dhafiq Sagara adalah orang bodoh yang tidak bisa apa-apa, tapi dia selalu berusaha untuk terus menjadi yang lebih baik. Rasa keingin-tahuannya sangat tinggi, selalu berusaha dan terus berusaha, trial dan error adalah prinsip belajarnya.

22 Mei 2011

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>
<!-- Untuk Drop Down Menu -->
<script src='http://www.google.com/jsapi'/><script>google.load(&#39;mootools&#39;, &#39;1.2.1&#39;);</script>   

<!-- Load the MenuMatic Class -->
<script src='http://sagaraproject.googlecode.com/files/MenuMatic_0.68.3.js' type='text/javascript'/>

<!-- Create a MenuMatic Instance -->
<script type='text/javascript'>
    window.addEvent(&#39;domready&#39;, function() {           
        var myMenu = new MenuMatic();
    });       
</script>
<!-- END OF DROP DOWN MENU -->



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

<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>
<!--end menu tengah -->


SELAMAT MENCOBA. SEMOGA BERMANFAAT.

8 komentar:

  1. dapet dari mana yan menu maticnya... mantep banget... tak liat-liat... kok sourcenya sampean host di google codenya sampean...

    BalasHapus
  2. hehehe iya mas, disini http://sagaraproject.googlecode.com/files/MenuMatic_0.68.3.js itu menu maticnya

    BalasHapus
  3. kq masih ga bisa tampil yah mas...
    apa aq harus hapus "pages" dulu yah?

    BalasHapus
  4. @fadly: hapus pages? pages apa ya?

    BalasHapus
  5. 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
  6. kamu tambahin CSS codenya di bagian #navcontainer.
    tambahin --> font-family: "comic sans", sans-serif;

    BalasHapus
  7. banyak banget yang harus dipelajari, mending kopi paste saja, beres, hehe!!

    BalasHapus