Tags & Hacks Tutoriais

Dynamic Highlight Menu

26 de May de 2008

Adiciona ao menu de navegação do seu wordpress efeito hover na página que está sendo visualizada.
Página original do tutorial: webdesignerwall.com

01. Esse tutorial será baseado nesse menu. Caso use algum outro, faça as devidas modificações.
02.Troque então:

<div id="menu">
<ul>
<li><a href="http://www.link1.com">Link 1</a></li>
<li><a href="http://www.link2.com">Link 2</a></li>
<li><a href="http://www.link3.com">Link 3</a></li>
</ul>
</div>

Por

<div id="menu">
<ul>
<li<?php if ( is_home() || is_category() || is_archive() || is_search() || is_single() || is_date() ) { echo ' class="current"'; } ?>><a href="<?php bloginfo('siteurl'); ?>">Home</a></li>
<li<?php if ( is_page('domínio') ) { echo ' class="current"'; } ?>><a href="<?php bloginfo('siteurl'); ?>/dominio">Domínio</a></li>
<li<?php if ( is_page('links') ) { echo ' class="current"'; } ?>><a href="<?php bloginfo('siteurl'); ?>/links">Links</a></li>
</ul>
</div>

03. Veja que o primeiro link, adiciona efeito hover as páginas: index, categorias, arquivos, busca e data. Se quiser adicionar ou retirar alguma é só remover do código.

04. Nos demais links, observe e altere:

is_page('domínio') - onde dominio é o nome da página mostrada, você pode usar a ID se desejar.
http://true-luv.com/dominio - onde http://true-luv.com mostra o endereço do seu blog e /dominio a página a ser mostrada. Aqui também pode ser usada a ID se desejar.

O resultado deve ser semelhante a esse:

heart


Leia Também

Deixe seu comentário

06/03/2010 ・ 10:40

Estava a procura deste tutorial! Obrigada!