Menu Dropdown WordPress

No momento da construção de sites no WordPress é preciso definir alguns detalhes de implementação de layout e muitas vezes os desenvolvedores esbarram em alguns detalhes do WordPress e não conseguem o resultado que queriam. Criar Menu Dropdown no WordPress é uma tarefa muito fácil. A única coisa que é preciso saber, é como criar um Dropdown usando CSS pois o WordPress não dificulta em nada a implementação deste tipo de menu.

O que é um Menu Dropdown?

Um Dropdown é, basicamente, um menu baseado na hierarquia de páginas. As páginas com hierarquia mais alta são listadas no menu enquanto as páginas-filho são escondidas. No momento que você passa o mouse sobre uma página específica todas as páginas que possuem esta página sobre o mouse como página-mãe(ou parent page, no wordpress) são mostradas abaixo. Na imagem a seguir há uma ilustração de como funciona um dropdown menu baseado na hierarquia de páginas.

Exemplo de Menu Dropdown

Para quem ainda não tá claro de como funciona um Menu Dropdown conceitualmente. Imagine um blog cujo assunto é a construção de sites. No Blog, há uma categoria de notícias chamadas WordPress. Nesta Categoria haveriam sub-categorias sobre Otimização de Sites no WordPress, Criação de Templates WordPress, Sites Gerenciáveis e Plugins para WordPress. Então a hieraquia de páginas ficaria da seguinte forma:

WordPress

Otimização de Sites no WordPress

Criação de Templates WordPress

Sites Gerenciáveis

Plugins para WordPress

Assim, WordPress é uma categoria que engloba todas essas subcategorias. No menu principal aparecerá apenas o item WordPress e ao passar o mouse sobre este, aparecerá uma lista secundária com os sub-ítens listado acima.

Como criar Dropdown no CSS?

Agora que você já sabe o que é  Menu Dropdown, verá como é fácil sua implementação usando CSS. Como um menu é uma lista de ítens, a melhor forma para garantir a semântica na criação de um menu é usando uma lista. Então criamos uma lista <ul> com id de menu-principal. Dentro da ul, coloque cada ítem do menu dentro de uma tag <li>. Para o sub-menu, é preciso inserir mais uma lista, na mesma estrutura dessa lista descrita anteriormente só que, dessa vez, essa lista deve ficar dentro do <li> que pertence à categoria mãe na hierarquia do site. Para o exemplo passado anterioremente, ficaria assim a estrutura do Menu Dropdown:

<ul id="menu-principal">
    <li> <a href="/home/"> Home </a> </li>
    <li> <a href="/wordpress/"> Home </a>
        <ul>
            <li> <a href="/wordpress/otimização-de-sites-no-wordpress/"> Otimização de Sites no WordPress </a>
            <li> <a href="/wordpress/criação-de-templates-wordpress/"> Criação de Templates WordPress </a>
            <li> <a href="/wordpress/sites-gerenciaveis/"> Home </a>
            <li> <a href="/wordpress/plugins-para-wordpress/"> Plugins para WordPress </a>                 
        </ul>
    </li>
    <!-- E mais links necessários -->
</ul>

Feito a estrutura no seu HTML é preciso configurar o CSS para esconder o sub-menu e faze-lo aparecer somente no momento em que o mouse é passado na categoria-mãe. Para isso, é preciso setar o valor none na propriedade display do sub-menu. Também é preciso setar o display para block na propriedade hover do sub-menu. Somente isso fará o efeito do menu dropdown. No código a seguir foram setados mais algumas propriedades nos elementos para que o menu tenha uma aparência melhor.

#menu-principal li {
	float: left;
	margin-left: 25px;
	list-style-type: none;
	background-color: #333;
	padding: 5px 7px 7px 5px;
}

#menu-principal li:hover ul {
	display: block;
}

#menu-principal li ul {
	margin: 0px;
	padding: 0px;
	display: none;
}

#menu-principal li ul li {
	float: none;
	margin: 0px;
	padding: 0px;
}

a {
	color: #FFF;
	text-decoration: none;
}

a:hover {
	color: #BBB;
}

Como colocar este Sub-Menu Dropdown no WordPress?

O trabalho mais difícil já foi feito. Agora, é preciso apenas entender como funciona o WordPress para listagem de páginas. Você pode fazer facilmente o menu para Páginas, Categorias ou ambos. Para implementar o Menu Dropdown com categorias, usa-se a função<?php wp_list_categories() ?> , já para implementar o dropdown com páginas, a função é <?php wp_list_pages() ?>

A seguir, veja como ficaria o código no PHP para a criação do menu para ambos os casos: Categorias e Páginas.

<nav>
	<ul id="menu-principal">
		<li> <a href="<?php bloginfo('url') ?>"> Home </a> </li>
		<?php
			wp_list_pages('sort_column=menu_order&depth=0&title_li=');
			wp_list_categories('depth=0&title_li=');
		?>
	</ul>
</nav>

Conclusão

Percebe-se então que, o mais importante para a criação de um Menu Dropdown no WordPress é no CSS. Para WordPress fica até mais fácil do que se fizer em HTML puro, pois, a chamada das funções que listam as categorias e páginas já faz o trabalho de listar os itens hierarquicamente. Gostou do post? Comente abaixo sobre o que você achou sobre o post.