MultiLevel CSS drop down menu

saya barusan menyelesaikan job kecil-kecilan, yaitu mengedit drop down menu untuk wordpress themes. karena jadi stress ngurusin TA, jadinya iseng nerima job itu lumayan lah buat beli permen. hehe

setelah mencari wangsit dengan mbah google. akhirnya saya nemu jQuery CSS buat drop down menu di http://www.dynamicdrive.com/

File yang dibutuhkan cuman

• jqueryslidemenu.css
• jqueryslidemenu.js (di dalam file ini, kamu harus setting URL 2 tanda panah dibawah ini)
• 

CSS dan JavaScript

{code type=HTML}<link rel=”stylesheet” type=”text/css” href=”jqueryslidemenu.css” /><!–[if lte IE 7]>
<mce:style type=”text/css”><! html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/ –>
<!–[endif]–>

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js” type=”text/javascript”></script> <script src=”jqueryslidemenu.js” type=”text/javascript”></script>

{/code}

HTML

{code type=HTML}<div id=”myslidemenu”>
<ul>
<li><a href=”http://www.dynamicdrive.com“>Item 1</a></li>
<li><a href=”#”>Item 2</a></li>
<li><a href=”#”>Folder 1</a>
<ul>
<li><a href=”#”>Sub Item 1.1</a></li>
<li><a href=”#”>Sub Item 1.2</a></li>
<li><a href=”#”>Sub Item 1.3</a></li>
<li><a href=”#”>Sub Item 1.4</a></li>
</ul>
</li>
<li><a href=”#”>Item 3</a></li>
<li><a href=”#”>Folder 2</a>
<ul>
<li><a href=”#”>Sub Item 2.1</a></li>
<li><a href=”#”>Folder 2.1</a>
<ul>
<li><a href=”#”>Sub Item 2.1.1</a></li>
<li><a href=”#”>Sub Item 2.1.2</a></li>
<li><a href=”#”>Folder 3.1.1</a>
<ul>
<li><a href=”#”>Sub Item 3.1.1.1</a></li>
<li><a href=”#”>Sub Item 3.1.1.2</a></li>
<li><a href=”#”>Sub Item 3.1.1.3</a></li>
<li><a href=”#”>Sub Item 3.1.1.4</a></li>
<li><a href=”#”>Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href=”#”>Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=”http://www.dynamicdrive.com/style/“>Item 4</a></li>
</ul>
<br style=”clear: left” />
</div>

{/code}

kalau di wordpress themes, setting urlnya gambar panahnya mending diatur diluar. jadi hapus code setting image di jqueryslidemenu.js terus pindah ke header.php di wordpress themes. :)

{code type=HTML}<script type=”text/javascript”>
var arrowimages={down:[‘downarrowclass’, ‘<?php bloginfo(‘stylesheet_directory’); ?>/images/down.gif’, 23], right:[‘rightarrowclass’, ‘<?php bloginfo(‘stylesheet_directory’); ?>/images/right.gif’]}
</script>

{/code}

simple banget kan?