Blog do Adriano Meira - Uma ajudinha para desenvolvedores e web designers. Uma ajudinha para desenvolvedores e web designers.

Menu acordeon (sanfona) com jQuery

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!




Adriano Meira é o criador do blog, trabalha desde 2012 como Webdesigner e hoje formado em design gráfico trabalho para a Brasil na Web e como free-lancer nas áreas de Design para Web (Webdesigner), Design Gráfico, Impressos e criação de marcas.

Comente este artigo você também!

Comentários (46)

  • WALDO ELLER disse:

    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

  • Aldemar Ribeiro de Jesus disse:

    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!

  • André disse:

    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!!

  • Adriano Meira disse:

    Olá Aldemar eu removi seu código do post para preservar sua aplicação e não dar paginação no post ok? 😉 Também não consegui visualiza-lo direitinho pois o wordpress quebra o html ao subir pro banco, se desejar me avise que lhe envio um e-mail em off para ver melhor seu código, já vou ajustar isso no blog.


    $(document).ready(function(){ //Inicia o jQuery
    $(".conteudoMenu").hide(); //Esconde todos os menus
    $(".itemMenu").click(function(){ // Ao clicar em um menu
    $(this).next(".conteudoMenu").slideToggle(300); // abre ele e se clicar de novo fecha ele
    });
    })

    Veja o download do exemplo (pode pega-lo aqui) e veja como fiz lá.

    Até mais!

  • Adriano Meira disse:

    Olá André

    Cara são comentários assim que me deixam mais feliz e com vontade de tocar o blog. Bom sobre sua dúvida o que respondi logo ai em cima pro Aldemar resolve seu problema, mas se por ventura não consiga basta colocar no seu CSS que todas os elementos que ficam abaixo do menu tenham “display none” por exemplo como mencionei no post coloque assim no css:

    ul#menuGeral .conteudoMenu{
    display:none;
    }

    Assim todos os conteúdos ficaram escondidos, já para quando clicar fechar basta fazer assim:

    $(document).ready(function(){ //Inicia o jQuery
    $(".conteudoMenu").hide(); //Esconde todos os menus
    $(".itemMenu").click(function(){ // Ao clicar em um menu
    $(".conteudoMenu").slidUp(300) // fecha quaqluer um que esteja aberto
    $(this).next(".conteudoMenu").slideToggle(300); // abre ele e se clicar de novo fecha ele
    });

    Bom espero ter ajudado, aguarde me breve algumas técnicas de CSS pra ajudar a facilitar nossas vidas pessoal!

    })

  • Yumii disse:

    Muito obrigada pela sua disposição desse tutorial!! eu estava mesmo precisando ;D

  • Adriano Meira disse:

    Opa por nada Yumii, assim que eu entrar de férias da Facu tem muito mais, estou selecionando as melhores coisas que achei pela net e vou dispor aqui no blog. Fique ligado! =)

  • Yumii disse:

    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!

  • Yumii disse:

    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!

  • Yumii disse:

    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á

  • Adriano Meira disse:

    Olá Yumii, desculpe a demora fim de semestre é dose, muito trabalho e pouco tempo rss… mas aqui sobre o menu quando você clicava e ia lá para cima acredito que o erro estava no atributo href do link que devia ter uma ralha (#) a soluçaõ neste caso seria:
    a)Remover a tralha (#) e no CSS colocar que os seletores “a” tem o cursos:pointer, assim eles ficam com aquele “dedinho” de link.
    b)E a outra e no final da instrução do click no jQuery colocar a intrução de return false.

    Sobre o abrir um e esconder outro veja logo acima que explico como pode fazer basta substituir a função para $(this).next(".conteudoMenu").slideToggle(300);, o slideToggle faz com que ao clicar nele mesmo ele suba e desca e para que todos os outros fechema ntes dele coloque $(".conteudoMenu").slideUp("300");.

    De qualquer forma espero ter ajudado, jQuery é muito bom, você pode fazer muita “mágica’ sabendo um pouquinho!

    Até mais =)

  • Yumii disse:

    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 😀

  • Yumii disse:

    se não der deixa ta bom assim aiusheiuahe
    é que eu sou chatinha mesmo 🙁

  • Adriano Meira disse:

    Bom minha cara tem sim, uma solução é checarmos se algum menu esta aberto e mandar fecha-lo e na seguência abrir outro, por exemplo:

    if($(".conteudoMenu").attr("display") == "block"){
    $(".conteudoMenu").slidUp(300);
    $(this).slidDown(300);
    }else{
    $(this).slidDown(300);
    }

    Com isso simulamos uma função para duas ações de um único click.

  • Yumii disse:

    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!

  • Adriano Meira disse:

    Opa isso ai, depois do SlidUp. Assim quando clicar todos abertos irão fechar e este que você clicou abre, desculpe a demora…

  • Red disse:

    Rapaz!
    Vlw.
    Tava querendo fazer um texto expansivel e com a sua ajuda ficou blzinha.
    Vlw

  • Yumii disse:

    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 :/

  • Yumii disse:

    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

  • Yumii disse:

    ixii como posso te mandar isso?

  • Yumii disse:

    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 😀

  • Adriano Meira disse:

    Opa Lembro sim como vc está? Fico feliz mesmo assim em te ajudar e vai ai uma dica, o plugin que me enviou realmente dá um conflito danado com jQuery já está na minha lista publicar um tutorial de outro plugin muito banca, fácil de implementar e muito bonito que é em jQuery e não da conflito. Aguarde fique de olho.

  • Yumii disse:

    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 😀

  • Adriano Meira disse:

    Opa olá Yumii, desculpe a demora faculdade é dose né? Sobre o plugin muito bacana anotei aqui nos meus rascunhos para usa-la não me parece ser difícil, assim que rolar um tempinho posto algo sobre esta fantástica paginação.

  • Cristiane disse:

    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,

  • Adriano Meira disse:

    Olá Cristiane
    Entendi sim, para isso vamos usar a função click do “a” para colocar uma classe chamada “ativo” , como funcionará, primeiro vamos no css para criar uma classe e ajustar outra.
    Primeiro vamos colocar no estilo do “a” (onde se clica) uma imagem que não se repita a direita com o sinal negativo (-) assim:

    ul#menuGeral a{
    background-image:url(fechado.jpg);
    background-repeat:no-repeat;
    background-position: right center;
    }
    ul#menuGeral a.ativo{
    background-image:url(aberto.jpg);
    }

    Com isso pronto vamos na função e acrescente os dados abaixo dos comentátios


    $(document).ready(function(){
    $(".conteudoMenu").hide();
    $(".itemMenu").click(function(){
    //Primeiro resetamos todos os estilos ativos
    $('.itemMenu').removeClass('ativo');
    //Setamos neste elemento que clicou um novo estilo
    $(this).addClass('ativo');
    $(".conteudoMenu").slideUp("slow");
    $(this).next(".conteudoMenu").slideDown("slow");
    });
    });

    É isso ai me avise se deu certo ou não.

  • 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.

  • Adriano Meira disse:

    Olá Carlos

    Fico muito feliz que tenha lhe ajudado, qualquer dúvida fica ai o blog e eu (na medida do possível) a disposição.

  • Rodrigo Cesar disse:

    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 Meira disse:

    Olá Rodrigo, opa obrigado pelo contato. Bom para isso basta criar uma classe com a cor que deseja e ao clicar no “itemMenu” acrescentar esta classe, veja o exemplo abaixo:

    $(".itemMenu").click(function(){
    $(this).next(".conteudoMenu").slideToggle(300);

    //Remove todas as classes já criadas
    $('.itemMenu').removeClass('atual');

    //Acrescenta neste evento do click a classe da cor diferente
    $(this).addClass('atual');
    });

    Ai no CSS você cria a classe “.atual” e coloca a cor que quiser, ou o estilo como desejar.

    Até mais.

  • Rodrigo Cesar disse:

    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;
    }

  • Adriano Meira disse:

    Olá Rodrigo

    Cara existe uma parada no CSS que se chama pseudo classes, elas são os dois pontos (:) que colocamos na instrução do CSS, além do :hover e :focus temos também o :active e :visited que completam o clico de pseudos dinâmicas, também tem as estruturais e elementais.

    Para seu exemplo acescente a :visited, ao “visitar” um link ele permanece naquela instrução, alguns navegadores eu percebi que não funcionam mais com esta instrução, tende isso ai e me fale.

    Referências: http://www.w3schools.com/css/css_pseudo_classes.asp

  • Rodrigo Cesar disse:

    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;
    }

  • Alexandre disse:

    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!

  • Adriano Meira disse:

    Olá ALexandre, opa eu que agradeço por acessar meu blog e comentar aqui. Cara seja bem vindo ao mundo da programação visual para web, sobre o seu probleminha podemos resolver usando cookies.

    Cookies, são arquivos gravados no computador do usuário que guardam informação que você pode usar depois. Neste caso o cookie pode guardar o menu que está aberto e sempre que a página carregar ele lê este cookie e deixa o menu aberto, veja neste link, queo Flávio Ricardo cita como usar o cookie, de uma olhadinha. Depois faço um post com este tema.

    Obrigado até mais!

  • Alexandre disse:

    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

  • David Barreto disse:

    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…

  • Adriano Meira disse:

    Olá David

    Cara pra ficar mais fácil, você pode usar a função each do jQuery, esta função prcorre os elementos que determinar assim como um forweach ou for, do PHP. Veja o exemplo abaixo de como eu fiz para este exemplo. Siga os comentários para que possa entender como funciona.

    //Número da Aba que ficará aberta
    var itemAberto = 3;
    //Inicia a função each
    $('#menuGeral li').each(function(itens){
    //adiciona mais um valor, pois o primeiro é 0 como num array
    var pequisa = itens+1;
    //Caso o valor percorrido pelo each for igual ao itemAberto
    if(pequisa==itemAberto){
    //Abre o item dentro da LI que tem conteudo.
    $(this).find('.conteudoMenu').show();
    }
    });

    Bom é isso até mais!

  • lena disse:

    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

  • Danilo disse:

    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

  • Adriano Meira disse:

    Olá Danilo

    Cara é algo um pouco mais complicado, o problema aqui pé o recarregamento da página, para isso sua URL deve ter uma instrução do menu, por exemplo, se clicarmo em "Maça" sua URl devOlá Danilo

    Cara é algo um pouco mais complicado, o problema aqui pé o recarregamento da página, para isso sua URL deve ter uma instrução do menu, por exemplo, se clicarmo em "Maça" sua URl deve passar algum parâmetro indicando que ela foi aberta, por exmeplo: meusite.com.br/maca.html?page=maca se clicarmos em Pêra teremos meusite.com.br/perahtml?page=pera desta forma podemo pegar o atributo "page" e usa-lo para checar quem está aberto.

    Na prática, eu achei este link http://goo.gl/X3R1PG onde o cara nos mostra como pegar via javascritp este valro "page", após pegar ele você pode fazer uma verificação de quem está na URL e colocar uma condição para que ele fique aberto via CSS.

    No seu caso podemos fazer da seguinte forma, temos uma marcação de HTML do menu da seguinte forma:

    e passar algum parâmetro indicando que ela foi aberta, por exmeplo: meusite.com.br/maca.html?page=maca se clicarmos em Pêra teremos meusite.com.br/perahtml?page=pera desta forma podemo pegar o atributo "page" e usa-lo para checar quem está aberto.

    Na prática, eu achei este link http://goo.gl/X3R1PG onde o cara nos mostra como pegar via javascritp este valro "page", após pegar ele você pode fazer uma verificação de quem está na URL e colocar uma condição para que ele fique aberto via CSS.

    No seu caso podemos fazer da seguinte forma, temos uma marcação de HTML do menu da seguinte forma:

    <ul class="menu">
    <li><a href="?page=frutas">Frutas</a>
    <ul class="frutas hide">
    <li><a href="?page=frutas">Maça</a></li>
    <li><a href="?page=frutas">Pêra</a></li>
    <li><a href="?page=frutas">Limão</a></li>
    </ul>
    </li>
    <li><a href="?page=cores&outro_parametro=0">Cor</a>
    <ul class="cores hide">
    <li><a href="?page=cores&outro_parametro=1">Preto</a></li>
    <li><a href="?page=cores&outro_parametro=2">Branco</a></li>
    <li><a href="?page=cores&outro_parametro=3">Azul</a></li>
    </ul>
    </li>
    </ul>

    Note que para cada link de Fruta ou Cor eu passo o parâmetro “page” com o valor da classe de CSS do Sub menu de cada uma, e em cores mostro como pode passar mais de um parâmetro. Agora vamos criar a classe de css hide fica assim:

    hide{display:none}

    E por fim vamos ao javascrit e jquery, seguindo o link acima vamos colocar a função que ele nos mostrou:

    <script type="text/javascript">
    function getQuerystring(key, default_){
    if (default_==null) default_="";
    key = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regex = new RegExp("[\\?&]"+key+"=([^&#]*)");
    var qs = regex.exec(window.location.href);
    if(qs == null)
    return default_;
    else
    return qs[1];
    }
    </script>

    Agora vamos ao jQuey:

    <script type="text/javascript">
    $(function(){
    var get_paramenter = getQuerystring('page');
    //se foi passado algum parâmetro
    if(get_paramenter){
    //abre o menu com classe escolhido
    var menu_aberto = $('.'+get_paramenter);
    menu_aberto.show();
    }
    });
    </script>

    Bom este é um exemplo simples de como pode fazer, claro que isso vai depender de qual tecnologia está usando para programar as página, esta é a mais básica usando parâmetros na URL, espero ter ajudado até mais!

  • Adriano Meira disse:

    Olá Lena

    Você está usando qual ferramenta para chamar o artigo, é o WordPress?! Você tem que checar com o seu tema se ele trabalha com shortcdodes desta maneira.

  • Marcelo disse:

    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”);


  • Adriano Meira disse:

    Olá Marcelo, acho que seu problema está em ter uma H5 e DIV com mesma classe, tente mudar o nome das classes ou acrescentar no H5 uma nova, tipo class=”accordion abre_accordion”, daí você muda a chamada para $(‘.abre_accordion’).click […]

  • Rich disse:

    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

  • Adriano Meira disse:

    Olá Rich, obrigado pelo comentário!

    Sobre o sue problema, você pode tentar resolver da seguinte forma, depois da função de click você pode usar o “scrollTop” do jQuery para ir para o início da página, neste link http://www.adrianomeira.com/blog/navegacao-desilizante-com-jquery-usando-funcao-scrolltop falo sobre esta função, de uma conferida e se tiver dúvida posta ai!

    Até mais!

Publicidade e outros

Marcadores de Página Magnético

 

Leia e Liberte pelo BookCrossing.com ...