Olá pessoal depois de muito tempo sem postar nada por aqui, 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 Jquery, 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>:
<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’);?>/menuaccordion.js“></script>
Onde <?php bloginfo(‘template_directory’);?> é o endereço dos diretórios do WordPress até chegar no seu tema([...]wp-content/themes[...]) e jquery.js e menuaccordion.js são os arquivos javascript que você baixou e criou respectivamente na pasta do seu tema.
Passo 4:
Agora vamos colocar o código para fazer o efeito accordeon dentro do arquivo menuaccordion.js:
$(‘#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;
});});
Não esqueça de salvá-lo.
Passo 5:
Agora vamos fazer o CSS, abra o arquivo style.css e cole o seguinte código:
#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;}
Não esqueça de salvá-lo.
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)
<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.
Inté++ fui
9 respostas Até agora ↓
SKY ALEXANDRE // 22/08/2009 às 09:10
MARCELO,ME ADICIONE NO HOTMAIL O MAIS RÁPIDO POSSÍVEL… PRESSISO FALAR COM VOCÊ URGENTE….
marujo // 22/09/2009 às 23:17
oi marcelo. aproveitando o assunto, tem como num mesmo menu horizontal com as páginas do WP eu colocar as categorias? ao invés de ter um outro menu de categorias, eu queria colocar as categorias no mesmo menu das páginas. é possível isso? grato!
Marcelo Torres // 23/09/2009 às 17:39
Tem sim marujo , faça o seguinte:
<div id=”menu”>
<ul>
<?php wp_list_pages(‘title_li=’); ?>
<?php wp_list_categories(‘title_li=’); ?>
</ul>
</div>
o importante é você deixar o atributo “title_li” vazio para não aparecer, por exemplo, Categoias e em baixo Posts, assim sendo, vai ficar tudo numa sequencia, como se fosse “tudo a mesma coisa”. depois é só definir nas CSS se vai ficar na horizontal ou vertical
espero que ajude!
Fabio Camargo // 29/10/2009 às 13:11
Marcelo, ótimo tutorial. Tenho uma dúvida, pois estou com um projeto com um menu desses, mas um pouco diferente. Explico:
Os tópicos do menu são categorias (ex.: Cookies, Chocolates, Biscoitos etc). A idéia é q ao clicar no tópico, sejam listadas as tags dentro dessa categoria (ex. na categoria Cookies, são 6 tags, q são produtos, na categoria Chocolates são 15 e o que está numa categoria não pode estar na outra).
É possível adaptar esse menu para o q eu quero?
Obrigado!
Marcelo Torres // 29/10/2009 às 17:41
Fabio Camargo, acho que o processo não seria tão diferente, mas porque você não ultiliza sub-categoria ao inves de tags, de uma olhada nesse link do codex – http://codex.wordpress.org/Template_Tags/wp_list_categories – e proucura pelo parametro child_of, acho que ficaria até mais simples na hora de editar a postagem.
Fabio Camargo // 30/10/2009 às 11:04
Hummm, pode ser uma boa mesmo, achei outro texto que pode ajudar também, vou começar a experimentar por aqui. Obrigado!
Eder Lima // 31/10/2009 às 21:45
Olá amigo!
Excelente dica.
Porem tive um pequeno problema com firefoxe chrome, uma lista não fecha a outra, todas se expandem.
De diferente do seu exemplo eu apenas coloquei ids nas listas e sublistas, mas mesmo após remover não funcionou.
O seu exemplo funciona 100% além do ie?
Abraço
Eder Lima // 31/10/2009 às 21:48
Ah, complementando.
Outra diferença é que na lista com itens da sublista eu usei um estilo em linha, pois eu uso um custom_field pra usar uma imagem de fundo.
Segue:
//
<img src="/imagens/tit_diretores.gif” width=”137″ height=”37″ title=”Seções” />
cat_name);
?>
<li class="directors" id="directors-”>cat_name) ?>
<ul id="hotprojects-” class=”accordion-menu”>
<li style="background:url(ID, ‘video_thumb’, true)); ?>) top left no-repeat”><a href="”><img title="” src=”/imagens/molde-port.png” width=”96″ height=”96″ alt=”Clique para ver”/>
Marcelo Torres // 01/11/2009 às 16:36
Olá Eder, acabei de testar o exemplo de novo, e esta funcionado perfeitamente, no Firefox, Opera, Safari, Chrome e até na bomba do IE :D, de uma analizada no codigo denovo para ver se não esqueceu de declarar algum parametro no jquery, já que vc disse que colocou Id nas listas.
Abraços