Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

leon16df

Menu Slider horizontal

Por , em Javascript

Recommended Posts

leon16df    0

leon16df
Postado

Olá! essa é minha primeira postagem aqui no fórum...

 

to com um problema para achar um menu do tipo slider horizontal....

 

fiz uma div de fundo que é uma barra ela ira ficar estática... ai por cima dela vem uma outra barra que é mais escura e tem que deslizar horizontalmente nesse barra anterior .. mas eu queria que ela seguisse o mouse....

então ficaria uma barra de fundo como se fosse um trilho por onde uma outra barra que vai por cima desliza seguindo o mouse quando o mouse estiver selecionando algo no menu...

 

alguem sabe como seria o código para fazer essa barra de cima seguir o mouse quando estiver selecionando uma das opções do menu?

 

 

ai vai o código

 


<div style="background-image:url(image/fund_bar1.png); margin-left:auto; margin-right:auto; width:681px; height:37px; 

-moz-border-radius-topright: 10px; 

-moz-border-radius-topleft: 10px; 

-moz-border-radius-bottomleft: 20px; 

-moz-border-radius-bottomright: 20px; 

-webkit-border-radius-right: 100px;

-webkit-border-radius-right: 100px;">



<!-- TEXTO DO MENU -->

<div style="width:136px; height:37px; font:Arial, Helvetica, sans-serif; font-weight:bold; font-size:14px; text-align:center; text-decoration:none; color:#a5c174; padding-top:10px; float:left;">SERVIÇOS</div>

<div style="width:136px; height:37px; font:Arial, Helvetica, sans-serif; font-weight:bold; font-size:14px; text-align:center; text-decoration:none; color:#a5c174; padding-top:10px; float:left;">PRODUTOS</div>

<div style="width:136px; height:37px; font:Arial, Helvetica, sans-serif; font-weight:bold; font-size:14px; text-align:center; text-decoration:none; color:#a5c174; padding-top:10px; float:left;">PARCEIROS</div>

<div style="width:136px; height:37px; font:Arial, Helvetica, sans-serif; font-weight:bold; font-size:14px; text-align:center; text-decoration:none; color:#a5c174; padding-top:10px; float:left;">A EMPRESA</div>

<div style="width:136px; height:37px; font:Arial, Helvetica, sans-serif; font-weight:bold; font-size:14px; text-align:center; text-decoration:none; color:#a5c174; padding-top:10px; float:left;">CONTATO</div>

<!-- TEXTO DO MENU -->



<!-- BARRA ESCURA DO MENU -->

<div style="background-image:url(image/fund_bar2.png); height:37px; width:142px;

-moz-border-radius-topright: 10px; 

-moz-border-radius-topleft: 10px; 

-moz-border-radius-bottomleft: 20px; 

-moz-border-radius-bottomright: 20px; 

-webkit-border-radius-right: 100px;

-webkit-border-radius-right: 100px; "></div>

<!-- BARRA ESCURA DO MENU -->



</div>

<!-- BARRA CLARA DO MENU -->

Compartilhar este post

Link para o post
Compartilhar em outros sites

leon16df    0

leon16df
Postado

Consegui o codigo... agora o problema é... não consigo fazer o texto ficar na frente de todas as divs...

 

 

 

<html>
<head>
<title></title>
</head>
<script>

function showAjuda(event,titulo,descricao){
  txtTitulo = document.all? document.all.titulo : document.getElementById("titulo");
  txtTitulo.innerHTML = titulo;
 
  txtDescricao = document.all? document.all.descricao : document.getElementById("descricao");
  txtDescricao.innerHTML = descricao;
 
  caixa = document.all? document.all.boxAjuda : document.getElementById("boxAjuda");
  caixa.style.visibility = "visible";
  <!--caixa.style.top = event.clientY + document.body.scrollTop + 0;-->
  caixa.style.left = event.clientX + document.body.scrollLeft + -250;
}

function hideAjuda(){
caixa = document.all? document.all.boxAjuda : document.getElementById("boxAjuda");
caixa.style.visibility = "none";
}

</script>

<body>
<div  style=" overflow:hidden;background-color:#808080; margin-left:auto; margin-right:auto; width:681px; height:37px; 
-moz-border-radius-topright: 10px; 
-moz-border-radius-topleft: 10px; 
-moz-border-radius-bottomleft: 20px; 
-moz-border-radius-bottomright: 20px; 
-webkit-border-radius-right: 100px;
-webkit-border-radius-right: 100px;"
onMouseMove="showAjuda(event,'','')" onMouseOut="hideAjuda()">



<div style="width:136px; height:37px; font:Arial, Helvetica, sans-serif; font-weight:bold; font-size:14px; text-align:center; text-decoration:none; color:#a5c174; padding-top:10px; float:left;">SERVIÇOS</div>
<div style="width:136px; height:37px; font:Arial, Helvetica, sans-serif; font-weight:bold; font-size:14px; text-align:center; text-decoration:none; color:#a5c174; padding-top:10px; float:left;">PRODUTOS</div>
<div style="width:136px; height:37px; font:Arial, Helvetica, sans-serif; font-weight:bold; font-size:14px; text-align:center; text-decoration:none; color:#a5c174; padding-top:10px; float:left;">PARCEIROS</div>
<div style="width:136px; height:37px; font:Arial, Helvetica, sans-serif; font-weight:bold; font-size:14px; text-align:center; text-decoration:none; color:#a5c174; padding-top:10px; float:left;">A EMPRESA</div>
<div style="width:136px; height:37px; font:Arial, Helvetica, sans-serif; font-weight:bold; font-size:14px; text-align:center; text-decoration:none; color:#a5c174; padding-top:10px; float:left;">CONTATO</div>
		<div id="boxAjuda" style="position:relative;visibility:none;left:0;top:0">
			
								
			
			
			<div style="opacity:0.5;/*filter: alpha(opacity=50);*/  transparency:50%;position:relative;background-color:#00BFFF; height:37px; width:142px;
				-moz-border-radius-topright: 10px; 
				-moz-border-radius-topleft: 10px; 
				-moz-border-radius-bottomleft: 20px; 
				-moz-border-radius-bottomright: 20px; 
				-webkit-border-radius-right: 100px;
				-webkit-border-radius-right: 100px; ">
				

  <span id="titulo"></span><br>
  <span id="descricao"></span>
</div>

</div>


</div>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito