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

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?

You may also like...

2 Responses

  1. bobby says:

    sebenarnya sih mau ke exchangezone tapi karna situs nya problem saya cari , ketemu sampean ak gk bkl bohong :) barusan dpt dari linsktoxx mau transfer $1.29 pp ke LR $1.29 itu termasuk fee nya jdi dptnya nanti brp ? klo sampean mau ya kirim imel aja di bobbyjoexx[at]gmail.com sebenarnya mau kirim di indohyip tp ak blm post 10 :)

  2. Argado says:

    Numpang baca2 dimari om :)

Leave a Reply

Your email address will not be published. Required fields are marked *