Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Переделка скрипта меню на JQuery (https://javascript.ru/forum/jquery/14239-peredelka-skripta-menyu-na-jquery.html)

Bangoo 07.01.2011 19:48

Переделка скрипта меню на JQuery
 
Всех с наступившим кроликом, суть вопроса следующая:
нашел интересное выпадающее меню на 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

Wital 10.01.2011 13:50

я вам советую использовать полупрозрачную картинку в формате *.png для фона (ее можно сделать в photoshop), а для закругления я пользовался плагином jquуry - http://blue-anvil.com/jquerycurvycorners/test.html. И не нужны никакие лишние блоки!


Часовой пояс GMT +3, время: 21:00.