Archive for the 'jQuery' Category

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



November 2018
S S M T W T F
« Feb    
 12
3456789
10111213141516
17181920212223
24252627282930

Top Clicks

  • None

Blog Stats

  • 18,050 hits
Advertisements