Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   lavalamp menu нужно доработать (https://javascript.ru/forum/dom-window/34946-lavalamp-menu-nuzhno-dorabotat.html)

Vdomah 25.01.2013 13:55

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');

не передается на след. страницу.
Я так понимаю, нужно ПОСТ заюзать? Или как?

danik.js 25.01.2013 14:41

А чем на сервере генерируется меню? Модифицировать серверный скрипт, чтобы активный пункт получал нужный css-класс.

Deff 25.01.2013 14:50

Vdomah,
Сверяйте href в ссылке с текущей страницей и выставляйте класс active
ThLink = document.URL;
$(".lavalamp > ul > li a").each(function(){
  if($(this).attr('href')==ThLink)$(this).parent().addClass("active");
});

Vdomah 25.01.2013 16:01

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();
...

Vdomah 25.01.2013 20:17

Разобрался, работает. У меня значение $(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й и тд.
Пытаюсь решить, но если кто может быстрей разобраться, то я буду очень рад))

Vdomah 25.01.2013 20:34

Все, есть:
В $('.lavalamp li').hover(function(){...} и в следующей функции надо заменить
($(this).parents('.lavalamp').offset().left + 15)

на
$('.lavalamp li.active').offset().left;


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