Habilitando e registrando o menu

Em functions.php do seu tema, adicione:

De início, verificamos a função register_nav_menu. Dentro da função, abrigamos dois parâmetros, que são: nome do menu (de preferência sem espaços e letras minusculas) e a descrição do menu. Ambos são obrigatórios nesta função.

Essa função já habilita o suporte para os menus.

Retornando o menu

Adicione o seguinte código onde queira que o retornasse o menu:

Como perceberam, a função wp_nav_menu recebe alguns parâmetros, para não haver dúvidas, explico melhor abaixo.

• menu: O nome do menu em que deseja retornar (valor determinado na função register_menu)
• theme_location: Onde vai está localizado o menu (valor determinado na função register_menu)
• container: Se alguma tag irá envolver a lista do menu
• container_class: Classes do container
• container_id: O ID do container
• menu_class: Classes da lista do menu
• menu_id: O ID da lista do menu
• echo: Usado para retorno do menu, em uma vez que seu valor seja falso, o menu não será retornado ou visível.
• before: Se algum elemento entrará antes do menu
• after: Se algum elemento entrará depois do menu
• link_before: Se algum elemento entrará antes do link
• link_after: Se alguém elementro entrará depois do menu
• depth: Quantos níveis de hierarquia devem ser incluídos
• walker: Objeto para personalização do menu

Habilitando descrição

Para terminar a explicação, os Menus do WordPress contém uma opção para descrição nos menus. É uma forma melhor de explorar o conteúdo e também explicar um pouco mais o parâmetro walker, que ficou um pouco difícil de se entender.

Primeiro, ative a opção de descrição desta forma: Abra a seção de menus no painel de administração e vá a Screen Options (Opções de tela) e ative a opção Description (Descrição)

Vamos personalizar o menu para receber as informações de descrição, adicione em functions.php:

No código, foi criado uma classe retorna todo o item do menu, ou seja, a <li>. Está comentado no código onde você vai encontrar os códigos da descrição. É necessário entender um pouco de PHP para alterar esse código e personalizar ainda mais o seu menu.

Para retornar essa classe, vamos usar o walker do menu, altere o valor, assim:

Você pode determinar o valor da descrição no mesmo lugar aonde você altere as informações do menu.

Fonte da descrição: http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-output

Posts Relacionados

• Criando Sidebar Dinâmica no WordPress
• Introdução ao CSS 3D – Flip Card
• Command & Conquer: Tiberium Alliances
• Convencimento e educação = liberdade
• Experiência deve ter começo, meio e fim

Os convertidos do Tableless não existe mais. Algumas empresas que tiveram seus sites convertidos, acharam que o Tableless estava copiando seus layouts e etc. Mandaram uma cartinha extrajudicial, fazendo com que tirássemos seus sites (convertidos) do ar. Bem, fizemos isso e para evitar outros problemas, retiramos toda essa seção do ar.

Hoje, os Convertidos antigos não iriam fazer muito sentido, já que atualmente todos os sites são “Tableless”. Entretanto, o código de muitos sites são feitos de uma maneira, vamos dizer assim, não adequada. Por isso, levantarei a questão aqui novamente, mas farei o seguinte: durante algum tempo, pegarei partes de grandes sites conhecidos, recodificarei de uma maneira que eu acho que seria a ideal, e publicarei aqui os resultados.

Deixo bem claro que isso não passa de um estudo. Publicarei aqui os resultados para dividir com vocês o conhecimento adquirido e também ouvir as opiniões de vocês leitores.
Se houver algum desenvolvedor que trabalha nas empresas que citarei daqui pra frente, por favor, pode entrar em contato comigo se preferir. Vamos conversar em como a Visie pode ajudar você a resolver problemas.

Você já pode ver o primeiro Convertido: Convertido – Menu (Livraria Cultura).

Posts Relacionados

• Convertidos do Tableless
• Navegando com a jQuery
• Performance do seu CSS
• Produtividade: editores e snippets
• Convertido – Menu (Livraria Cultura)

$('p') // Chama todos os paragrafos
$('.menu') // Chama os elementos que contenham a classe menu
$('#caixas .chamada') // Chama os elementos .chamada que estão dentro de #caixas
$('.menu, .box') // Chama a classe menu e a classe box
$('#lista *') // Chama todos os elementos que estão dentro de #lista

A jQuery ainda implementa algumas chamadas especiais, baseadas no CSS3.

$('#menu > li') // chama os li's filhos direto de #menu, exclui #menu li li
$('label + input') // chama apenas os inputs que tiveram um label antes <label></label> <input />
$('.galeria ~ .fotos') // chama todas as .fotos que estão no mesmo nivel e após .galeria
$('#menu li:fist') // Chama apenas o primeiro li dentro de #menu
$('table tr:even') // Chama apenas os tr's impares
$('tr[colspan=2]') // Chama os tr's que contenham o atributo colspan definido como 2
$('form :text')  // Chama os inputs com type definido como text, caixas de texto

