Criar menu dropdown sem plugins com o WordPress

Um menu do tipo dropdown possui a particularidade de exibir os subitens no momento em que você posiciona o mouse sobre o item pai. São amplamente explorados para melhor dividir e organizar as informações de navegação de um site, além de trazer um bom apelo visual para o visitante. O fator interatividade do menu também é outro ponto positivo, já que ao ocultar itens provoca a curiosidade do internauta para descobrir o conteúdo escondido.

Adicione o suporte a menus

Caso o tema que esteja utilizando não tenha suporte à menus, abra o arquivo functions.php e adicione as seguintes instruções:

register_nav_menu( 'main-menu', 'Menu Principal' );

Nesse passo, registramos o menu com identificador main-menu e nome Menu Principal através dos parâmetros passados. A seguir escolheremos o local do tema que desejamos exibir esse menu. Normalmente os menus localizam-se no topo das páginas, caso queira dessa forma também, abra o arquivo header.php e insira onde melhor se adequar o menu ao template:

<div id="menu">
    <?php wp_nav_menu( array( 'location'=>'main-menu', 'container'=>'div', 'container-class'=>'menu', 'menu_class'=>'ul-menu' ) ); ?>
</div>

Na função wp_nav_menu identificamos o menu criado para ser exibido no referido espaço e os parâmetros de container fazem o menu ser envolvido por uma div (tag HTML) com a classe ‘menu’, enquanto que a classe da lista não-ordenada do menu foi definida para diferenciar da classe da div.

Exibindo menus

Após ter inserido os códigos nos arquivos do tema, abra-o e veja os valores retornados e o menu gerado pela função. Se você seguiu os passos e não possui menus criados no WordPress o resultado será a listagem das páginas, isso porquê a função wp_nav_menu executa a função wp_page_menu por padrão se nenhum menu for encontrado.

Essa é a razão de colocarmos o menu dentro da div com classe menu, pois também por default, a função alternativa gera uma div instanciada com a classe de mesmo nome. Dessa maneira o menu será exibido da mesma forma independente de ter sido criado ou não e possuirá a marcação semelhante a essa:

<div id="menu">
    <div class="menu">
        <ul>
            <li id="item-1" class="page_item page-item-1">
                <a href="http://localhost/wordpress/?page_id=1" title="Item 1">Item 1</a>
            </li>
            <li id="item-2" class="page_item page-item-2">
                <a href="http://localhost/wordpress/?page_id=2" title="Item 2">Item 2</a>
            </li>
            <li id="item-3" class="page_item page-item-3">
                <a href="http://localhost/wordpress/?page_id=3" title="Item 3">Item 3</a>
            </li>
            <li id="item-4" class="page_item page-item-4">
                <a href="http://localhost/wordpress/?page_id=4" title="Item 4">Item 4</a>
                <ul class='children'>
                    <li id="item-5" class="page_item page-item-5">
                        <a href="http://localhost/wordpress/?page_id=5" title="Item 5">Item 5</a>
                    </li>
                    <li id="item-6" class="page_item page-item-6">
                        <a href="http://localhost/wordpress/?page_id=6" title="Item 6">Item 6</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

Gerenciando menus pelo WordPress

Abra seu painel administrativo e clique em Aparência, e em seguida no item Menus localizado no menu lateral. Nessa tela de edição de menus adicione os itens das caixas auxiliares e arraste-os como bem entender de modo a compor o melhor menu que adeque ao seu site. Posicione determinado item embaixo de outro e arraste-o para frente para defini-lo como filho do item acima localizado.

No caso da listagem alternativa de páginas para o caso de não existir menu criado, você pode definir uma página como filha de outra na tela de edição de páginas. Localize a caixa Atributos de página, normalmente à direita da caixa de edição de texto e escolha uma outra página qualquer no campo Mãe.

Estilize seu menu com CSS

Iremos agora formatar o modo como o menu será exibido dentro do template. Para isso inclua em seu arquivo style.css as seguintes linhas:

#menu { float: left; width: 100%; height: 50px; }
#menu li { float: left; padding: 10px 20px; }

#menu li ul { display: none; position: absolute; }
#menu li ul li { display: block; float: none; padding: 5px 10px; }

Além dessas marcações você pode explorar o visual do modo que tenha uma melhor apresentação ao seu visitante, as informação passadas são a base para o funcionamento do efeito dropdown. Note que obedecemos a estrutura para ambas as funções e definimos de modo prático que:

width: 100% – O menu ocupará a tela toda;
float: left – Os itens primários exibidos lado a lado;
display: none – Os subitens não serão exibidos inicialmente;
display: block; float: none – Os subitens quando mostrados estarão um abaixo do outro;

Interação com javascript

Usaremos a biblioteca jQuery para fazer aparecer e tornar a ocultar os subitens de acordo com a interação do usuário. Incorpore o seguinte código javascript a sua página header.php, dentro da metatag :

<?php wp_enqueue_script( 'jquery' ); ?>
<script type="text/javascript">
jQuery(document).ready(function($)
{
    $("#menu ul li").each(function() {

        var el = $('#' + $(this).attr('id') + ' ul:eq(0)'); 

        $(this).hover(function() {
            var n_left = $(this).position().left;
            var n_top = $(this).position().top + 50;
            var n_width = $(this).width() + 40;

            el.css('left', n_left);
            el.css('top', n_top);
            el.css('width', n_width);
            el.show();
        }, function(){
            el.hide();
        });
    });
});
</script>

O valor 50 diz respeito a altura do menu, enquanto que 40 é o valor do padding (margem interna) que criamos. Em poucas palavras esse código irá:

Alternar a exibição dos subitens;
Posicionar o submenu abaixo do item que estiver com o mouse parado;
Igualar a largura do submenu com a do item ao qual pertence.

Explorando os sub-níveis do menu

Ao aplicar a programação encontramos um pequeno problema: Ela funciona bem apenas para o primeiro nível do menu. Por exibir os subitens abaixo do item selecionado, quando vamos além do primeiro nível os itens se sobrepõe uns aos outros. A alternativa para esse caso é criar uma variação que leva o submenu a frente do item atual:

<?php wp_enqueue_script( 'jquery' ); ?>
<script type="text/javascript">
var level = 0;
jQuery(document).ready(function($)
{
    $("#menu ul li").each(function()
    {
        var el = $('#' + $(this).attr('id') + ' ul:eq(0)'); 

        $(this).hover(function()
        {
            var n_left = $(this).position().left;
            var n_top = $(this).position().top + 50;
            var n_width = $(this).width() + 40;

            if ( level > 0 ) {
                n_top -= 50;
                n_left += n_width;
            }

            el.css('left', n_left);
            el.css('top', n_top);
            el.css('width', n_width);
            el.show();

            level++;
        }, function(){
            el.hide();
            level--;
        });
    });
});
</script>

É isso.

Abraço!

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

Powered by: