20
Nov
09

Dropdown Menu

Contoh dropdown menu ini bisa tampil dengan baik di Firefox, IE, Safari dan Chrome.

Kode html, tampilan awal menu. Sampai di sini tampilan masih seperti list biasa.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="dropdown.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="makedropdown.js"></script>
<title>Drop Down Example</title>
</head>

<body>
<ul id="cssdropdown">
 <li>
 <div>Search Engines</div>
 <ul>
 <li><a href="http://google.com/"><div>Google</div></a></li>
 <li><a href="http://yahoo.com/"><div>Yahoo</div></a></li>
 <li><a href="http://live.com/"><div>Live Search</div></a></li>
 </ul>
 </li>
 <li>
 <div>Shopping</div>
 <ul>
 <li><a href="http://amazon.com/"><div>Amazon</div></a></li>
 <li><a href="http://ebay.com/"><div>eBay</div></a></li>
 <li><a href="http://www.kaskus.us/forumdisplay.php?f=25"><div>Kaskus FJB</div></a></li>
 </ul>
 </li>
</ul>

</body>

</html>

Kode javascript (makedropdown.js), sampai di sini item menu tersebut sudah dapat bergerak naik turun tapi masih belum benar:

// JavaScript Document

$(document).ready(function(){
 // jika li dengan class headlink di hover
 $('li.headlink').hover(
 function() {
 $('ul', this).slideDown();
 },
 function() {
 $('ul', this).slideUp();
 });
});

Kode css (dropdown.css), tambahkan kode css untuk membuat dropdown menu tampil dengan benar:


/* CSS Document */

body { font-family:Calibri, Arial; }

a { text-decoration:none; }

/* padding-left:0 remove li text indent */
ul { padding:0; margin:0; }

li { list-style-type:none; }
li.headlink { float:left; margin-right:2px; width:120px; }
li.headlink ul { display: none; }

.menuparent { padding:5px; border:1px solid #000; background:url(bg.png); color:#FFFFFF; cursor:pointer; }
.menuparent:hover { background:url(bg-hover.png); }

.menuitem { padding:5px; border:1px solid #000; margin-top:1px; background:url(bg.png); color:#FFFFFF; }
.menuitem:hover { background:url(bg-hover.png); }

Setelah ditambahkan sedikit gambar untuk background, seperti inilah hasil akhirnya.

Semua file diatas simpan dalam direktori yang sama. Jangan lupa sertakan file jquery dalam direktori tersebut. Selamat mencoba.

Advertisements

0 Responses to “Dropdown Menu”



  1. Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: