Olá pessoal desculpem a demora surgiu um grande problema para eu resolver, tenho que refazer todo o sistema administrativo dos meus clientes, por isso a falta de tempo.
Mas vamos lá hoje vou mostrar como é fácil e rápido fazer um menu acordeon (sanfona) com jQuery. Para começar vamos para o HTML e CSS assim você poderá controlar melhor o estilo, o estilo aqui em questão bem como o HTML são ilustrativos fique a vontade para modificar ou fazer da sua melhor forma.
Para o HTL (explico mais abaixo o porque desta estrutura)
<ul id="menuGeral"> <li><a href="#" class="itemMenu">Gerenciar Notícias</a> <div class="conteudoMenu"> <a href="#">Adicionar nova Notícia</a> <a href="#">Pesquisar Notícias</a> </div> </li> <li><a href="#" class="itemMenu">Gerenciar Eventos</a> <div class="conteudoMenu"> <a href="#">Adicionar novo Evento</a> <a href="#">Pesquisar Eventos</a> </div> </li> <li><a href="#" class="itemMenu">Gerenciar Meus dados</a></li> </ul>
E para o CSS:
ul#menuGeral{ margin:0px; padding:0px; font-family:Verdana,Arial,Helvetica,sans-serif; font-size:11px; list-style:none; } ul#menuGeral li{ } /*-Para todos os atributos 'a', aqui será a marcação da sanfona-*/ ul#menuGeral a{ display:block; padding:3px; cursor:pointer; color:#000; text-decoration:none; } /*-Para todos os atributos 'a' dentro de uma 'li'-*/ ul#menuGeral li a{ padding-left: 20px; background-color:#DDE0EF; border:1px solid #D4D4D4; margin-bottom:1px; } ul#menuGeral li a:hover{ background-color:#B7BDDD; } /*-O conteudo que fica debaixo da opção da sanfona-*/ ul#menuGeral .conteudoMenu{ border-left:1px solid #D4D4D4; border-right:1px solid #D4D4D4; padding:5px; background-color:#F7F7F7; } ul#menuGeral .conteudoMenu a{ background-color:#F7F7F7; padding-left:25px; margin-bottom:0px; border:0px; } ul#menuGeral .conteudoMenu a:hover{ background-color:#DADADA; }
Ok veja agora como ficou seu menu, bunito né? Lembre-se mude o quanto quiser o importante vem agora, veja que mamão com açúcar, importe seu jQuery, caso não tenha baixe-o aqui.
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
Em logo abaixo coloque o seguinte código, irei explicar:
<script type="text/javascript"> $(document).ready(function(){ $(".conteudoMenu").hide(); $(".itemMenu").click(function(){ $(".conteudoMenu").slideUp("slow"); $(this).next(".conteudoMenu").slideDown("slow"); }); }); </script>
Com este código você ve que o menu que clica em azul abre e se houver outro aberto ele fecha, para deixar somente o menu aberto e ao clicar no mesmo ele feche use isso:
<script type="text/javascript"> $(document).ready(function(){ $(".conteudoMenu").hide(); $(".itemMenu").click(function(){ $(this).next(".conteudoMenu").slideToggle(300); }); }); </script>
Note que removi uma linha e mudei outra, vamos a explicação do jQuery, “confiram comigo no replay“.
Depois de ler o documento eu escondo todos os conteúdos, para garantir que o menu ficará fechado, “mas Tio se eu quiser que apenas o primeiro fique aberto como faço?”, simples mude a primeira instrução para:
$(".conteudoMenu:not(:first)").hide();
Nem precisa comentar né: Se não for o primeiro…
Seguindo a instrução que digo que ao clicar no seletor de classe “itemMenu” no primeiro ele diz que sobe todos os seletores com classe “conteudoMenu” e em seguida abaixo o próximo seletor deste mesmo que eu cliquei (exibindo o conteúdo), para a segunda alternativa depois de clicar usa a propriedade “slideToggle” que retorna uma ação anterior, que no caso é escorregar.
Para um bom funcionamento deste efeito sempre tenha em mente que ao clicar em algo, um seletor abaixo dele abrirá e assimpor diante, por isso a estrutura de HTML que mencionei acima, mas pode mudar como por exemplo:
<h4 class="itemMenu">Gerenciar Notícias</h4> <cite class="conteudoMenu"> Lorem ipsum dollor<br /> Set huni... </cite> <h4 class=""itemMenu">Outro Item sem nada</h4>
Simples, fácil né? Dúvidas postem ai.
É isso ai até mais pessoal!
Tweet |
gostaria de saber como faço para fazer o meu menu sanfona ficar igual o seu (ficar todos os três menus fechados por padrão) o resto permanece da mesma forma que esta, o meu código ele está pra ficar o primeiro aberto por padrão, tentei fazer igual vc fez ai, mas meu código está diferente do seu, desde já obrigado pela ajuda!
Olá,
Muito obrigado, seu blog salvou meu site!!!
a unica duvida que eu tenho é:
é possivel fechar o item aberto, pois quando eu tento fechar ele fecha e abre de novo, eu entendi o porque, porém, nao manjo nada de jquery, to aprendendo agora, e nao consegui arrumar.
Parabéns pelo blog!! Vou virar visitante diário!!
Muito obrigada pela sua disposição desse tutorial!! eu estava mesmo precisando ;D
Adriano help!! Só estou tendo um probleminha
Toda vez que eu clico no menu independente do botão
ele volta ao topo da imagem, ou seja, toda vez que clico ele vai la pra cima, mesmo sendo o sei la 18º que eu abri. Espero que entenda o que estou querendo dizer 🙁
Obrigada mais uma vez!
Eu de novo encomodando auisheuahse
queria q ao abrir um o outra aba fechasse para não ter como deixar todos abertos só aquele que você selecionou hihi
duas duvidas, não sei muito disso sabe 😀
Nada que esses tutoriais não salvem minha vida
Sucesso!
http://www.dynamicdrive.com/dynamicindex1/switchmenu.htm
nesse aqui eu fiz uns testes e não teve nenhuma das duas coisas que eu comentei, só que ele só utilizou o javascript e é bem diferente (e claro que o seu é mais bonito ^^)
Acho que agora da de entender hihihi
Obrigada desde já
Ta muito muito muito obrigada
sei como é ruim final de ano idependente do que :/
eu já estou de férias!!
Agora a ultima duvidazinha
Sou chata ne uasehiahse
Queria então que quando eu clicasse de voltano que esta aberto ele fechasse so q quando eu clico ele feche e abre de novo
Sou leiga em java e etc hihi
Obrigada desde jáá por tudo 😀
se não der deixa ta bom assim aiusheiuahe
é que eu sou chatinha mesmo 🙁
Ahmm eu botaria isso antes ou depois do q?
já tentei várias formas hihihi
Por enquanto ta assim:
$(document).ready(function(){
$(“.conteudoMenu”).hide();
$(“.itemMenu”).click(function(){
$(“.conteudoMenu”).slideUp(300); $(this).next(“.conteudoMenu”).slideToggle(300);
});
})
Obrigada por tudo!
Rapaz!
Vlw.
Tava querendo fazer um texto expansivel e com a sua ajuda ficou blzinha.
Vlw
OOii lembra de mim?
Enfim tava tentando achar na net uma galeria lightbox até q me agradei por essa: http://www.huddletogether.com/projects/lightbox2/#overview
só que quando eu tento botar a galeria o menu não funciona ou vice-versa dependendo da posição dos script :/
queria saber como faço para retirar esse conflito
Do jeito abaixo mostra como está com o menu funcionando e a galeria não (isso vai depende se é organizado em cima ou embaixo do script que chama o jquery 1.4.1)
————
$(document).ready(function(){
$(“.conteudoMenu”).hide();
$(“.itemMenu”).click(function(){
$(“.conteudoMenu”).slideUp(300);
$(this).next(“.conteudoMenu”).slideToggle(300);
});
})
———–
se eu botar aquilo ali entre os
pra baixo do proximo script a gaeria funciona e o menu não :/
ops não apareceu
$(document).ready(function(){
$(“.conteudoMenu”).hide();
$(“.itemMenu”).click(function(){
$(“.conteudoMenu”).slideUp(300);
$(this).next(“.conteudoMenu”).slideToggle(300);
});
})
vamos ver se agora aparece
ixii como posso te mandar isso?
Enfim ja resolvi botei um negocio de noconflit e mudei uns $ para jquery
ai ja funcionou
parabéns pelo seu blog me ajudou muito o menu ^^ quando o site estiver pronto eu volto aqui para você ver 😀
Podia fazer um de paginação, eu vi em vários lugares esse http://tympanus.net/jPaginate/
só que ninguém explica muito bem :/
eu vou continuar procurando mas segue um post pra fazer 😀
Oi Adriano,
Como eu faria para colocar imagens no menu sanfona. Vou te explicar melhor…quando todos os item estiverem fechados apareceria na frente de cada um um “+” e quando clicar ele fica “-” porém recolhendo o item que foi anteriormente aberto e deixando ele com o “+” novamente…deu pra entender?
Obrigada,
Estou lhe escrevendo so para agradecer, estou desenvolvendo um site com accordion e ao clicar para abrir, ia para o topo da página, e graças a uma das suas dicas consegui resolver o problema, valeu.
Parabéns pelo material, Adriano como eu faço para no momento que evento de clicar no menu e tiro cursor do local a cor selecionada permanece. Vejo que isso não acontece nos seus exemplos. Muito obrigado
Adriano obrigado pela resposta, é o seguinte, to criando um menu horizontal, na qual toda sua formatação foi feita em CSS, porém o problema que no mozila quando clico em um dos itens do menu a cor permanece quando tiro o cursor, porem no chrome e no IE não funciona. Em baixo ta parte do código CSS. Se pude me ajuda fico muito feliz
CSS
@charset “UTF-8”;
*{margin: 0; padding: 0; list-style-type: none;}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #33C;
color: #FFF;
}
Rapaz o CSS funciona perfeitamente e6, ie7, ie8 e FireFox. Porém no chrome o Pseudo-classes “active” nao funciona. Veja o codigo:
ul.MenuBarHorizontal a:visited
{
background-color: #FF00FF;
color: #FFF;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover
{
display: block;
padding: 5px;
margin-bottom: 1px;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #33C;
color: #FFF;
text-decoration: none;
}
ul.MenuBarHorizontal a:active, ul.MenuBarHorizontal a:focus
{
background-color: #FF00FF;
color: #FFF;
}
Boa noite Adriano Meira e parabéns pelo Blog, como minha primeira participação aqui não poderia deixar de agradecer suas explicações, que complementam em muito o curso básico de Web que fiz… Sou Desenhista e ainda “engatinho” nesta questão de programação…
Eu estou bastante perdido em JQuery e Javascript e estava precisando de uma ajuda sua pois uso um menu mais ou menos parecido com o seu exemplo mas não consigo manter o seu estado “ABERTO” quando ocorre uma atualização de página após clicar em um “SUB-ITEM”, e eu gostaria muito de implantar isso para facilitar a navegação aos visitantes… para que eles não tenham que abrir novamente o menu para pesquisar os “CONTEÚDOS”
Será que você poderia me ajudar?
Desde já agradeço a atenção, abraços!
Olá Adriano!!! Cara, muito obrigado pela resposta e me desculpe pela demora no retorno… (quase 1 mês depois!!!) mas é tanto trabalho que a gente quase pira!!!! rsrsrsrs.
E no meio de tanta correria eu fui pesquisar o link que vc me mandou e estudei pra caramba cara, mas não consegui fazer funcionar no meu menu, eu até entendi bem como usa-lo no caso “usuario_logado” mas não consegui encaixa-lo no modelo de menu… Acho que vou ter que esperar você dar um exemplo por aqui mesmo…rsrsrsrs… Mas de qualquer forma eu agradeço de inicio sua ajuda e esperarei caso tenha um tempo de publicar algo em seu blog… se quiser posso até te passar o código pra vc postar aqui que a principio é bem simples, mas o problema é salvar suas caracteristicas (aberto ou fechado) quando um página é atualizada, sem ter a necessidade de usar “frames” e na verdade o meu maior medo é que esta seja a única maneira de fazer isso… mas é isso aí… eu aguardo um retorno seu, e se precisar algo estamos ás ordens também… Abraços
boa tarde caro, minha dúvida é a seguinte, criei um accordion com 4 abas, mas quero que apareça a segunda em vez da primeira, tentei usar o incremento, (first++), em princípio funcionou, mas depois que coloquei uma query pra uma lightboz ele começou a conflitar, só funciona bem se for a first ou a last, se eu coloco como coloquei antes, ele aparece todas as abas abertas…
Olá Adriano
tem como colocar um modulo accordeon em um artigo?
tentei {module [35]}
usando o id do modulo mais não funcionou
o plugin: Load module esta ativo claro
Me ajude
Lena
Ola Adriano, parabéns, é o unico blog organizado que conheço kkkkkk
Queria uma ajuda que provavelmente seja rápido para você, mais que vem me atormentando a dias, usando este código queria saber se tem a possibilidade de manter o MENU aberto após o Clique.
EXEMPLO:
FRUTA
– Maça
– Pera
– Limão
COR
– Preto
– Branco
– Azul
COMO ESTÁ: Ao clicar em “Maça” a página atualiza e os menus fecham novamente por padrão do código.
COMO GOSTARIA: Ao clicar em “Maça” a página atualiza e o menu “FRUTA” permanece aberto
Obrigado
Olá Adriano. Parabéns pelo post. Tenho uma div accordion com um form. toda vez que clico no form a div fecha. Pode me ajudar? Segue o código.
$(document).ready(function(){
$(‘h5.accordion’).click(function(){
$(this).parent().find(‘div.accordion’).slideToggle(“slow”);
});
});
Comentários require(“../comentarios/acq.php”); Contar(1);
error_reporting(0);session_start(); $_SESSION[“pagi”]= $_SERVER[‘SCRIPT_NAME’]; require(“../comentarios/visualiza_comment.php”);
Boa noite Adriano,
Primeiramente obrigado pelo Post, o que eu estava demorando dias para fazer com Javascript puro fiz em poucas horas em Jquery graças ao seu tutorial. Aproveitei para dar uma olhada no Blog e já foi está nos favoritos hahaha parabéns amigo.
Tenho também uma dúvida e gostaria de saber se pode me ajudar ou guiar-me rsrs
Como disse, estou usando o Accordion do post para um Menu lateral estilo painel administrativo e ficou tudo perfeito, quando o usuário abre vários tópicos o Scroll aparece como natural. Quando ele rola um pouco o Scroll e aperta num novo tópico a tela é jogada totalmente para cima, e ele tem que descer novamente o Scroll para abrir um novo tópico, ou visualizar o que abriu.
Enfim, gostaria de evitar que ao apertar para abrir o conteúdo do tópico novo ele seja direcionado para o topo da página, preferia que ele apenas subisse um pouco mais devagar até a altura do tópico apertado.
Não sei se ficou claro o bastante meu problema rsrs.. Qualquer coisa tento explicar melhor rs
Aprender – nuunca e demais ainda mais com grande amigo MESTRE rs. Gostei de conhecer o seu BLOG e saber que posso aprender com você.
Parabéns