Menu drop down para WordPress com CSS

Aviso importante!

Eu sei que você não quer ver propagandas, porém o conteúdo gratuito só está aqui graças a publicidade. Considere desativar o AdBlock para esse site.

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