Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.01.2013, 13:55
Аватар для Vdomah
Интересующийся
Отправить личное сообщение для Vdomah Посмотреть профиль Найти все сообщения от Vdomah
 
Регистрация: 30.12.2012
Сообщений: 29

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

не передается на след. страницу.
Я так понимаю, нужно ПОСТ заюзать? Или как?
Ответить с цитированием
  #2 (permalink)  
Старый 25.01.2013, 14:41
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

А чем на сервере генерируется меню? Модифицировать серверный скрипт, чтобы активный пункт получал нужный css-класс.
Ответить с цитированием
  #3 (permalink)  
Старый 25.01.2013, 14:50
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Vdomah,
Сверяйте href в ссылке с текущей страницей и выставляйте класс active
ThLink = document.URL;
$(".lavalamp > ul > li a").each(function(){
  if($(this).attr('href')==ThLink)$(this).parent().addClass("active");
});
Ответить с цитированием
  #4 (permalink)  
Старый 25.01.2013, 16:01
Аватар для Vdomah
Интересующийся
Отправить личное сообщение для Vdomah Посмотреть профиль Найти все сообщения от Vdomah
 
Регистрация: 30.12.2012
Сообщений: 29

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();
...
Ответить с цитированием
  #5 (permalink)  
Старый 25.01.2013, 20:17
Аватар для Vdomah
Интересующийся
Отправить личное сообщение для Vdomah Посмотреть профиль Найти все сообщения от Vdomah
 
Регистрация: 30.12.2012
Сообщений: 29

Разобрался, работает. У меня значение $(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:20.
Ответить с цитированием
  #6 (permalink)  
Старый 25.01.2013, 20:34
Аватар для Vdomah
Интересующийся
Отправить личное сообщение для Vdomah Посмотреть профиль Найти все сообщения от Vdomah
 
Регистрация: 30.12.2012
Сообщений: 29

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

на
$('.lavalamp li.active').offset().left;
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
нужно написать фейк с элементами js в vk totcam Работа 3 27.10.2017 14:42
Нужно описать как работают два java script'a Smoke332 Общие вопросы Javascript 8 26.09.2010 16:13
Нужно обяснить мне на счет ІР RaS Оффтопик 9 05.07.2010 17:39
нужно создать много копий div ASM29A Элементы интерфейса 3 27.03.2010 20:22
доработать скрипт под IE 8 harryer Internet Explorer 1 23.09.2009 11:53