Salve Amigos do VAB, nesse vídeo aulas mostrarei a como criar um menu com submenu na horizontal. Essa aula será dividia em duas a partes: A primeira criaremos a estrutura com HTML e a estilização com CSS; na segunda parte utilizaremos o jQuery para aplicar um efeito para mostrar o submenu. Espero que gostem, e boa aula.
Nessa segunda vídeo-aula iremos aplicar o efeito com jQuery no submenu, utilizando slideDown e slideUp. e ainda deixado o item selecionado ao passar o mouse. Espero que gostem, e boa Aula.
Código:
index.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>Exemplo Menu</title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
</head>
<body>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Serviços</a>
<ul class="submenu">
<li><a href="#">Serv 1</a></li>
<li><a href="#">Serv 2</a></li>
<li><a href="#">Serv 2</a></li>
</ul>
</li>
<li><a href="#">Produtos</a>
<ul class="submenu">
<li><a href="#">Prod 1</a></li>
<li><a href="#">Prod 2</a></li>
<li><a href="#">Prod 2</a></li>
</ul>
</li>
<li><a href="#">Cliente</a></li>
<li><a href="#">Contato</a></li>
</ul>
</body>
</html>
[/html]
style.css
[css]
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
ul#menu{
width:500px;
margin:0 auto;
position:relative;
}
ul#menu li{
float:left;
}
ul#menu li a{
display:block;
float:left;
padding:0 15px;
height:25px;
line-height:25px;
text-decoration:none;
color:#333;
border:1px solid #ccc;
}
ul#menu li a:hover, ul#menu li a.ativo{
background:#ccc;
}
ul#menu li ul{
display:none;
position:absolute;
top:25px;
left:0;
width:460px;
background:#ccc;
}
/*
ul#menu li:hover ul{
display:block;
}
*/
[/css]
menu.js
[javascript]
$(function(){
$("#menu a").mouseover(function(){
var menu = $(this).parent().children(‘.submenu’);
var submenu = $(this).parent().parent();
if(menu.length > 0 && menu.is(‘:hidden’)){
$("#menu a").removeClass(‘ativo’);
$(this).addClass(‘ativo’);
$(‘.submenu’).slideUp();
menu.slideDown();
}
if(!submenu.hasClass(‘submenu’) && menu.length == 0){
$("#menu a").removeClass(‘ativo’);
$(this).addClass(‘ativo’);
$(‘.submenu’).slideUp();
}
});
});[/javascript]
DESSE GEITO QUE TU ENCINA MANO FICA MAS FACIO DE ENTENDER POW MUITO BOM MSM CARA =)
Vlw Thiago
Fala David bele?
seguinte, eu estou utilizando esse codigo num trabalho que fiz..
eu so queria tirar uma duvida… quando voce passa o mouse em um link que tenha um submenu, como faço para o submenu esconder quando voce tira o mouse?
é que no seu codigo o submenu se esconde apenas quando passa o mouse em outro link, e eu queria que ele escondece também quando o mouse ja nao estiver mais sobre ele…
Agradeço desde já
Luiz, fazer dessa maneira é mais facil, do da maneira q fiz, seria algo + ou – assim :
$(“#menu li”).hover(function(){
$(this).find(‘ul’).slideDown();
}, function(){
$(this).find(‘ul’).slideUp();
});
David tu é o cara man.. vo usar uma camisa com sua foto kkk
vlw man ‘-‘
Onde posso baixar o arquivo do jquery que esta linkado?
Só por causa disso não deu certo!
David também tive o problema para do Luiz mais não sei acrescentar esse código da sua resposta ao arquivo js. Me ajuda ae cara.
Valeu.
Daniel, vc só vai substitui, veja um exemplo:
http://jsfiddle.net/rgBfn/
David consegui resolver o problema, mas agora me surgiu uma dúvida. Queria que não ficasse marcado o link do meu qndo não estivesse com o mouse por cima. Aguardo. Abraço.
Daniel, basta não adicionar a classe ao link, com addClass.
show de bola! a aula… vlew
Como faz para centralizar todo o menu dentro do width de 500px que você escolheu, tentei algumas coisas mas nada parece funcionar.
obg pela video aula.
já solucionei meu problema, a resposta está em http://www.search-this.com/2007/09/19/when-is-a-float-not-a-float/
Cara…! VIREI TEU FÃ. Sensacional as tuas vídeo aulas. O que mais me impressiona e a facilidade com que você explica as coisas e a sua humildade. Deus te projeta (com toda sinseridade).
Vlw Marcio, q bom q as aulas pode te ajudar. abrs
teria como fazer drop up com este código?
o meu menu fica no rodape do site e tem que se abrir pra cima…
Vc pode tentar colocar o valor do top sendo negativo no submenu
Parabéns pelas vídeo aulas! Como faço para que o comportamento dos ítens do submenu sejam iguais ao do menu? Ou seja ao clicar em um ítem do submenu ele fique com efeito marcado e os demais ítens do submenu desmarcados? Obrigado!
A mesma forma, vc pode adicionar uma classe no link
Ok amigo entendi, muito obrigado pela ajuda!Abraço!
Parabéns pelas Videos aulas,
bastantes claras, me ajudou muito .
Show de bola seu material, quero tirar uma dúvida.
Se eu tiver um menu com submenu na vertical, com faço para que após eu selecionar um item seja no meu ou no submenu após ele carregar a nova página este menu e submenu fique aberto e selecionado o item que foi clicado?
Exemplo
Clico no SUBMENU” Meus dados” dentro do MENU Gerenciamento, fazer com que:
MENU: Gerenciamento fique com classe css marcada e o SUBMENU permaneça aberto
SUBMENU: Meus dados fique com a classe css marcada.
Obrigado pela ajuda.
David, tentei colocar isso no blogger (menu.js) mais é reportado esse problema:
Erro ao analisar XML, linha 736, coluna 27: The entity name must immediately follow the ‘&’ in the entity reference.
referente as linhas:
if(menu.length > 0 && menu.is(‘:hidden’)){
e
if(!submenu.hasClass(‘submenu’) && menu.length == 0){
como resolver esse problema, agradeço desde já pela ajuda.
Swellington, na hora de colocar o código, utilize o CDATA, assim:
[javascript]
<![CDATA[
$(function(){
$("#menu a").mouseover(function(){
var menu = $(this).parent().children(‘.submenu’);
var submenu = $(this).parent().parent();
if(menu.length > 0 && menu.is(‘:hidden’)){
$("#menu a").removeClass(‘ativo’);
$(this).addClass(‘ativo’);
$(‘.submenu’).slideUp();
menu.slideDown();
}
if(!submenu.hasClass(‘submenu’) && menu.length == 0){
$("#menu a").removeClass(‘ativo’);
$(this).addClass(‘ativo’);
$(‘.submenu’).slideUp();
}
});
});
]]>
[/javascript]
David muito obrigada me ajudou bastante!
David… boa noite…
Vi que este exemplo e eu queria fazer algo assim de le ficar aberto e com a escolha no submenu com o texto em outra cor….
eu ja tenho isso feito, mas sem o JS entao qdo tira o mouse ele recolhe o submenu…
tentei de diversas formas adaptar o seu JS ao meu menu… mas nao consegui…se que voce poderia dar uma olhada ou orientar o que devo fazer… nao conheço nada de JS..
desde já agradeço…
Ronaldo, não entendi muito bem. No caso vc quer ao passar o mouse, o menu fique aberto, e não feche ?
David boa noite…
tenho um menu com sub menu de forma classica onde qdo tira o mouse ele recolhe o submenu..
hoje quando passo o mouse ele abre o submenu e descendo ao submenu ele muda a cor do texto do item escolhido…
gostei muito do seu exemplo e queria aplicar no meu programa de deixar o sub menu aberto e com o texto do item escolhido em outra cor…
Ja tentei diversas modificações tanto no css como no js mas nao consegui..nao tenho muita experiencia..e nada de js…
voce poderia me ajudar..me orientar posso enviar o codigo tambem… pra vc com certeza é um menu bem simples…
te agradeço muito…
Ronaldo, se vc quiser manter ele aberto, vc pode trabalhar com uma classe, ao passar o mouse, e add uma classe no submenu, assim ele ficaria sempre aberta, exemplo:
http://jsfiddle.net/vgwq3634/
Gostei das duas aulas, tem curso para completar meu aprendizado? Qual o valor e material didático.
Boa noite Vidal, não tenho curso. Mas vc pode adquirir alguns cursos no http://www.mxcursos.com