lavalamp menu нужно доработать
Во всех туториалах по Лаваламп меню есть демки, где демонстрируется меню с нужным эффектом. Т.е. меню, которое никуда не ведет, а просто при клике на элементе меню ему присваивается класс active и фон переезжает под этот элемент, к примеру:
http://ruseller.com/lessons.php?rub=29&id=539 http://yapro.ru/web-master/javascrip...-lavalamp.html Прицепил к сайту эту менюху. Есть такой javascript: $(document).ready(function () { //найти текущую позицию активного элемента var dleft = $('.lavalamp li.active').offset().left - $('.lavalamp').offset().left; var dwidth = $('.lavalamp li.active').width() + "px"; //присвоить эту позицию элеметку с подсветкой $('.floatr').css({ "left": dleft+"px", "width": dwidth }); $('.lavalamp li').hover(function(){ var left = $(this).offset().left - ($(this).parents('.lavalamp').offset().left + 15); var width = $(this).width() + "px"; var sictranslate = "translate("+left+"px, 0px)"; $(this).parent('ul').next('div.floatr').css({ "width": width, "-webkit-transform": sictranslate, "-moz-transform": sictranslate }); }, function(){ var left = $(this).siblings('li.active').offset().left - ($(this).parents('.lavalamp').offset().left + 15); var width = $(this).siblings('li.active').width() + "px"; var sictranslate = "translate("+left+"px, 0px)"; $(this).parent('ul').next('div.floatr').css({ "width": width, "-webkit-transform": sictranslate, "-moz-transform": sictranslate }); }).click(function(){ $(this).siblings('li').removeClass('active'); $(this).addClass('active'); return false; }); }); Чтобы ссылки начали работать, в конце, в click(function(){ поменял return false; на true. Но теперь, при переходе по ссылке, активным в любом случае остается первый пункт меню, то есть, эта часть $(this).siblings('li').removeClass('active'); $(this).addClass('active'); не передается на след. страницу. Я так понимаю, нужно ПОСТ заюзать? Или как? |
А чем на сервере генерируется меню? Модифицировать серверный скрипт, чтобы активный пункт получал нужный css-класс.
|
Vdomah,
Сверяйте href в ссылке с текущей страницей и выставляйте класс active ThLink = document.URL; $(".lavalamp > ul > li a").each(function(){ if($(this).attr('href')==ThLink)$(this).parent().addClass("active"); }); |
Deff, спасибо, логику понял, но по прежнему не работает. Может я не туда вставляю?
$(document).ready(function () { var ThLink = document.URL; $(".lavalamp > ul > li a").each(function(){ if($(this).attr('href') == ThLink) $(this).parent().addClass("active"); }); //get the current position of the active item var dleft = $('.lavalamp li.active').offset().left - $('.lavalamp').offset().left; var dwidth = $('.lavalamp li.active').width(); ... |
Разобрался, работает. У меня значение $(this).attr('href') были в виде main, about (без http://sitename/)и тд, поэтому разбил var ThLink = document.URL; на массив. Плюс, это правильнее, т.к. при УРЛе страницы http://sitename/main/раздел условие $(this).attr('href') == ThLink не сработало бы:
var ThLink = document.URL; var page = ThLink.split('/'); $(".lavalamp li.active").removeClass('active'); $(".lavalamp > ul > li a").each(function(){ if($(this).attr('href') == page[3]) $(this).parent().addClass("active"); }); При загрузке страницы класс .active на нужном месте. Зато теперь поехали функции hover и та, что после нее. Позиционирование, которое они дают уходит влево от нужной позиции на 1 ширину пункта меню, если активен 2й пункт и на 2 ширины, если 3й и тд. Пытаюсь решить, но если кто может быстрей разобраться, то я буду очень рад)) |
Все, есть:
В $('.lavalamp li').hover(function(){...} и в следующей функции надо заменить ($(this).parents('.lavalamp').offset().left + 15) на $('.lavalamp li.active').offset().left; |
Часовой пояс GMT +3, время: 20:42. |