terça-feira, 16 de junho de 2009

Menu Accordion com jQuery

 
 

Enviado para você por Penha através do Google Reader:

 
 


Esse efeito de Accordion que vou mostrar aqui hoje pode ser usado não somente para menus, mas também para outras finalidades. É muito simples conseguir esse tipo de efeito utilizando a jQuery, que proporciona uma simplicidade ao escrever código JavaScript. A marcação HTML utilizada nesse exemplo é a seguinte:

 <dl> 	<dt><a href="http://www.pinceladasdaweb.com.br/blog/">Pinceladas da Web</a></dt> 	<dd>         <ul>             <li><a href="http://www.pinceladasdaweb.com.br/blog/category/css/">CSS</a></li>             <li><a href="http://www.pinceladasdaweb.com.br/blog/category/xhtml/">XHTML</a></li>             <li><a href="http://www.pinceladasdaweb.com.br/blog/category/webstandards/">WebStandards</a></li>         </ul> 	</dd> 	<dt><a href="http://www.cssnolanche.com.br">CSS no Lanche</a></dt> 	<dd>         <ul>             <li><a href="http://www.cssnolanche.com.br/categoria/css/">Tutoriais CSS</a></li>             <li><a href="http://www.cssnolanche.com.br/categoria/javascript/">JavaScript</a></li>             <li><a href="http://www.cssnolanche.com.br/categoria/jquery/">jQuery</a></li>         </ul> 	</dd> 	<dt><a href="http://www.jquery.com">jQuery</a></dt>     <dd>         <ul>             <li><a href="http://docs.jquery.com/Downloading_jQuery">Download</a></li>             <li><a href="http://docs.jquery.com/">Documentação</a></li>             <li><a href="http://docs.jquery.com/Tutorials">Tutoriais</a></li>         </ul>     </dd> </dl> 

Como podem ver utilizei de listas de definição e listas desordenadas para montar o menu accordion, estando com o HTML pronto, vamos ao CSS:

 body {font:1.6em Helvetica, Arial, sans-serif} a {display:block; text-decoration:none} dl {margin:0 auto; width:500px} dt {background-color:#000; border-bottom:2px solid #fff; padding:5px} dt a {color:#fff;} dd, ul {margin:0; padding:0} ul li {background-color:#EFEFEF; font-size:.6em; list-style:none} ul li a {color:#069; padding:5px} ul li a:hover {background-color:#aaa; color:#fff} 

Você pode aplicar estilos como quiser ao seu menu, só apliquei alguns estilos aqui para um melhor entendimento do efeito final. Agora o grande responsável pelos efeitos é o JavaScript, primeiramente adicione o Framework jQuery a sua página, feito isso, basta utilizar o seguinte código JavaScript:

 <script type="text/javascript"> 	$(document).ready(function(){ 		//Definimos que todos as tags dd terão display:none menos o primeiro filho 		$('dd:not(:first)').hide(); 		//Ao clicar no link, executamos a funcão 		$('dt a').click(function(){ 			//As tags dd's visíveis agora ficam com display:none 			$("dd:visible").slideUp("slow"); 			//Após, a funcão é transferida para seu pai, que procura o próximo irmão no código o tonando visível 			$(this).parent().next().slideDown("slow"); 			return false; 		}); 	}); </script> 

Como podem ver o código JavaScript está todo comentado tornando-se de fácil entendimento. Vejam aqui o exemplo criado para esse tutorial. Se quiser pode fazer o download dos arquivos do exemplo para estudo.

Isso pode lhe interessar:


Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?


Menu Accordion com jQuery


 
 

Coisas que você pode fazer a partir daqui:

 
 
TwitThis
Share |

0 comentários:

;

Pesquisa na WEB

Carregando...

assine o feed

siga no Twitter

Postagens

acompanhe

Comentários

comente também