A lista completa pode ser encontrada no site oficial da jQuery bem documentada e com exemplos para cada caso. Com a seleção na cabeça, podemos aplicar efeitos (hide, show, fadeIn, fadeOut, slideUp, slideDown por exemplo) nos elementos que selecionarmos, colocar atributos para estes elementos como css ou mesmo colocar eventos neles, ou seja, funções que rodam quando você faz alguma coisa com eles, como por exemplo clicar, passar o mouse em cima, dar dois cliques, colocar o cursor na caixa de texto e assim por diante.

Em um exemplo prático, vamos fazer um menu com submenus onde não precisamos nos preocupar em adicionar classes e tudo mais. Primeiro vamos implantar o HTML, assim podemos fazer um belo menu semântico. Se quiser, aplique também um belo CSS, mas não se esqueça: não suma com os submenus neste momento, afinal, se o browser do usuário não possuir javascript ele não poderá mostrá-los. Então deixe os submenus à mostra porque depois vamos escondê-los via javascript.

<ul id="menu">
<li><a href="inicio">Inicio</a></li>
<li><a href="#" title="Estas são as categorias do meu site">Categorias</a>
<ul>
<li><a href="ferramentas">Ferramentas</a></li>
<li><a href="downloads">Downloads</a></li>
<li><a href="templates">Templates</a></li>
</ul>
</li>
<li><a href="#" title="Artigos técnicos">Artigos</a>
<ul>
<li><a href="tableless">Tableless</a></li>
<li><a href="javascript">JavaScript</a></li>
<li><a href="php">PHP</a></li>
<li><a href="#">Banco de dados</a>
<ul>
<li><a href="mysql">MySQL</a></li>
<li><a href="postgree">PostGree</a></li>
</ul>
</li>
<li><a href="python">Python</a></li>
</ul>
</li>
</ul>

Note que não há qualquer referência a quem é pai ou filho de sebmenu. Vamos usar as chamadas da própria jQuery para encontrar quem tiver submenu. O resultado deste menu, já com CSS aplicado pode ser visto aqui.

Agora, vamos desaparecer com os submenus de forma dinâmica. Lembre-se que não podemos aplicar a jQuery em qualquer lugar, afinal o html pode ainda não ter sido gerado quando o script rodar, então colocamos o “desaparecimento” dentro da função de carregamento da própria jQuery. Isto fará com que nosso script só seja executado quando todo o HTML for carregado.

<script type="text/javascript">
$(function(){ // Inicio da função de carregamento
$('#menu ul').hide()
}) // Fim da função de carregamento
</script>

Com uma simples linha, sumimos com os submenus com a função hide(), note que usamos os próprios atributos para os quais chamamos esses submenus com CSS. Veja como desaparecemos com os submenus de uma forma simples e fácil.

Agora, a dinâmica! Vamos usar a chamada aos submenus usando como referencia os links que tenham como href o valor de # (tralha, sustenido, lasagna, jogo-da-velha, plus, ou como você quiser chamar). Fica assim:

$('#menu a[href=#]')

Assim, filtramos todos os nossos links pegando somente os links dentro de #menu que tenham o href como #.

Neles vamos implantar os comandos de click para mostrar o menu e o submenu, mas primeiro precisamos navegar entre os elementos. Para isso, usamos next ou prev, funções próprias da jQuery que navega entre o elemento que estiver após ou antes (respectivamente) do elemento em questão. Levando em conta que as funções de ação da jQuery (click/hover/toogle/etc) recebem como parâmetro this o elemento que recebeu a ação temos:

$('a[href=#]').click(function(){
this // é o elemento "a" (link) que foi clicado naquele momento
})

Então vamos navegar até o submenu, que é o elemento que está após o link:

