メニュー ul クラスは、上に全幅を伸ばします。li クラスにカーソルを合わせると、ドロップ コンテンツが開きます。マウスがまだ「ul」にあるときは、最後のliのドロップコンテンツを開いたままにしておき、マウスがメニューから完全に離れたときにのみコンテンツを非表示にしたいと思います。jsFiddle の設定、青い bg フィールドは「ul」クラスです。マウスがまだそこにあるときに、最後のコンテンツを開いたままにしておきたいです。
http://jsfiddle.net/R7aTq/150/
(function($){
$.fn.naviDropDown = function(options) {
//set up default options
var defaults = {
dropDownClass: 'dropdown', //the class name for your drop down
dropDownWidth: 'auto', //the default width of drop down elements
slideDownEasing: 'easeInOutCirc', //easing method for slideDown
slideUpEasing: 'easeInOutCirc', //easing method for slideUp
slideDownDuration: 500, //easing duration for slideDown
slideUpDuration: 500, //easing duration for slideUp
orientation: 'horizontal' //orientation - either 'horizontal' or 'vertical'
};
var opts = $.extend({}, defaults, options);
return this.each(function() {
var $this = $(this);
$this.find('.'+opts.dropDownClass).css('width', opts.dropDownWidth).css('display', 'none');
var buttonWidth = $this.find('.'+opts.dropDownClass).parent().width() + 'px';
var buttonHeight = $this.find('.'+opts.dropDownClass).parent().height() + 'px';
if(opts.orientation == 'horizontal') {
$this.find('.'+opts.dropDownClass).css('left', '0px').css('top', buttonHeight);
}
if(opts.orientation == 'vertical') {
$this.find('.'+opts.dropDownClass).css('left', buttonWidth).css('top', '0px');
}
$this.find('li').hoverIntent(getDropDown, hideDropDown);
});
function getDropDown(){
activeNav = $(this);
showDropDown();
}
function showDropDown(){
activeNav.find('.'+opts.dropDownClass).slideDown({duration:opts.slideDownDuration, easing:opts.slideDownEasing});
}
function hideDropDown(){
activeNav.find('.'+opts.dropDownClass).slideUp({duration:opts.slideUpDuration, easing:opts.slideUpEasing});//hides the current dropdown
}
};
})(jQuery);