Ir para conteúdo

POWERED BY:

Arquivado

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

Meh

[Resolvido] Menu!

Por , em Desenvolvimento frontend

Recommended Posts

Aprendiz CSS    3

Aprendiz CSS
Postado

a estrutura dele é assim

 

<ul>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
</ul>

ul li a { 
    display: block; 
    color: #F0F;
    background: transparent url(imagem_de_fundo.jpg) no-repeat;
}

ul li a:hover {
   color: #F00;
}

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Meh    0

Meh
Postado

AAh, é em JQuery :/

Não sei nada sobre isso.. eu coloco o código do JQuery no HTML, em baixo de <body> ?

E tem classes no css nesse menu ?

Grata.

 

Ah, e poderiam me indicar algum tutorial ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

AAh, é em JQuery :/

só mais uma pergunta, eu coloco o código do JQuery no HTML, em baixo de <body> ?

Grata.

 

Adiciona os scripts dentro da seção head utilizando

 

$(document).ready(function(){
    // aqui entra o codigo do menu
});

aprendiz tu pode me ajudar a fazer um menu tipo o da pagina inicial do ig aquele do topo????

 

 

Abçs

 

 

Pega aquela estrutura inicial que postei adiciona um width para a tag A e coloca um float: left

 

se não conseguir, posta ai o seu código do menu

Compartilhar este post

Link para o post
Compartilhar em outros sites

Meh    0

Meh
Postado

hm, eu teria que colocar antes alguma tag do tipo 

<head>
<script language="JavaScript">
CÓDIGO 
</script>
</head>
?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno Conte    4

Bruno Conte
Postado

 

AAh, é em JQuery :/

só mais uma pergunta, eu coloco o código do JQuery no HTML, em baixo de <body> ?

Grata.

 

Adiciona os scripts dentro da seção head utilizando

 

$(document).ready(function(){
    // aqui entra o codigo do menu
});
 
 


aprendiz tu pode me ajudar a fazer um menu tipo o da pagina inicial do ig aquele do topo????


 


 


Abçs


 


 
Pega aquela estrutura inicial que postei adiciona um width para a tag A e coloca um float: left
 
se não conseguir, posta ai o seu código do menu
 
mais para ficar na horizontal????




			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					






					
				
					
					
					







	

	

		

			
Aprendiz CSS
			  

	
		
	
			 3
	
		
	

		

		

			


	
		Aprendiz CSS
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			



hm, eu teria que colocar antes alguma tag do tipo 




<head>
<script language="JavaScript">
CÓDIGO 
</script>
</head>
 ?
 




isso mesmo


 


 




Meh,


 


se for pra fazer assim, igual o do site, um JavaScript, alternando entre display: block e display: none.


 


http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif


 


Assim dá também Thiago, o desenvolvedor teria mais trabalho, pois teria que esconder todos os menus e exibir apenas o clicado, usando o plugin, fica muito mais fácil

			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
Meh
			  

	
		
	
			 0
	
		
	

		

		

			


	
		Meh
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

Ah.. JQuery não é minha praia.. mas vou tentar! qualquer coisa, tento outras táticas.. espero que dê certo :)



Vocês podem me recomendar um tutorial ? Preferencialmente em português, pq não manjo inglês, e os tradutores muito menos :x



Grata.



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
Thiago Retondar
			  

	
		
	
			 18
	
		
	

		

		

			


	
		Thiago Retondar
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			





 


Meh,


 


se for pra fazer assim, igual o do site, um JavaScript, alternando entre display: block e display: none.


 


http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif


 


Assim dá também Thiago, o desenvolvedor teria mais trabalho, pois teria que esconder todos os menus e exibir apenas o clicado, usando o plugin, fica muito mais fácil
 


Sim. Mas as vezes acho que a pessoa entra no comodismo e se limita a aprender, entende?
 


http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
Meh
			  

	
		
	
			 0
	
		
	

		

		

			


	
		Meh
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			



Thiago Retondar, em 12 fevereiro 2010 - 15:10 , disse:


Meh,


 


se for pra fazer assim, igual o do site, um Javascript, alternando entre display: block e display: none.


 


http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif




Não entendi o que você quis dizer..



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					






					
				
					
					
					






					
				
					
					
					






					
				
					
					
					







	

	

		

			
Aprendiz CSS
			  

	
		
	
			 3
	
		
	

		

		

			


	
		Aprendiz CSS
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

No link que mandei tem um exemplo usando o jQuery


 



basta copiar e colar



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
Evandro Oliveira
			  

	
		
	
			 331
	
		
	

		

		

			


	
		Evandro Oliveira
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

Assim dá também Thiago, o desenvolvedor teria mais trabalho, pois teria que esconder todos os menus e exibir apenas o clicado, usando o plugin, fica muito mais fácil


faço com 7 linhas:


html




<ul id="menu">
   <li><span>lanches</span>
       <ul>
           <li><a href="#">X-Salada</a></li>
           <li><a href="#">X-Egg</a></li>
           <li><a href="#">X-Burger</a></li>
           <li><a href="#">X-Tudo</a></li>
       </ul>
   </li>
   <li><span>pizzas</span>
       <ul>
           <li><a href="#">Mozarella</a></li>
           <li><a href="#">Calabresa</a></li>
           <li><a href="#">4-Queios</a></li>
           <li><a href="#">Portuguesa</a></li>
       </ul>
   </li>
   <li><span>massas</span>
       <ul>
           <li><a href="#">Spagetti</a></li>
           <li><a href="#">Gnocci</a></li>
           <li><a href="#">Lasagna</a></li>
       </ul>
   </li>
</ul>






 


css




* { margin: 0; padding: 0}
li { list-style: none; }
#menu ul { display: none }


js




window.onload = function(){
    spans = document.getElementById('menu').getElementsByTagName('span');
    submenus = document.getElementById('menu').getElementsByTagName('ul');
    for(i = 0; i < spans.lenght; i++) spans.item(i).onclick = function(){
        for(j = 0; j < submenus.lenght; j++) submenus.item(i).style.display = 'none';
        this.parentNode.getElementsByTagName('ul').item(0).style.display = 'block';
    }
}


economia de 50~60kb



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					






					
				
			
			



		

	


	
	
		

			

	
	

		

	

	

	







	

		
			
				Ir para a lista de tópicos
				Desenvolvimento frontend
			
		
	

	




	

	

	




						


	

		
	


					

					

	

		
        


	

		
    
			
				
					
					
  • 
				
					
					
  • 
				
					
					
  • 
				
			
		

	


		
            
			

	

		
		

			

				
			

		

	



		
	


					

				

			

			
		

		
		


	×
	

		

			

			

				
			


			
		

	



		

	































	
















		
			
		
		
		
		







	




	







	

		

			

				
Informação importante

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

			

			

				  Aceito