Drop-down—HTML
code
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
<html
xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us"
lang="en-us">
<head>
<meta
http-equiv="content-type" content="text/html;
charset=utf-8" />
<meta
http-equiv="imagetoolbar" content="false" />
<title>Building Drop-Down
Menus</title>
<link
rel="stylesheet" type="text/css"
href="../_common/basic.css" />
<link
rel="stylesheet" type="text/css"
href="dropdown.css" />
<!--[if IE 6]>
<script
type="text/javascript"
src="../_common/jquery.js"></script>
<script
type="text/javascript" src="dropdown.js"></script>
<![endif]-->
</head>
<body>
<div
id="container">
<ul
class="dropdown">
<li
class="dropdown_trigger">
<a href="#">Nav
Item</a>
<ul>
<li>
<a
href="#">Subitem</a>
</li>
<li>
<a
href="#">Subitem</a>
</li>
<li>
<a
href="#">Subitem</a>
</li>
<li>
<a
href="#">Subitem</a>
</li>
<li>
<a
href="#">Subitem</a>
</li>
</ul>
</li>
...
</ul>
<p>
This text is just here to show
that the menu overlaps the content below it.
</p>
...
</div>
</body>
</html>
Drop-down—jQuery
code
// Initialize.
function init_dropdown() {
// Does element exist?
if (!$('ul.dropdown').length) {
// If not, exit.
return;
}
// Add listener for hover.
$('ul.dropdown
li.dropdown_trigger').hover(function() {
// Show subsequent <ul>.
$(this).find('ul').fadeIn(1);
},
function() {
// Hide subsequent <ul>.
$(this).find('ul').hide();
});
}
// Kick things off.
$(document).ready(function() {
init_dropdown();
});
Disediakan oleh: Saipul Bahari Hasan
Sumber: ebook jQuery_Cookbook.pdf
0 comments:
Post a Comment