めっちゃめちゃになってるので
コードをできるだけ最小限にしてメモ。
・適当なHTMLを作成
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Jquery ドロップダウンメニュー</title>
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style: none;
}
/*
一階層目
*/
ul.dropdown {
position: relative;
}
ul.dropdown li {
float: left;
zoom: 1;
}
ul.dropdown li a {
display: block;
}
ul.dropdown li.hover, ul.dropdown li:hover {
position: relative;
}
/*
2階層目
*/
ul.dropdown ul {
width: 220px;
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
}
ul.dropdown ul li {
background: #f6f6f6;
color: #000;
float: none;
}
/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a {
border-right: none;
width: 100%;
display: inline-block;
}
/*
LEVEL THREE
*/
ul.dropdown ul ul {
left: 100%;
top: 0;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
</style>
<!--[if lte IE 7]>
ul.dropdown ul li { display: inline; width: 100%; }
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dropdown.js"></script>
</head>
<body>
<ul class="dropdown">
<li><a href="#">今日のご飯</a>
<ul>
<li><a href="#">ラーメン</a></li>
<li><a href="#">カレーライス</a>
<ul>
<li><a href="#">チキンカレー</a></li>
<li><a href="#">カツカレー</a></li>
</ul>
</li>
<li><a href="#">天ぷら</a></li>
</ul>
</li>
</ul>
</body>
</html>
・jquery.dropdown.js
$(function(){
var config = {
sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
interval: 200, // number = milliseconds for onMouseOver polling interval
over: doOpen, // function = onMouseOver callback (REQUIRED)
timeout: 200, // number = milliseconds delay before onMouseOut
out: doClose // function = onMouseOut callback (REQUIRED)
};
function doOpen() {
$(this).addClass("hover");
$('ul:first',this).css('visibility', 'visible');
}
function doClose() {
$(this).removeClass("hover");
$('ul:first',this).css('visibility', 'hidden');
}
$("ul.dropdown li").hoverIntent(config);
$("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");
});
これでドロップダウンメニューのできあがり
