Javascript.RU

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

Добавить активный элемент
Делаю меню для сайта такой конструкции:
<div id="Menu">
			<ul>
				<li class="button1"><a href="#">Кнопка</a></li>
				<li class="button2"><a href="#">Кнопка</a></li>
				<li class="button3"><a href="#">Кнопка</a></li>
				<li class="button4"><a href="#">Кнопка</a></li>
				<li class="button5"><a href="#">Кнопка</a></li>
			</ul>
</div>

Дальше пишу скрипт:
var arr = [ "button1 > a", "button2 > a", "button3 > a", "button4 > a", "button5 > a" ];
	jQuery.each(arr, function(i) {
	  $("." + arr[i]).mouseenter(function () {
	  	$("." + arr[i]).stop();
		$("." + arr[i]).animate({width:"240px"}, 500);
    });
	  $("." + arr[i]).mouseleave(function () {
	  	$("." + arr[i]).stop();
	 	$("." + arr[i]).animate({width:"45px"}, 500);
    });
	  $("." + arr[i]).click(function () {
	 	$("." + arr[i]).css("width","240px");
		$("." + arr[i]).mouseleave(function () {
	 	$("." + arr[i]).stop();});
    });
});

Эффекты работают как надо, но только не знаю каким образом добавить активный элемент. Например, если посетитель находиться на главной, активный элемент (в данном случае имеющий width:240px) button1 > a, на второй странице button2 > a и т.д.
Пробовал делать так:
$("." + arr[<?php проверка url echo int; ?>]).css("width","240px");

Но при наведении на другие элементы он не закрывался и следовательно анимация работала не в ту сторону, меню разъезжалось.
Есть подобный скрипт на MooTools:
ImageMenu
Ответить с цитированием
  #2 (permalink)  
Старый 09.08.2009, 13:47
Новичок на форуме
Отправить личное сообщение для Wirty Посмотреть профиль Найти все сообщения от Wirty
 
Регистрация: 08.08.2009
Сообщений: 4

Добавил в код следующее.
$("." + arr[<?php if (проверка) echo int;?>]).animate({width:"240px"}, 500);
		$("#Menu").hover(function(){
		$("." + arr[<?php if (проверка) echo int;?>]).animate({width:"45px"}, 500);
	}, function(){
		$("." + arr[<?php if (проверка) echo int;?>]).animate({width:"240px"}, 500);
	});

Работает, но корявенько ):
Ответить с цитированием
  #3 (permalink)  
Старый 09.08.2009, 13:55
Аспирант
Отправить личное сообщение для Urfin Посмотреть профиль Найти все сообщения от Urfin
 
Регистрация: 22.07.2009
Сообщений: 85

Я написал вот так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="X-UA-Compatible" content="IE=7"/>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>slide-menu</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery.hsm.js" type="text/javascript"></script>

<style type="text/css">
	div#menu{width:500px; overflow:hidden;}
	div#menu ul{ position:relative; list-style:none; width:1000px; height:200px; overflow:hidden; padding:0;}
	div#menu ul li{ height:200px; float:left;}
	div#menu ul li a{ display:block; width:98px; height:200px; border-left:2px solid #fff; float:left;}
	.button1 a{background:url(images/landscapes.jpg) no-repeat;}
	.button2 a{background:url(images/abstract.jpg) no-repeat;}
	.button3 a{background:url(images/nature.jpg) no-repeat;}
	.button4 a{background:url(images/people.jpg) no-repeat;}
	.button5 a{background:url(images/urban.jpg) no-repeat;}
	.active a{width:310px;}
</style>
</head><body>
<div id="menu">
	<ul>
		<li class="button1"><a href="#"></a></li>
		<li class="button2"><a href="#"></a></li>
		<li class="button3"><a href="#"></a></li>
		<li class="button4"><a href="#"></a></li>
		<li class="button5"><a href="#"></a></li>
	</ul>
</div>	
</body>
</html>


// JavaScript Document jquery.hsm.js

$(document).ready(function() {
	$('#menu').find('a').mouseenter(
		function(){
			$('#menu').find('a').stop(true,false);
			$(this).animate({'width':'310px'});
			$(this).parent('li').siblings('li').find('a').animate({'width':'45px'});
		}).live('click',function(){
			$(this).animate({'width':'310px'});
			$(this).parent('li').siblings('li').find('a').animate({'width':'45px'}).end().removeClass('active').end().addClass('active');
			if($('#menu').find('li').hasClass('active')){
				$('#menu').mouseleave(
					function(){
						$(this).find('a').stop(true,false);
						$(this).find('li:not(.active)').find('a').animate({'width':'45px'});
						$(this).find('li.active').find('a').animate({'width':'310px'});
					}
				);
			}
		});
	if(!($('#menu').find('li').hasClass('active'))){
		$('#menu').mouseleave(
			function(){
				$(this).find('a').stop(true,false);
				$(this).find('a').animate({'width':'98px'});
			}
		);
	}
	else{
		$('#menu').mouseleave(
			function(){
				$(this).find('a').stop(true,false);
				$(this).find('li:not(.active)').find('a').animate({'width':'45px'});
				$(this).find('li.active').find('a').animate({'width':'310px'});
			}
		);
	}
});

Последний раз редактировалось Urfin, 09.08.2009 в 14:10.
Ответить с цитированием
  #4 (permalink)  
Старый 09.08.2009, 14:34
Новичок на форуме
Отправить личное сообщение для Wirty Посмотреть профиль Найти все сообщения от Wirty
 
Регистрация: 08.08.2009
Сообщений: 4

Да, у вас анимация почетче работает ))). А как добавить активный элемент при загрузке странице по определенной ссылке? Будет ли работать такой код:
$("#menu > a"[<?php ставлю индекс в зависимости от url ?>])....


Добавил:
$('.<?php ?> > a').animate({'width':'240px'});
$('.<?php ?> > a').parent('li').siblings('li').find('a').animate({'width':'45px'}).end().removeClass('active').end().addClass('active');

Последний раз редактировалось Wirty, 09.08.2009 в 14:59.
Ответить с цитированием
  #5 (permalink)  
Старый 09.08.2009, 15:04
Аспирант
Отправить личное сообщение для Urfin Посмотреть профиль Найти все сообщения от Urfin
 
Регистрация: 22.07.2009
Сообщений: 85

Нужно просто тегу <li> с ссылкой на текущую страницу добавлять класс active лучше средствами php конечно.
Ответить с цитированием
  #6 (permalink)  
Старый 09.08.2009, 15:06
Новичок на форуме
Отправить личное сообщение для Wirty Посмотреть профиль Найти все сообщения от Wirty
 
Регистрация: 08.08.2009
Сообщений: 4

Спасибо большое, разобрался.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Кодировка при использовании Ajax Nichloas AJAX и COMET 9 17.09.2009 15:06
Скрипт калькулятора (не могу добавить еще одно значение) Jee_Day Я не знаю javascript 2 22.05.2009 12:19
добавить элементы в ассоциативный массив noer Элементы интерфейса 7 14.05.2009 09:41
имея this как удалить элемент из тела html clgs Общие вопросы Javascript 1 13.05.2009 16:55
Как добавить метод ко всем элементам? zubr80 Events/DOM/Window 3 06.04.2009 04:46