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!