Dropdown com as páginas e sub-páginas do WordPress

Por: em Hacks/Dicas no dia 15 Abril, 2010

drop-down-menu

Para quem usas as paginas que tem no WordPress como menus, e tem tambem sub-paginas, convem fazer um drop-down para mostrar então as sub-paginas.

Neste artigo venho-vos mostrar como o fazer, é muito simples, só precisam de copiar e colar o codigo e depois modificar à vossa maneira.

Primeira vamos precisar de adicionar as paginas como menu, no header do vosso theme.

<div id="links_bar">
     <ul>
         <li><a href="<?php echo get_option('home'); ?>/">Home</a></li>
         <?php wp_list_pages('title_li=' ); ?>
     </ul>
</div>

Agora que temos o HTML e PHP para mostrar a paginas, precisamos de adicionar o CSS para fazer o dropdown e estilizar os menus.

/* Menus drop-down */ 
#links_bar {
 width: 100%;
 height: 30px;
 color: #fff;
 background-color: #000;
}

#links_bar ul {list-style: none; margin: 0; padding: 0; line-height: 30px;}

/* Menu Principal */
#links_bar li a, #links_bar li a:visited {
 text-align: center;
 display: block;
 text-decoration: none;
 color: #fff;
 padding: 0px 9px 0 9px;
 margin: 0px 5px 0 0;
 line-height: 30px;
}
#links_bar li a:hover, #links_bar li a:visited:hover {
 color: #fff;
 text-decoration: none;
 background-color: #C0C0C0;
}
 
/* Sub-menus */
#links_bar li ul li a, #links_bar li ul li a:visited {
 width: 180px;
 text-align: left;
 display: block;
 text-decoration: none;
 color: #fff;
 padding: 0px 9px 0 9px;
 margin: 0px 5px 0 0;
 line-height: 30px;
 background-color: #000;
}
#links_bar li ul li a:hover, #links_bar li ul li a:visited:hover {
 color: #fff;
 text-decoration: none;
 background-color: #C0C0C0;
}

#links_bar li ul {position: absolute; visibility: hidden; list-style: none;}
#links_bar li:hover ul, #links_bar li.hover ul {visibility: visible;}
#links_bar li:hover ul ul, #links_bar li.hover ul ul {visibility: hidden;}
#links_bar li li:hover ul, #links_bar li li.hover ul {visibility: visible;}
#links_bar li li:hover ul ul, #links_bar li li.hover ul ul {visibility: hidden;}
#links_bar li li li:hover ul, #links_bar li li li.hover ul {visibility: visible;}

#links_bar li {float: left;}
#links_bar li ul li {float: none;}
/* Menus drop-down */

E é tudo, agora podem mudar os tamanhos e as cores no CSS para o que vocês quiserem.



Com um total de 71 posts.

17 Comentários

  1. Matheus
    25 de Abril de 2010 ás 12:12

    Porque o dropdown fica assim: http://i40.tinypic.com/352m7ue.jpg em vez de ficar assim: http://i44.tinypic.com/2hebz4g.jpg

  2. ORiOn
    25 de Abril de 2010 ás 13:28

    Matheus, este menu só dá para um level de sub-menu.

  3. Matheus
    25 de Abril de 2010 ás 13:49

    Conhece onde posso encontrar como mostra a imagem?

  4. ORiOn
    25 de Abril de 2010 ás 14:03

    Matheus, não.

  5. Custódio
    26 de Abril de 2010 ás 22:29

    E vão três…

    Uma perguntinha, se o tema já tem as páginas como menu, só é necessário adicionar o CSS verdade? Ou é necessária alguma instrução no header para que ele reconheças as sub-páginas?

    Obrigado.

  6. ORiOn
    27 de Abril de 2010 ás 12:11

    Sim, só precisas do CSS.

    Mas se no header, a função tiver depth=1 tens de apagar isso.

  7. João Godinho
    9 de Agosto de 2010 ás 15:57

    Estou a usar, mas não em wordpress e no Internet Explorer, aparecer em linha e com um espaço entre eles.

    Porque será? O site em questão é o do comentário 😉 http://pormenorvirtual.com

  8. ORiOn
    5 de Setembro de 2010 ás 12:05

    João Godinho, desculpa só responder agora. Já conseguiste resolver?

  9. João Godinho
    23 de Dezembro de 2010 ás 0:44

    Estou com o mesmo problema, agora noutro site.

  10. ORiOn
    23 de Dezembro de 2010 ás 17:48

    Conseguiste resolver no outro?

  11. João Godinho
    23 de Dezembro de 2010 ás 20:02

    Não, porque mudei depois, mas agora voltei a usar isto e estou com o mesmo erro, mandei-te o endereço por msn, depois metes aqui a resolução. 😉

  12. Erick
    10 de Março de 2011 ás 7:32

    Por que pra min nao funcionou ? fiz algo errado ?

  13. ORiOn
    10 de Março de 2011 ás 19:49

    Erick, Se fez algo de errado só você é que pode saber.

    O que não funciona?

  14. Paulo
    7 de Setembro de 2011 ás 4:08

    Gostei muito do sistema de menu. Como sou leigo no assunto, gostaria de saber em quais locais eu coloco os scripts.

  15. Thiago
    29 de Novembro de 2013 ás 18:26

    Olá Mestre, mt obg por esse post , me ajudou e mt. Parabéns….

  16. fernando alencar
    14 de Novembro de 2014 ás 13:22

    o primeiro script coloco no header, certo, e o segundo? onde coloco?

  17. ORiOn
    30 de Novembro de 2014 ás 0:57

    No style.css

Comenta com força que é de graça!