Menu drop down no WordPress com css e Jquery

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

Redes Sociais

• 

Tags | css, drop, jquery, php, wordpress