Ir para conteúdo

POWERED BY:

Arquivado

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

jokita18

como fazer menu de dois níveis em jquery?

Por , em Desenvolvimento frontend

Recommended Posts

jokita18    0

jokita18
Postado

Olá, preciso de ajuda para fazer este menu.

Penso que o melhor é faze-lo utilizando um plugin jquery.

Comecei por utilizar este plugin mas não consegui colocar aquele imagem que separa o nível 1 do menu do nível 2.

Assim sendo estou pedindo as vossas sugestões sobre como fazer este menu.

Desde já agradecido

Jokita18

uKeS3.jpg

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marco Bruno    19

Marco Bruno
Postado

Boa tarde, jokita18.

 

Não tem necessidade de fazer o menu Drop-Dow com JavaScript. Segue abaixo um exemplo utilizando CSS:

 

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Exemplo de Menu Drop-Down</title>
<style type="text/css">
	* { margin: 0; padding: 0; border: none; list-style: none; }
	.menu a {
		text-decoration: none;
		color: #FFF;
		font: bold 14px/16px Arial, Helvetica, sans-serif;
	}
	.menu li {
		padding: 10px;
		background-color: red;
		float: left;
		position: relative;
		margin-right: 5px; 
	}
	.menu li:hover .submenu { display: block; }
	.submenu {
		display: none;
		position: absolute;
		left: 0; top: 37px;
	}
	.submenu li { float: none; }
</style>
</head>
<body>
<nav>
	<ul class="menu">
		<li><a href="#">Home</a></li>
		<li>
			<a href="#">Fotos</a>
			<ul class="submenu">
				<li><a href="#">Aniversário</a></li>
				<li><a href="#">Natal</a></li>
				<li><a href="#">Ano Novo</a></li>
			</ul>
		</li>
		<li><a href="#">Contato</a></li>
	</ul><!-- #menu -->
</nav>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

ricardo_mc    19

ricardo_mc
Postado

Esse código que você postou não está 100% horizontal. Repare que o submenu está vertical ainda.

 

Tente esse daqui que você verá como fazer ambos (menu e submenu) horizontais.

 

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Exemplo de Menu Drop-Down</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
list-style: none;
font-family: Verdana, Geneva, sans-serif;
}
.menu {
width: 100%;
}
li {
float: left;
}
a {
width: auto;
height: auto;
padding: 5px 10px;
background: #C90;
color: #FFF;
text-decoration: none;
font-weight: bold;
display: block;
border: 1px solid #C90;
}
a:hover {
background: #F60;
}
.menu > li:hover > a {
border: 1px solid #000;
}
.submenu {
display: none;
position: absolute;
width: 100%;
left: 0;
top: 27px;
}
.submenu li a {
background: #090;
border: 1px solid #090;
}
.submenu li a:hover {
background: #039;
}
.menu >li:hover .submenu {
display: block;
}
</style>
</head>
<body>
<nav>
 <ul class="menu">
   <li><a href="#">Home</a></li>
   <li> <a href="#">Fotos</a>
     <ul class="submenu">
       <li><a href="#">Aniversário</a></li>
       <li><a href="#">Natal</a></li>
       <li><a href="#">Ano Novo</a></li>
     </ul>
   </li>
   <li><a href="#">Contato</a></li>
 </ul>
</nav>
</body>
</html>

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