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:
- jQuery: Como evitar problemas com animate()
- Colunas com alturas iguais com JavaScript
- Ajax com jQuery – Método load()
- Ebook grátis de JankoAtWarpSpeed: Os melhores tutoriais
- Live event binding com jQuery 1.3
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?
Coisas que você pode fazer a partir daqui:
- Inscrever-se no Pinceladas da Web - XHTML, CSS, JavaScript e WebStandards usando o Google Reader
- Comece a usar o Google Reader para manter-se facilmente atualizado com todos os seus sites favoritos
0 comentários:
Postar um comentário