Menu drop down para WordPress com CSS

  • Publicado em: 07/09/2010
  • Revisado em: 31/07/2013
  • Categoria(s)Wordpress
  • Autor: Ricardo Bernardi
  • Newsletter: Inscreva-se

Olá pessoal, segue mais um código fonte prontinho para ser usado, desta vez para fazer um menu drop down em CSS para WordPress. Vou incluir todos os códigos desde a chamada até o CSS, basta você fazer as alterações conforme sua necessidade. Este post foi escrito a pedido do leitor Ian Chaves.

Código que deve ser colocado no arquivo header.php do seu tema (procure o local onde atualmente está seu menu para colocar no mesmo lugar):

<div id="menu">
<ul>
<li><a href="<?php echo get_option('home');?>">Home</a></li><!-- link para a home page do blog -->
<?php wp_list_categories('hide_empty=0&exclude=1&title_li=&depth=2'); ?><!-- retorna todas as categorias e subcategorias cadastradas no blog (o depth=2 quer dizer que vai pegar 2 niveis ou seja categoria + subcategoria -->
<?php wp_list_pages('title_li=') ?><!-- retorna as pginas cadastradas no blog -->
</ul>
</div>

Código do CSS que deve ser colocado no arquivo style.css do seu tema:

#menu{height:40px; width:960px; display:block; float:left; background:url(images/bg_menu.gif) top repeat-x;} /* define altura, largura e imagem de fundo do menu (a imagem deve estar dentro da pasta "images" do seu tema */
#menu ul, #menus ul li{position: relative; z-index: 999;}
#menu ul{margin:0; padding:0; list-style:none; float:left;}
#menu ul li{display:inline; float:left; position:relative;}
#menu ul li a{float:left; text-decoration:none; color:#FFF; font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; text-shadow:0px 0px 1px #000; text-transform:capitalize; padding:9px 10px;}/* define cor, fonte e estilos dos links das categorias*/
#menu ul li a:hover{background:url(images/bg_menuhover.gif) bottom repeat-x;}/* configura o efeito over das categorias */
#menu ul li ul{display:none; width:160px; position:absolute; top:37px; left:0; background:#333; float:left;}/* oculta as subcategorias por padro */
#menu ul li:hover ul{display:block; z-index:200;}/* mostra as subcategorias quando o mouse estiver sobre o menu */
#menu ul li ul li{display:inline; float:left;}
#menu ul li ul li a{display:inline; float:left; width:150px; font-size:12px; padding:2px 5px; border-bottom:1px #666 solid; z-index:200;}/* define os tamanhos, cores e bordas dos submenus */

Este código está todo comentado. Estude-o e leia atentamente os comentários, faça alterações conforme suas necessidades e bom uso.

Espero ter ajudado.

Sobre o autor

Ricardo Bernardi

Sou técnico em hardware e desenvolvedor web, e sobre estes dois assuntos comecei a compartilhar aulas e artigos, tornando-me blogueiro em 2008. Em 2010 esse hobby virou profissão, e desde então tenho buscado melhorar e profissionalizar cada vez mais os projetos que mantenho na web.

Comentários

Atualmente temos 14 comentários para este post. Participe você também, clique aqui e comente sobre o assunto.

  • eric comentou em

    Ola,o menu é ótimo....gostaria de saber como faço pra tirar o link da categoria pai,deixando links somente nas subcategorias...se é que é possível isso.
    Obrigado.

    Responder
  • Fabio Mendes comentou em

    Parabéns pela praticidade, vi muita enrolação em outros sites.. mas você vai direto ao ponto! continue assim =)

    Responder
  • maugustodias comentou em

    Para quem quiser mais menus para WordPress, também existe mais opções neste site:
    http://new2wp.com/pro/jquery-drop-down-menu-wordpress-3-menu/

    Uma dica, para quem não sabe Inglês faz assim:
    Abre a pagina (aba) com o Google Translator e abre uma outra (aba) do seu Navegador sem a tradução, assim você aprende no português como montar qualquer código e no inglês para você ir aprendendo as sintaxes do código, quando eu não sabia inglês antes, fazia assim, hoje não preciso usar o Google Translator, pois com o tempo você aprende o inglês.

    Lembre-se o inglês técnico não tem região é internacional, assim sendo se você uma vez aprender ele não vai mudar em nenhum lugar, as linguagens são escritas no inglês técnico e não no Americano ou Britânico, desta forma se você perceber as sintaxes do PHP e ASP são parecidas bem como nas demais, só muda a forma de posicioná-las, claro cada qual em seu parâmetro.

    Valeu !!!

    Responder
  • Kaique Nizer comentou em

    Legal mas to kerendo akele menu q desce a lista sabe
    :) Tipo escolha sua categoria aew vc abre e sai a lista

    Responder
  • Como o amigo acima disse uma video aula cairia bem...

    e ja aproveitando gostaria de pedir outra de como colocar esse slide q vc tem na index no wordpreess ...
    Acho q é com query ´post...

    Entao vai dois pedidos: Menu dropdown no Wp, e Montar um slide show dinamico no WP !!!

    Abraço fico no aguardooooo !

    Responder
  • RS Infor comentou em

    Olá Ricardo o seu blog ficou muito bacana... Gostei!

    Há gostaria de sugerir uma vídeo aula, pois, infelizmente não consegui implementar o código de menu dropdown no meu blog...

    Fiquei com algumas dúvidas e pode ter certeza que irá ajudar não só a mim mais há muitos outros usuário do seu blog ok...

    Sugestão: Como implementar nos arquivos wordpress e como fazer o cadastro, alteração, enfim...

    Abraço!!! e no aguardo ancioso!

    Responder

Deixe seu comentário