Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.01.2011, 19:48
Новичок на форуме
Отправить личное сообщение для Bangoo Посмотреть профиль Найти все сообщения от Bangoo
 
Регистрация: 07.01.2011
Сообщений: 5

Переделка скрипта меню на 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
Ответить с цитированием
  #2 (permalink)  
Старый 10.01.2011, 13:50
Новичок на форуме
Отправить личное сообщение для Wital Посмотреть профиль Найти все сообщения от Wital
 
Регистрация: 10.01.2011
Сообщений: 3

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ищу jQuery плагин для создания меню Zeboton jQuery 9 15.09.2014 15:31
Не работает jQuery меню с AJAX eugene1986 jQuery 0 08.07.2010 18:49
Jquery accordion, переделка скрипта. BassEast jQuery 0 26.02.2010 10:57
jQuery jTreeMenu plugin Seafnox jQuery 9 12.01.2010 21:55
Блок переключения меню на JS, два скрипта в одном файле Dizeloid Элементы интерфейса 0 30.07.2009 12:03