A pedido do Matheus vamos hoje falar sobre como fazer menus no wordpress fazendo as sub-paginas aparecerem como um menu drop down usando CSS e jQuery.
O menu deve ficar algo mais ou menos assim:
Como na verdade este tutorial é uma continuação do anterior, Como criar menus no WordPress não vamos explicar aqui novamente o que já falamos lá.
Como fizemos no tutorial anterior colocamos no seu tema a função: wp_list_pages() para listar as paginas, a unica diferença agora é que vamos tirar o parâmetro depth da mesma, deixando assim:
<ul id="nav"> <?php wp_list_pages(); ?> </ul>
Isto vai gerar um codigo mais ou menos desta maneira:
<ul id="nav"> <li class="page_item page-item-1 current_page_item"> <a href="http://www.geniusdeveloper.com.br" title="home">home</a> </li> <li class="page_item page-item-225"> <a title="Plugins" href="http://www.geniusdeveloper.com.br/plugins/">Plugins</a> <ul> <li class="page_item page-item-227"> <a title="Twitter Follow Me Box" href="http://www.geniusdeveloper.com.br/plugins/twitter-follow-me-box/">Follow Me</a> </li> <li class="page_item page-item-227"> <a title="Twitter Follow Me Box" href="http://www.geniusdeveloper.com.br/plugins/twitter-follow-me-box/">Follow Me</a> </li> <li class="page_item page-item-227"> <a title="Twitter Follow Me Box" href="http://www.geniusdeveloper.com.br/plugins/twitter-follow-me-box/">Follow Me</a> </li> </ul> </li> <li class="page_item page-item-4"> <a title="Sobre Nós" href="http://www.geniusdeveloper.com.br/sobre-nos/">Sobre Nos</a> </li> <li class="page_item page-item-6"> <a title="Contato" href="http://www.geniusdeveloper.com.br/contato/">Contato</a> </li> </ul>
E aqui segue o nosso css:
#nav { list-style: none; } #nav * { padding: 0; margin: 0; } #nav li { float: left; margin: 0 12px 0 0; height: 32px; } #nav li a { color: #b5c6e4; text-transform:uppercase; text-decoration: none; font-weight: bold; padding: 8px 8px; height: 16px; display: block; text-align:center; width:100px; } #nav li a:hover { background: #203461; } .current_page_item { background: #203461; } #nav ul { display: none; text-align: left; width:100px; font-weight: normal; line-height: 20px; list-style: none; margin: 0 0 0 10px; float:left; } #nav li li { border: 1px solid #E3E0D5; background: #F3EFEB; font-size: 11px; } #nav li li a { padding: 4px 10px 0 10px; width: 150px; } #nav li li a:hover { background: none; color: #000; } #nav li:hover ul { display:block; }
O que fazemos basicamente alem de dar o estilo ao menu é esconder a lista de dentro da lista. E depois exibir ela quando passamos o mouse por cima. A estrutura mais básica que poderíamos pensar seria assim:
<style type="text/css"> #nav ul { display: none; } #nav li:hover ul { display:block; } </style> <ul id="nav"> <li> <a href="#">menu</a> <ul> <li> <a href="#">sub-menu</a> </li> <li> <a href="#">sub-menu</a> </li> <li> <a href="#">sub-menu</a> </li> </ul> </li> </ul>
Acredito que com esta estrutura básica deve ter ficado mais claro para vc como funciona.
Mas nem tudo são flores, como o titulo ja diz, vamos ter que usar o jQuery para fazer o menu funcionar, quero dizer, quase isto, vamos ter que usar o jQuery para o menu funcionar no IE, pois ele somente suporta a pseudo classe :hover sobre um link e não sobre uma lista como estamos fazendo para o nosso menu funcionar. Então, temos que nos preucupar que o nosso tema ative o jQuery e incluir o nosso arquivo js no tema, para isto vamos colocar este codigo no nosso functions.php:
add_action('template_redirect', 'gd_add_js'); function gd_add_js(){ //nao vamos precisar disto no admin if(is_admin()) return; wp_enqueue_script('app', get_bloginfo('template_directory') . '/scripts/app.js', array('jquery')); }
Isto vai fazer duas coisas, uma chamar o nosso script js e ainda vai verificar se o jquery já esta ativo, se não tiver ativa o mesmo.
Vamos ao codigo do app.js:
//<![CDATA[ jQuery(document).ready(function(){ jQuery('#nav li').hover( function() { jQuery('ul', this).css('display', 'block'); }, function() { jQuery('ul', this).css('display', 'none'); }); }); //]]>
Este codigo em jQuery faz que quando tivemos o cursor em cima do #nav li ele adiciona ao ul sobre ele a propriedade display blog, e quando tiramos o mouse volta o display none.
Desta forma vc ja vai ter um belo menu drop down no seu blog.
Fonte: Rafael Cirolini/Nerd Head