• Tweet
• Email

• Tweet
• Email

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 definí-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;

INTERACÇÃ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>

Abraços!