Início
Trago uma dica bacana, irei mostrar como fazer um Menu Accordion simples com Jquery incorporado com a Template Tag wp_list_categories, vamos lá então.
Passo 1:
Baixe o JQuerry, caso não o tenha ainda.
Passo 2:
Renomeie o arquivo baixado para jquery.js e coloque o arquivo na pasta do seu tema, apreoveite também e crie um arquivo chamado menuaccordion.js, que vamos utilizar mais pra frente.
Passo 3:
Abra o arquivo header.php e insira as seguintes linha dentro do <head></head>:
Passo 4:
Agora vamos colocar o código para fazer o efeito accordeon dentro do arquivo menuaccordion.js:
Passo 5:
Agora vamos fazer o CSS, abra o arquivo style.css e cole o seguinte código:
Passo 6:
Agora a parte mais divertida, vamos manipular a Template Tag wp_list_categories é bem simples, escolha um aquivo para inserir o código abaixo(pode ser o header.php, ou até o sidebar.php)
E é isso ai pessoal está pronto nosso Menu Accordeon utilizando o WordPress, você também pode utilizar a Template Tag wp_list_pages no lugar wp_list_categories, para exibir as páginas do seu blog/site. Você também pode exibir quantas opções quizer basta repitir o mesmo procedimento.
Passo 1:
Baixe o JQuerry, caso não o tenha ainda.
Passo 2:
Renomeie o arquivo baixado para jquery.js e coloque o arquivo na pasta do seu tema, apreoveite também e crie um arquivo chamado menuaccordion.js, que vamos utilizar mais pra frente.
Passo 3:
Abra o arquivo header.php e insira as seguintes linha dentro do <head></head>:
- Código:
<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’);?>/jquery.js“></script>
<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’);?>/menuaccordion.js“></script>
Passo 4:
Agora vamos colocar o código para fazer o efeito accordeon dentro do arquivo menuaccordion.js:
- Código:
$(document).ready(function(){
$(‘#accordion-container > li > a’).bind(‘click’,function() {
var $next = $(this).next();
if ($next.is(‘:visible’)) return false;
$(this).parent().parent().find(‘li > ul:visible’).slideUp(‘normal’);
$next.slideDown(‘normal’);
return false;
});});
Passo 5:
Agora vamos fazer o CSS, abra o arquivo style.css e cole o seguinte código:
- Código:
#menu-accordion ul {margin:0;padding:0;list-style:none;}
#menu-accordion ul#accordion-container {width:200px;padding:2px;}
#menu-accordion ul#accordion-container > li {margin-top:1px;background:#000;}
#menu-accordion ul#accordion-container > li > a {display:block;padding: 4px; color: #fff;text-decoration:none;outline:none;}
#menu-accordion ul#accordion-container > li > a:hover {background: #666;}ul.accordion-menu {display:none;background:#000;}
#menu-accordion ul.accordion-menu a {display:block;padding-left: 4px;background:#aaa;color:#555;text-decoration:none;outline:none;}
#menu-accordion ul.accordion-menu a:hover {color:#fff;}
Passo 6:
Agora a parte mais divertida, vamos manipular a Template Tag wp_list_categories é bem simples, escolha um aquivo para inserir o código abaixo(pode ser o header.php, ou até o sidebar.php)
- Código:
<div id=”menu-accordion”>/* div pai que engloba todo o menu*/<ul id=”accordion-container”>/* essa parte é muito importante, essa “ul” ele engloba toda a formação do accordion*/
<li>/*aqui começa a primeira opção do menu*/
<a href=”#”>Opção 1</a>/* Link que expandirá quando clicado, para abrir as sub-opções, que nada mais é que as categorias que você definir*/
<ul class=”accordion-menu”>/*class responsável por englobar cada Opção do Menu*/
<?php wp_list_categories(‘title_li=&include=48, 50′); ?>/* Aqui você definirá o ID das categorias que serão apresentadas nessa opção, os números 48, 50 são os ID desse exemplo, o parâmetro “title_li=“ está vazia para que não apareça a palavra Categoria acimas das opções*/
</ul>
</li>/*aqui termina a primeira opção do menu*/
<li>/*aqui começa a segunda opção do menu*/
<a href=”#”>Opção 2</a>/*Idem da Opção 1*/
<ul class=”accordion-menu”>/*class responsável por englobar cada Opção do Menu*/
<?php wp_list_categories(‘title_li=&include=49, 42′); ?>/* Aqui você definirá o ID das categorias que serão apresentadas nessa opção, agora eu coloquei os números 49, 42 , você pode definir quantas categorias quizer, igual a “Opção 1″ o parâmetro “title_li=“ está vazia para que não apareça a palavra Categoria acima das opções*/
</ul>
</li>/*aqui termina a segunda opção do menu*/
</ul>
</div>
E é isso ai pessoal está pronto nosso Menu Accordeon utilizando o WordPress, você também pode utilizar a Template Tag wp_list_pages no lugar wp_list_categories, para exibir as páginas do seu blog/site. Você também pode exibir quantas opções quizer basta repitir o mesmo procedimento.
