Ir para conteúdo

POWERED BY:

Arquivado

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

holick.

[Resolvido] Efeito no menu...

Por , em Javascript

Recommended Posts

holick.    0

holick.
Postado

Olá, nao sei se estou na area certa, mais para mim e Javascript ou DHTML...

Bem queria fazer isso:

Imagem Postada

 

Passo o mouse no menu, ele aparece em baixo, ja vi muitos sites com esse negocio, mais nao tenho a minima idea de como posso fase-lo.

 

 

obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

fetish    3

fetish
Postado

CSS + Html :)

 

menu.css:

@charset "utf-8";

#menu {
	padding: 0px;
	list-style: none;
}

#menu .link {
	text-align: center;
	width: 100px;
	list-style: none;
	float: left;
}

#menu .link ul {
	display: none;
	padding: 0px;
}

#menu .link:hover ul {
	display: block;
	padding: 0px;
}

#menu .link ul li {
	padding: 10px;
	list-style: none;
}
Pagina.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="menu.css" rel="stylesheet" type="text/css" />
<title>DropDown Menu</title>
</head>
<body>
<ul id="menu">
		<li class="link">
			<a href="#">Link 1</a>
			<ul>
				<li><a href="#">Link 1.1</a></li>
				<li><a href="#">Link 1.2</a></li>
				<li><a href="#">Link 1.3</a></li>
			</ul>
		</li>
		<li class="link">
			<a href="#">Link 2</a>
			<ul>
				<li><a href="#">Link 2.1</a></li>
				<li><a href="#">Link 2.2</a></li>
				<li><a href="#">Link 2.3</a></li>
			</ul>
		</li>
	</ul>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

fetish    3

fetish
Postado

Também existem outras maneiras de fazer esse menu drop down, mas essa é a mais simples na minha opnião.

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