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.
Compartilhe esse post:
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.
Atualmente temos 14 comentários para este post. Participe você também, clique aqui e comente sobre o assunto.
Muito bom, valeu cara!
ResponderOla,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.
Parabéns pela praticidade, vi muita enrolação em outros sites.. mas você vai direto ao ponto! continue assim =)
ResponderPerfeito esse CSS dropdown funcionou perfeitamente no tema que estou montando.
Respondergostei era o que ue precisava
ResponderMuito bom o post e o belo site. Recomendarei sempre que tiver oportunidade.
ResponderMuito bom o post, parabéns! Me serviu muito! :D
ResponderPara 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 !!!
ResponderSensacional até que enfim consegui aprender isso
ResponderLegal mas to kerendo akele menu q desce a lista sabe
:) Tipo escolha sua categoria aew vc abre e sai a lista
Kaique acho que vc não percebeu mas ja existe uma video aula mostrando como montar um slide tipo o do site RBTECH...veja ai....http://dev.rbtech.info/sistema-de-banners-em-slide-com-css-e-jcycle/
ResponderComo 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 !
ResponderOlá 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
© 2008-2025 - RBTech.info | Todos os direitos reservados | Hospedado por Innova Host
É proibida a reprodução total ou parcial de qualquer conteúdo deste site.
Muito bom isso! Testei no meu blog e funcionou! obg!