[Resolvido] Menu de "abrir"

polloooo · Março 5, 2009

Opa pessoal...eu nao sei e tentei alguns nomes para procurar antes de vir aqui perguntar,mas nao achei oq eu tava kerendo.

Alguem sabe como se faz um menu de "abrir" tipo esse deste site: www.tesla.com.br

obrigado.

Aprendiz CSS · Março 5, 2009

<!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 content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"/>
		<title> Exemplo de Javascript Menu</title>
		<style type="text/css">
			* { 
				margin: 0; 
				padding: 0; 
				color: #000; 
			}
			
			ul li ul {
				margin-left: 50px;
			}
		</style>
		<script type="text/javascript">
			function showMenu(subMenu){
				var menu = document.getElementById(subMenu);
				if ( menu.style.display == "none" ) {
					menu.style.display = "block";
				} else {
					menu.style.display = "none";
				}
			}
		</script>

</head>
	<body>
		<div id="tudo">
			
			<div id="conteudo">
				
				<div id="menu">
					
					<ul>
						<li><a href="#" onclick="showMenu('subMenu1')">Menu 1</a>
							<ul id="subMenu1" style="display: none;">
								<li><a href="#">Sub Menu 1</a></li>
								<li><a href="#">Sub Menu 1</a></li>
								<li><a href="#">Sub Menu 1</a></li>
								<li><a href="#">Sub Menu 1</a></li>
							</ul>
						</li>
						<li><a href="#" onclick="showMenu('subMenu2')">Menu 2</a>
							<ul id="subMenu2" style="display: none;">
								<li><a href="#">Sub Menu 2</a></li>
							</ul>
						</li>
						<li><a href="#" onclick="showMenu('subMenu3')">Menu 3</a>
							<ul id="subMenu3" style="display: none;">
								<li><a href="#">Sub Menu 3</a></li>
								<li><a href="#">Sub Menu 3</a></li>
							</ul>
						</li>
						<li><a href="#" onclick="showMenu('subMenu4')">Menu 4</a>
							<ul id="subMenu4" style="display: none;">
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
							</ul>						
						</li>
					</ul>
					
				</div>
				
			</div>
			<div id="rodape">
				<span>
					Desenvolvido por: phPaulo Desenvolvimento de Sites e Sistemas
				</span>
			</div>
		</div>
	</body>
</html>

só não se acostume

polloooo · Março 5, 2009

Nossa...brigadão...vou tentar e qualquer duvida eu posto

pslucasps · Março 9, 2009

Ae, tem como fazer isso com PHP ao invés de JavaScript?

Aprendiz CSS · Março 9, 2009

pslucasps não é possível com php, pois trabalha com o evento do mouse e isso só em javascript....

se explicar melhor o que quer, talvez consigamos uma soluçãio para ti

abraço

polloooo · Março 9, 2009

Editado: tinha postado uma duvida,mas consegui resolver...to indo bem por enquanto !!!

:D

Aprendiz CSS · Março 9, 2009

ul#subMenu1 {
				border: 5px solid #F00;
			}

isso funcionou

edit---

a página já estava aberta!

por isso postei

Jim Joice · Abril 20, 2009

Hehe, estava atrás de um menu desse há algum tempo, muito obrigado!

Muricium · Abril 20, 2009

<!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 content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"/>
		<title> Exemplo de Javascript Menu</title>
		<style type="text/css">
			* { 
				margin: 0; 
				padding: 0; 
				color: #000; 
			}
			
			ul li ul {
				margin-left: 50px;
			}
		</style>
		<script type="text/javascript">
			function showMenu(subMenu){
				var menu = document.getElementById(subMenu);
				if ( menu.style.display == "none" ) {
					menu.style.display = "block";
				} else {
					menu.style.display = "none";
				}
			}
		</script>

</head>
	<body>
		<div id="tudo">
			
			<div id="conteudo">
				
				<div id="menu">
					
					<ul>
						<li><a href="#" onclick="showMenu('subMenu1')">Menu 1</a>
							<ul id="subMenu1" style="display: none;">
								<li><a href="#">Sub Menu 1</a></li>
								<li><a href="#">Sub Menu 1</a></li>
								<li><a href="#">Sub Menu 1</a></li>
								<li><a href="#">Sub Menu 1</a></li>
							</ul>
						</li>
						<li><a href="#" onclick="showMenu('subMenu2')">Menu 2</a>
							<ul id="subMenu2" style="display: none;">
								<li><a href="#">Sub Menu 2</a></li>
							</ul>
						</li>
						<li><a href="#" onclick="showMenu('subMenu3')">Menu 3</a>
							<ul id="subMenu3" style="display: none;">
								<li><a href="#">Sub Menu 3</a></li>
								<li><a href="#">Sub Menu 3</a></li>
							</ul>
						</li>
						<li><a href="#" onclick="showMenu('subMenu4')">Menu 4</a>
							<ul id="subMenu4" style="display: none;">
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
							</ul>						
						</li>
					</ul>
					
				</div>
				
			</div>
			<div id="rodape">
				<span>
					Desenvolvido por: phPaulo Desenvolvimento de Sites e Sistemas
				</span>
			</div>
		</div>
	</body>
</html>

só não se acostume

Ola, estou com um problema num menu bem parecido com este. O meu problema é:

preciso que quando o usuário clique no subMenu4 (por exemplo) apareça mais um nível de camada, seria uma camada dentro de outra camada é possível?

abs

Muricium · Abril 20, 2009

<!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 content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"/>
		<title> Exemplo de Javascript Menu</title>
		<style type="text/css">
			* { 
				margin: 0; 
				padding: 0; 
				color: #000; 
			}
			
			ul li ul {
				margin-left: 50px;
			}
		</style>
		<script type="text/javascript">
			function showMenu(subMenu){
				var menu = document.getElementById(subMenu);
				if ( menu.style.display == "none" ) {
					menu.style.display = "block";
				} else {
					menu.style.display = "none";
				}
			}
		</script>

</head>
	<body>
		<div id="tudo">
			
			<div id="conteudo">
				
				<div id="menu">
					
					<ul>
						<li><a href="#" onclick="showMenu('subMenu1')">Menu 1</a>
							<ul id="subMenu1" style="display: none;">
								<li><a href="#">Sub Menu 1</a></li>
								<li><a href="#">Sub Menu 1</a></li>
								<li><a href="#">Sub Menu 1</a></li>
								<li><a href="#">Sub Menu 1</a></li>
							</ul>
						</li>
						<li><a href="#" onclick="showMenu('subMenu2')">Menu 2</a>
							<ul id="subMenu2" style="display: none;">
								<li><a href="#">Sub Menu 2</a></li>
							</ul>
						</li>
						<li><a href="#" onclick="showMenu('subMenu3')">Menu 3</a>
							<ul id="subMenu3" style="display: none;">
								<li><a href="#">Sub Menu 3</a></li>
								<li><a href="#">Sub Menu 3</a></li>
							</ul>
						</li>
						<li><a href="#" onclick="showMenu('subMenu4')">Menu 4</a>
							<ul id="subMenu4" style="display: none;">
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
								<li><a href="#">Sub Menu 4</a></li>
							</ul>						
						</li>
					</ul>
					
				</div>
				
			</div>
			<div id="rodape">
				<span>
					Desenvolvido por: phPaulo Desenvolvimento de Sites e Sistemas
				</span>
			</div>
		</div>
	</body>
</html>

só não se acostume

Ola, estou com um problema num menu bem parecido com este. O meu problema é:

preciso que quando o usuário clique no subMenu4 (por exemplo) apareça mais um nível de camada, seria uma camada dentro de outra camada é possível?

abs

Eitcha desculpa pessoal, consegui resolver valeu

Arquivado

[Resolvido] Menu de "abrir"

Recommended Posts

polloooo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

polloooo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

pslucasps 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

polloooo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jim Joice 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Muricium 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Muricium 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante