Efeito em menu

vini_loock · Agosto 8, 2011

Olá.

Estou desenvolvendo um menu, mas é preciso que ele funcione pelo menos no ie 7, mas como não sou um expert em javascript, estou com dificuldades para identificar os erros.

Atualmente funciona no GC, FF e Safari(os que eu teste), mas não funciona no IE 8 nem 7.

<html>
	<head>
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}

			#menu{
				position: absolute;
				left: 50%;
				top: 20px;
				margin-left: -400px;
				background: #F4F4F4;
			}

			ul{
				list-style: none;
				width: 800px;
				position: absolute;
				z-index: 999;
			}

			ul li{
				display: inline;
				padding: 5px 20px;
			}

			#hover{
				background: red;
				position: absolute;
				z-index: 888;
				padding: 5px 20px;
			}

			ul li a{}
		</style>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				var tempo = 15;
				var tempo_left = 60;
				var active_left = $('#menu ul li.active').offset().left;
				var active_width = $('#menu ul li.active').width();

				$('#hover').css({
					width : $('#menu ul li.active').width(),
					height : $('#menu ul li.active').height(),
					left : active_left-$('#menu ul').offset().left
				});

				$('#menu ul li').mouseover(function(){
					menu_item_width = $(this).width();
					menu_item_left = $(this).offset().left;
				});

				$('#menu ul li').mouseout(function(){
					menu_item_width = active_width;
					menu_item_left = active_left;
				});

				function echo(txt){
					$('#div').html($('#div').html()+'<p>'+txt+'</p>');
				}

				window.setInterval(function(){
					if($('#hover').width() >= menu_item_width){
						var qtd_width = ($('#hover').width()-menu_item_width)/tempo;
					}else{
						var qtd_width = (menu_item_width-$('#hover').width())/tempo;
					}

					if(menu_item_width >= (parseInt($('#hover').width())+parseInt(qtd_width))){
						$('#hover').width(parseInt($('#hover').width())+parseInt(qtd_width));
					}else if(menu_item_width <= $('#hover').width()-(qtd_width)){
						$('#hover').width($('#hover').width()-(qtd_width));
					}


					var b = menu_item_left-$('#menu ul').offset().left;
					var a = $('#hover').offset().left-$('#menu ul').offset().left;

					var t = tempo_left

					if(a >= b){
						var x = a-b;
					}else{
						var x = b-a;
						//alert(x);
					}


					var ps = x/t;

					if($('#hover').offset().left-ps-10 >= menu_item_left){
						$('#hover').css('left', $('#hover').offset().left-$('#menu ul').offset().left-ps-10);
					}else if($('#hover').offset().left+parseInt(ps)+parseInt(10) <= menu_item_left){
						$('#hover').css('left', $('#hover').offset().left-$('#menu ul').offset().left+parseInt(ps)+parseInt(10));
					}
				}, 1);
			});
		</script>
	</head>
	<body>
		<div id="menu">
			<div id="hover"></div>
			<ul>
				<li><a href="">MENU 1</a></li>
				<li class="active"><a href="">MEfdfdsfsdf sd sdfs dfaNU 2</a></li>
				<li><a href="">MEdddU 3</a></li>
				<li><a href="">MEfdsfsdfNU 4</a></li>
				<li><a href="">MENfasf sadfU 5</a></li>
			</ul>
		</div>
		<div id="div"></div>
	</body>
</html>

O efeito final será parecido com o do site VFXproduções

Entrar

Efeito em menu

Pergunta

vini_loock

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades