Nesse tutorial, vou ensinar com criar um menu drop down ou submenu como 3 níveis (podendo aumentar para mais níveis). Então vamos lá.
Primeira coisa é criar o html, e com isso iremos utilizar uma lista não ordenada, porque o menu nada mais é do que uma lista de links. Mas nesse caso, quando quero informar que queremos um nível depois, temos que colocar outra lista dentro no elemento, e assim sucessivamente. Parece complicado não? Mas não é tanto assim, vocês irão ver:
[php]
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Serviços</a>
<ul>
<li><a href="#">Web</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">Gráfico</a>
<ul>
<li><a href="#">Cartão</a></li>
<li><a href="#">Panfleto</a></li>
<li><a href="#">Banner</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Produtos</a></li>
<li><a href="#">Contato</a></li>
</ul>
[/php]
Repare que depois de fechar o link, incluo mais uma lista, e se quero fazer mais um nível nesse sub-menu, farei a mesma coisa, vou depois de fechar um link(< / a >), e antes de fechar a o item da lista (< / li >), e incluirei mais uma lista, e assim sucessivamente.
Depois de criar a nossa lista, vamos começar a brincadeira, que a sua estilização, criar um novo arquivo, e dê o nome de estilo.css, e link para sua página. Aconselho a criar uma pasta para colocar o arquivo css, dê o nome de css:
[html]
<link href="css/estilo.css" rel="stylesheet" type="text/css" />
[/html]
No css, é sempre interessante seguirmos uma certa ordem, em que comece com as declarações genéricas, e depois indo para as mais especificas. Comentar onde começa as seções também é uma boa prática. Então vamos começar com as configurações genéricas.
[css]
/*******************************
*CONFIGURAÇÕES GENÉRICAS
********************************/
*{margin:0; padding:0; }
ul{list-style-type:none}
a{text-decoration:none}
a:hover{text-decoration:underline}
[/css]
Agora vamos fazer umas configurações mais precisas, no caso definir largura, cor, bordar, e efeito :hover no link.
[css]
/*******************************
*CONFIGURAÇÕES MENU – Estilização
********************************/
#menu{
width:150px;/*define uma largura*/
}
#menu li{
position:relative;/*define a posição relativa,importante para limitar, porque usaremoso absolute*/
}
#menu li a{
display:block; /*define o elemento em bloco para ocupar 100% de largura do elemento pai*/
height:25px; /*Define uma altura*/
line-height:25px;/*Cenraliza na vertical */
color:#777; /*define a cor da fonte*/
border-bottom:1px solid #ccc; /*define uma bordar no bottom*/
background:#f5f5f5;/*define a cor do fundo*/
#menu li a:hover{
background:#e5e5e5;/*define a cor do fundo*/
color:#333;/*define a cor da fonte*/
}
[/css]
Uma ressalva importante, no #menu li, repare que coloquei um position:relative, isso porque iremos usar um position:absolute, e o absolute ele calcula a posição de acordo com body, se não existe outro elemento declarado como relative, absolute, fixed, caso tenha declarado, ele vai se posicionar de acordo com esses elementos com essas declarações, dando um limite para sua posição.
Agora vamos começar o efeito, o que queremos? Que as sub-listas não apareçam por padrão e ao passar o mouse na lista, ele apareça.
[css]
#menu li ul{
display:none;/*define para não aparecer a ul*/
position:absolute; /*define uma posição absolute*/
width:150px;/*define uma largura*/
top:0; /*colocamos top com 0*/
left:149px; /*afastamos para esquerda 149px, 1px a menos do que largura da ul*/
}
[/css]
Desaparecemos a sub-listas, posicionamos ela para o lado esquerdo para aparecer quando utilizarmos a pseudo-classe :hover na li. Então vamos fazer isso:
[css]
#menu li:hover ul{
display:block;
}
[/css]
Funcionou (se você não estiver usando o IE6, não quero nem imaginar porque raios você estaria usar essa coisa), mas não como imaginávamos. Ele aparece todos os itens, e não é isso que queremos. Como faremos pare resolver isso? Chorar? Chamar a sua mãe? Xingar qualquer pessoa que se aproximar? Claro que não, vamos declarar ao passar o mouse na li, que o sub-sub-item não apareça.
[css]
#menu li:hover ul ul{display:none}
[/css]
O que fizemos foi dizer que passar o mouse na li, não apareça a lista que está no sub-menu. Agora para aparecer basta dizer que ao passar o mouse na li que está dentro do sub-meu aparecer todo o item.
[css]
#menu ul li:hover ul{display:block;}
[/css]
Agora funcionou! E o IE6? Claro não iria funcionar, já que essa praga do IE6 não aceita a pseudo-classe hover sem ser nos links. Existem várias soluções para isso, na maioria dos casos usando javascript. Em uma vídeo aula sobre dropdown ,ensino com resolver. Mas vou propor outra solução usando jquery.
[javascript]
$(document).ready(function(){
$("#menu li").hover(function(){
$(this).find(‘ul:first’).css(‘display’, ‘block’);
}, function(){
$(this).find(‘ul:first’).css(‘display’, ‘none’);
});
});
[/javascript]
O script é simples, apenas indica pegar a primeiro item da ul q está dentro da li, e ao sair o mouse da li, volta a ser display none.
Mas se você reparar também dará outro problema no IE6(nem sei por que estou ensinando a consertar nesse negócio), fica um espaço ao passar o mouse, para isso basta colocar um hack na li, e coloco float:left
[css]
#menu li{_float:left}
[/css]
Agora está funcionando tudo certinho, vamos ver como ficou tudo:
HTML
[html]
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<link href="css/estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Serviços</a>
<ul>
<li><a href="#">Web</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">Gráfico</a>
<ul>
<li><a href="#">Cartão</a></li>
<li><a href="#">Panfleto</a></li>
<li><a href="#">Banner</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Produtos</a></li>
<li><a href="#">Contato</a></li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
$("#menu li").hover(function(){
$(this).find(‘ul:first’).css(‘display’, ‘block’);
}, function(){
$(this).find(‘ul:first’).css(‘display’, ‘none’);
});
});
</script>
</body>
</html>
[/html]
Estilo.css
[css]
*{
margin:0;
padding:0;
}
ul{list-style-type:none}
a{text-decoration:none}
a:hover{text-decoration:underline}
#menu{width:150px}
#menu li{position:relative; _float:left}
#menu li a{
display:block;
height:25px;
line-height:25px;
color:#777;
border-bottom:1px solid #ccc;
background:#f5f5f5;
}
#menu li a:hover{
background:#e5e5e5;
color:#333;
}
#menu li ul, #menu li:hover ul ul{
display:none;
position:absolute;
width:150px;
top:0;
left:149px;
}
#menu li:hover ul,
#menu ul li:hover ul{
display:block;
}
[/css]
Aqui está o link para download. Até a próxima!
Show de bola 🙂
e ai David, cadê o portfólio? 🙂 to loco pra ver seus projetos, só conheço dois que eu vi no whohub uma vez! põe ai pra agente ver ou me passa uns links.
PS: sem querer ser chato 🙂
Bz Lucas, a maioria dos meus projetos são em backend, não tem nem como mostrar. Mas tendo algum tempo eu publico alguns site q fiz.
Então blz David 🙂
Ficou legal, você explica muito bem.
Fiz o mesmo efeito só que com Slide porque esse efeito pode ser feito apenas com css.
Com css:
ul.menu li:hover>ul{
display: block;
})
Com javascript, efeito slide:
$(“ul.menu li”).hover(function(){
$(this).find(“ul:first”).slideDown();
}, function(){
$(this).find(“ul”).slideUp();
});
Vlw Wily. abrs
perfeito velho,
vlw mesmo, me bati um monte pra tentar fazer isso
hahaha,
vlws
Junior, q bom q pode te ajudar. abrs
Vlw esse foi o unico menu que não apresento um bug no IE 9 todos os outros que tentei deram errado vlw mesmo.
Legal @Joel , q bom q o tutorial pode te ajudar. abrs
Muito bom cara, bem explicado! Era o que eu precisava. Parabéns!
Mas, só uma dúvida, caso eu queira adicionar um submenu em Panfleto
Cartão
Panfleto
Opcao A
Opcao B
Banner
Como ficaria o css para que ao passar o mouse na palavra Panfleto aparecer essas outras opções? Desde já muito obrigado!
Rogerio, vai seguir a mesma logica, algo mais ou menos assim:
[css][/css]
#menu ul li:hover ul ul{display:none}
#menu ul ul li:hover ul{display:block;}
[css][/css]
É compativel com o blogger?
Não tenho quase nenhuma noção sobre isso.. porém
futuco algumas coisas no HTML que consigo editar xD.
Quero por esse codigo no meu HTML do blogger, onde colocaria?
@Ricky, não mexo blogger, realmente não sei te informar aonde adicionar.
Esse download eu coloco em alguma lugar?
wélder, esse download são os arquivos do tutorial
Nossa era exatamente o que eu precisava. Obrigada por esse tutorial incrível (e que funciona!), continue assim.
Obrigado Maria Angélica, fico feliz q tenha te ajudado o tutorial.
Cara, estou com um problema, o meu submenu está “cortando” a frase do
Tipo dará duas linhas porém o meu está cortando a segunda linha, o que faço?
Tente aumentar o width do #menu li ul
Gostei muito.. gostaria de saber como fazer para que somente aparecesse o Home.. ai depois que passe o mouse no Home ai ele mostrasse os outros >Serviços >Produtos >Contatos tem como ?
David, parabéns pelo post, estava criando menu acordion e com esse tutorial consegui implementar do meu modo. Valeu!!!!!
Se eu quiser colar o código num blogger como faço?