$('a[href=#]').click(function(){
$(this).next() // Agora sim, com base no link (dinamicamente) temos o submenu
}

Perceba que apesar de recebermos em this o elemento, precisamos usar mais uma vez a jQuery pois se trata do elemento em si e não uma chamada à ele via jQuery.

Agora sim, podemos sumir ou aparecer com os submenus, usando o slideToggle da jQuery vemos como isso é implantado de forma simples e prática. Precisamos aplicar também um return false para cancelar a navegação do link, afinal ele não deixou de ser um link.

$('a[href=#]').click(function(){
$(this).next().slideToggle() // Some, aparece, some, aparece, incrivelmente simples com a jQuery
return false
}

Com apenas seis linhas de código (real) concluímos um menu com submenu dinâmico, navegando entre os elementos com a jQuery. Ainda aplicamos uma animação para esse submenu. O resultado pode ser visto aqui.

Um dos motivos pelos quais a jQuery é uma das bibliotecas mais incríveis de se trabalhar porque seu aprendizado é simples e prático. Vale a pena investir um tempo para aprender a usá-la.

Posts Relacionados

• jQuery é bom para designers
• Convertidos de volta
• Ah, o maravilhoso mundo real
• Digest 05/09: Javascript, JQuery
• Palestras da Visie

Dessa forma, muitos códigos proprietários solucionavam problemas em determinado browser, que faziam o programador javascript (sim, isso já foi cargo) fazer muita volta para solucionar em outro browser. Isso acarretava em problemas imensos em manutenção. O cliente, em um belo domingo de sol ligava e dizia que o formulário estava “pulando”, muitas vezes acompanhado de um não sei nem o que é browser/navegador: “eu dou dois cliques no ícone da internet e entro”. Então lá ia o programador e precisava revisar dois, três códigos que faziam a mesma coisa em navegadores diferentes.

Ainda bem que, assim como o HTML e o CSS, o JavaScript também sofreu sua padronização, facilitando a criação de scripts que facilitam muito a vida do designer, deixando o designer cada vez mais feliz sem precisar consultar um programador. Uma dessas soluções foi a biblioteca jQuery. Uma biblioteca tão simples que designers conseguem fazer ótimos efeitos com apenas algumas linhas de comando.

Vamos a um exemplo/tutorial prático: um menu com submenus. Quando a pessoa clicar no link o submenu deve aparecer, com um efeito de slide.

Para o html usamos uma marcação simples, indicando quem é o menu e quem é o submenu.

Item 1
Item 2

SubItem 1
SubItem 2
SubItem 3

Item 3
Item 4
Item 5

Para ativar o jQuery você precisa baixá-la do site oficial (é apenas um aquivo js pequenininho) e coloque-a de preferencia na pasta ou em uma subpasta de onde está seu aquivo html, precisamos colocar a seguinte linha (de preferencia entre as tags <head> e </head> ):

<script type="text/javascript" src="pasta/onde/está/a/jquery.js"></script>

Após a inclusão da jQuery podemos usá-la sem problemas. Coloque seu código entre as tags <script> e <script> depois da chamada da jQuery. Tenha em mente que todo o que você vai fazer é chamado pela chave $ e interligamos os comandos com pontos. Então, para chamarmos o elemento que queremos colocar uma ação, no caso clicar, usamos a chave $ e para referenciamos, usamos as mesmas chamadas que usamos para o css.

$('ul.menu li.itemPai')

Agora, linkamos esse objeto com a ação click, ou seja quando a pessoa clicar no link propriamente dito.

$('ul.menu li.itemPai').click()

E passamos para ele uma função que fará nosso efeito de slide.

$('ul.menu li.itemPai').click(function(){
// Aqui virá a função
})

Agora, a função que fará o efeito. Chamamos com a chave $ quem queremos animar e o linkamos com o tipo de animação. Para o efeito de slide (ou seja, encolher e esticar o elemento dando a ilusão de que ele está saindo de trás do outro elemento para baixo) a jQuery tem dois efeitos prontos que são: slideUp que recolhe o elemento e slideDown que expande o elemento. Ainda temos o slideToggle, que recolhe o elemento se estiver expandido ou vice-versa. Então iremos usar slideToggle para este efeito. Também usamos o return false para fazer com que o link não seja executado, retirando o usuario da nossa página.

$('ul.menu li.itemPai').click(function(){
$('.menu .submenu').slideToggle()
return false
})

E voilá, o efeito está pronto. Exceto por um problema… Se você colocar este script antes do seu menu, ele não vai funcionar porque você esta referenciando um elemento que ainda não existe para o navegador, logo ele não pode referenciar ninguém. Uma solução seria colocar o seu script após o seu código html, mas isso vai contra uma das práticas de tableless que é trabalhar com camadas e, assim como o CSS, não é interessante deixar ele entre o código html por n razões. A outra solução faz parte do escopo do jQuery que faz com que seu script só rode após o carregamento completo do seu código html. Para isso basta criar uma função que englobe seu script dentro da chave $. Ficando assim:

$(function(){
$('ul.menu li.itemPai').click(function(){
$('.menu .submenu').slideToggle()
return false
})
})

Isto resolve nosso problema. Agora, precisamos esconder nosso submenu quando a página carregar. Fazemos isso via javascript e não via css porque não queremos que o menu fique invisivel para pessoas que não usam javascript. Para isso, a jQuery tem a função hide que esconde um elemento (display:none). Se você quiser fazer o contrario, basta usar show no lugar de hide.

E esse é o nosso script final que pode ser visto aqui e aqui com aplicação de CSS básico. O interessante da jQuery é que ela é bem inuitiva e tem muitas coisas que já vem no escopo dela que resolvem muitos problemas que os designers querem desenvolver, mas não querem que um programador faça por ser uma coisa tão simples de fazer. jQuery é a parte da programação que os designers sentiam falta e muitas vezes contornavam com um arquivo flash que destruia a semantica de área como o menu que acabamos de construir.

Posts Relacionados

• Navegando com a jQuery
• jQuery: métodos desconhecidos
• 20 plugins jQuery que marcaram 2011
• Testando seu código jQuery com Jasmine – Parte 1
• Alternativas ao jQuery