Всех с наступившим кроликом, суть вопроса следующая:
нашел интересное выпадающее меню на JQuery.
Демо. Прикрутил его на свой шаблон. Переделал под себя дизайн, но проблема в том что фон выпадающего меню сплошной, я же хочу сделать прозрачный, с закругленными краями и рамкой.
Для этого мне нужно сделать три контейнера DIV, предварительно запихнув их в главный контейнер.
В div-top положить шапку рамки, в div-content повторяющуюся среднюю, и нижнюю в div-bottom.
Но сложность в том, что исходный скрипт распространяется только на один div ".sub", как туда вместить верхний и нижний контейнеры понятия не имею, потому что совсем не ориентируюсь ни в JQuery ни в Jave. Помогите если возможно, ну очень не хочется отказываться от красивой менюшки.
//On Hover Over
function megaHoverOver(){
$(this).find(".sub").stop().fadeTo('fast', 1).show(); //Find sub and fade it in
(function($) {
//Function to calculate total width of all ul's
jQuery.fn.calcSubWidth = function() {
rowWidth = 0;
//Calculate row
$(this).find("ul").each(function() { //for each ul...
rowWidth = $(this).width(); //Add each ul's width together
});
};
})(jQuery);
if ( $(this).find(".row").length > 0 ) { //If row exists...
var biggestRow = 0;
$(this).find(".row").each(function() { //for each row...
$(this).calcSubWidth(); //Call function to calculate width of all ul's
//Find biggest row
if(rowWidth > biggestRow) {
biggestRow = rowWidth;
}
});
$(this).find(".sub").css({'width' :biggestRow}); //Set width
$(this).find(".row:last").css({'margin':'0'}); //Kill last row's margin
} else { //If row does not exist...
$(this).calcSubWidth(); //Call function to calculate width of all ul's
$(this).find(".sub").css({'width' : rowWidth}); //Set Width
}
}
//On Hover Out
function megaHoverOut(){
$(this).find(".sub").stop().fadeTo('fast', 0, function() { //Fade to 0 opactiy
$(this).hide(); //after fading, hide it
});
}
//Set custom configurations
var config = {
sensitivity: 2, // значение = чувствительность (должно быть больше 1)
interval: 100, // значение = интервал задержки при открытии
over: megaHoverOver, // функция возврата (обязательно)
timeout: 500, // значение = интервал задержки при открытии при закрытии
out: megaHoverOut // function = функция возврата (обязательно)
};
$("ul#topnav li .sub").css({'opacity':'0'}); //Fade sub nav to 0 opacity on
default
$("ul#topnav li").hoverIntent(config); //Trigger Hover intent with custom configuration