ViJu
LavaLamp для любитетелей jQuery
LavaLamp - JQuery плагин для дизайнеров - добавляет симпатичный эффект в меню.
Лично я не любитель всяких лишних украшательств, но иногда симпатичные мелочи в дизайне просто необходимы.
Меня попросили исправить одно проблемку с этим плагином.
Цвет текущей ссылки в меню должен был меняться, когда пользователь наводит мышкой на другой пункт меню и фоновое изображение убегает на то меню, на которое наведена мышка.
Оказалось, что сделать это только с помощю css невозможно,
пришлось подправить немного код плагина.
Вот решение:
<pre>
/**
* LavaLamp - A menu plugin for jQuery with cool hover effects.
* @requires jQuery v1.1.3.1 or above
*
* http://gmarwaha.com/blog/?p=7
*
* Copyright (c) 2007 Ganeshji Marwaha (gmarwaha.com)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Version: 0.1.0
*/
(function($) {
$.fn.lavaLamp = function(o) {
o = $.extend({ fx: "linear", speed: 500, click: function(){} }, o || {});
return this.each(function() {
var me = $(this), noop = function(){},
$back = $('<li class="back"><div class="left"></div></li>').appendTo(me),
$li = $("li", this), curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];
$li.not(".back").hover(function() {
move(this);
$("li.current a").addClass('current-off'); // added by Julia
}, noop);
$(this).hover(noop, function() {
move(curr);
$("li.current a").removeClass('current-off'); // added by Julia
});
$li.click(function(e) {
setCurr(this);
return o.click.apply(this, [e, this]);
});
setCurr(curr);
function setCurr(el) {
$back.css({ "left": el.offsetLeft+"px", "width": el.offsetWidth+"px" });
curr = el;
};
function move(el) {
$back.each(function() {
$.dequeue(this, "fx"); }
).animate({
width: el.offsetWidth,
left: el.offsetLeft
}, o.speed, o.fx);
};
});
};
})(jQuery);
</pre>
результат на сайте http://www.sperlingbuilt.com/
Смотрится круто! Молодец!
А почему в блоке "Random Flicker Feed" все картинки одинаковые, а ссылки на них не работают, и firebug выдает 2 ошибки?
я не делала сайт целиком, меня просто попросили исправить проблему с плагином LavaLamp
Ребят, а как сделать активным второй или третий пункт меню? А то у меня при переходе на новую страницу, активным остается первый пункт...![]()
Насколько я помню - достаточно в верстке самого меню
у соответствующего li указывать класс current,
т.е.
<ul><li><a ......<li>
<li class="current"><a ....</li>
......
</ul>
Добрый день!
Всё делаю вроде бы правильно. Все появляется, но кроме самой плавающей штучки. Где может быть ошибка?
могу только предположить, что путь к картинке не верный
Здравствуйте, подскажите пожалуйста, где и как изменять цвет ссылки для вашего хака, когда наводишь мышкой на другое меню и ссылка у старого меню, т.е. там где было уехавшее изображение, меняется. Уже день бьюсь не могу разобраться, даже сайт по ссылке разобрал, но проблему не решил.
Изменяю
.menulava li.current a {
color:#ffffff;
}
.menulava li a:hover, .menulava li a:active, .menulava li a:visited {
border: none;
}
.menulava li a.current-off {
color:#999999;
}
а эффекта никакого. Ваше решение заменил в файле, но ничего не помогает.
Ура, со скриптами с сайта примера всё заработало! Хотя у меня оригинальные jQuery файлы. Я просто заменил свои на ваши и всё. Спасибо большое! :)
вот и замечательно,
пожалуйста :)
Всё работает кроме одного - при нажатии на пункты меню ссылки не работают.
В чем может быть проблема?
дайте ссылку - так сказать сложно
не работает, потому что когда берёте скрипт с сайта лаваламп там в функции, которая прописывается в HTML документ, для примерар стоит EVENT на CLICK - убираете эту строку и ссылка работает.
Отправить новый комментарий