STEP 6 - アイコンを追加する
アイコンを付けて、サブメニューがあることが分かりやすいデザインに。
jQuery Code
$(function(){
$("#dropdown li").each(function(){
var subMenu = $("> ul", this);
var defaultHeight = subMenu.height();
$(this).hover(function(){
if( subMenu.css("display") == "none" ){
subMenu.slideDown("fast", function(){
subMenu.css("overflow", "visible");
});
}
else{
subMenu.stop().animate({
"height": defaultHeight
}, "fast", function(){
subMenu.css("overflow", "visible");
});
}
},
function(){
subMenu.stop().slideUp("fast");
});
});
$("#dropdown li:has(ul) > a").append('<span class="icon"></span>');
$("#dropdown ul").prepend('<li class="balloon-caret"></li>').hide();
});
jQuery.com 公式ドキュメント