:: Drop-Down menu vertical ::

Este tutorial foi atualizado em: 10/03/2011 Nota: Se voc est procurando a verso horizontal deste menu consulte um tutorial publicado pelo Yogodoshi emAprenda a criar um menu drop-down com CSS e Javascript.
Autor: Nick Rigby URL do original: http://www.alistapart.com/articles/horizdropdowns/ Ttulo original: Drop-Down Menus, Horizontal Style Translated with the permission of A List Apart Magazine and the author. Permissions and copyrights at: http://www.alistapart.com/copyright/

Qualquer um que tenha projetado um menu dropdown estar familiarizado com a grande quantidade de scripts necessrios para fazer funcionar estes tipos de menus. Mas, usando-se uma marcao HTML estruturada e regras CSS simples possvel criar menus drop-down de raro apelo visual, fceis de editar e atualizar e que funcionem perfeitamente em vriados tipos de browsers, inclusive no Internet Explorer. Melhor ainda, para designers zelosos de seus cdigos, nenhum JavaScript necessrio! (Na verdade, um 'pouquinho' de JavaScript necessrio, mas nada to complicado, como voc deve estar imaginando.) Aqui temos uma viso antecipada do menu em ao. Criando o menu O primeiro e mais importante passo na criao do menu a definio de sua estrutura. A melhor maneira de se criar a estrutura atravs de uma lista no ordenada, com cada um dos sub-menus constituidos por outra lista no ordenada dentro da primeira. Parece complicado? bem direto, observe:
view source print?

01.<ul> 02.<li><a 03.<li><a 04.<ul> 05.<li><a 06.<li><a 07.<li><a 08.</ul> 09.</li> 10.<li><a

href="#">Home</a></li> href="#">About</a> href="#">History</a></li> href="#">Team</a></li> href="#">Offices</a></li>

href="#">Services</a>

11.<ul> 12.<li><a href="#">Web Design</a></li> 13.<li><a href="#">Internet 14.Marketing</a></li> 15.<li><a href="#">Hosting</a></li> 16.<li><a href="#">Domain Names</a></li> 17.<li><a href="#">Broadband</a></li> 18.</ul> 19.</li> 20. 21.<li><a href="#">Contact Us</a> 22.<ul> 23.<li><a href="#">United Kingdom</a></li> 24.<li><a href="#">France</a></li> 25.<li><a href="#">USA</a></li> 26.<li><a href="#">Australia</a></li> 27.</ul> 28.</li> 29.</ul>

isso a: um HTML simples, ao mesmo tempo acessvel e fcil de editar. Visualmente atraente? Se voc visitou a pgina contendo a viso antecipada do menu (link l em cima), visualizou uma entediante lista de itens. E, eu prometo iremos torn-la mais atrativa! Vamos adicionar-lhe estilos. Primeiramente removeremos as marcas (bullets) e a indentao prprias das listas no ordenadas e definiremos uma largura para os itens do menu.
view source print?

1.ul { 2.margin: 0; 3.padding: 0; 4.list-style: none; 5.width: 150px; 6.}

A seguir precisamos posicionar os itens da lista. Felizmente os itens so renderizados um embaixo do outro, por padr&atilde;o, que justamente o que ns queremos. Contudo vamos definir o posicionamento com o valorrelative, porque iremos posicionar os sub-menus de modo absoluto em relao a eles, itens.
view source print?

1.ul li { 2.position: relative; 3.}

Prximo passo, so os sub-menus. Queremos cada submenu ao lado direito do seu elemento pai (item) quando passarmos o mouse sobre ele, item.
view source print?

1.li ul { 2.position: absolute; 3.left: 149px; 4.top: 0; 5.display: none;

6.}

Usando as propriedades CSS left e top posicionamos de modo absoluto cada sub-menu ao lado de seu item pai. Voc deve ter notado que eu defini para a propriedade left o valor de 149px (1px menor que a largura dos itens do menu), isto faz com que os sub-menus transpassem o menu e em consequncia no aparea uma borda dupla. (Voc ver este efeito adiante.) Tambm definimos display como none, queremos os sub-menus visveis por padro. pois no

Bem, agora j temos nosso framework no lugar, mas isto ainda est com um visual bem precrio. Vamos estilizar nossos links.
view source print?

01.ul li a { 02.display: block; 03.text-decoration: none; 04.color: #777; 05.background: #fff; 06.padding: 5px; 07.border: 1px solid #ccc; 08.border-bottom: 0; 09.}

Eu estilizei os links de acordo com minhas preferncias pessoais, mas claro, voc pode estilizar segundo as suas necessidades. importante definir display como block, para garantirmos que cada link ocupar toda a a largura definida para o item da lista. Bem, as coisas agora parecem um pouco melhor, muito embora usurios com Internet Explorer no concordem. Lamentavelmente o IE Win interpreta as quebras de linha entre os itens de lista, como espaos vazios e assim para o IE os itens do menu no se assentam um sobre o outro. Contudo existe uma maneira de corrigir este bug do IE:
view source print?

1./* Fix 2.* html 3.* html 4./* End

IE. Hide from IE Mac \*/ ul li { float: left; } ul li a { height: 1%; } */

Podemos aplicar o Holly Hack acima, que esconde estas regras CSS de todos os browsers menos do IE Win. Perfeito. Voc deve ter notado a declarao height: 1% que foi definida. Lamentavelmente (outra vez!) a propriedade float usada no hack faz aparecer outro bug

no IE, que requer a declarao de um valor para height a fim de fazer os links elementos nvel de bloco. Voc deve ter notado tambm que se faz necessrio 'fechar' o menu, e isto pode ser feito adicionando-se uma borda no fim da lista. E, as regras CSS para ul so:
view source print?

1.ul { 2.margin: 0; 3.padding: 0; 4.list-style: none; 5.width: 150px; 6.border-bottom: 1px solid #ccc; 7.}

Com alguma dose de sorte, todos agora estaremos aptos a visualizar o menu no funcionando. Fazendo funcionar Agora o pulo! Precisamos fazer 'aparecer' os sub-menus quando passamos o mouse sobre o item.
view source print?

1.li:hover ul { display: block; }

Oba...aqui nosso menu em ao. Woo hoo! Funciona! ouo 1% de vocs exclamar. Sinistro! OK, OK, droga, o IE/Win tinha que arruinar tudo e no se comportar em conformidade. O IE/Win somente suporta a pseudo classe:hover aplicada a um link assim li:hover que faz os sub-menus aparecer, nada significa para o IE. Um 'pouquinho' de JavaScript ser necessrio para trazer o IE ao. (line wraps marked Ed.):
view source print?

01.startList = function() { 02.if (document.all&&document.getElementById) { 03.navRoot = document.getElementById("nav"); 04.for (i=0; i<navRoot.childNodes.length; i++) { 05.node = navRoot.childNodes[i]; 06.if (node.nodeName=="LI") { 07.node.onmouseover=function() { 08.this.className+=" over"; 09.} 10.node.onmouseout=function() { 11.this.className=this.className.replace 12.(" over", ""); 13.} 14.} 15.} 16.} 17.} 18.window.onload=startList;

Muito grato e apreciado Patrick Griffiths e Dan Webb, que mostraram esta dica em um artigo no , Suckerfish Dropdowns. Obrigado, rapazes!

Ento, a regra para hover agora :

view source print?

1.li:hover ul, li.over ul { 2.display: block; 3.}

Adicionalmente precisamos referenciar o JavaScript com nosso ul, principal, assim:

view source print?

1.<ul id="nav">

Esperamos ento, agora com as coisas nos seus lugares, que todos sejamos capazes de visualizar uma verso simples do menu em ao.
IE5.01 Jumping Menu Bug

Quem estiver usando IE5.01 em Windows notar que o menu tende a 'saltar' quando passamos o mouse sobre determinados itens. Este problema facilmente resolvido modificando nosso hack como mostrado a seguir:
view source print?

1./* Fix 2.* html 3.* html 4./* End

IE. Hide from IE Mac \*/ ul li { float: left; height: 1%; } ul li a { height: 1%; } */

Um misterioso bug no IE6 :

Durante o desenvolvimento deste artigo, eu descobri um estranho bug, que acredito acontecer apenas no IE6. Devemos declarar um background para li a, pois quando um sub-menu estende-se verticalmente alm do menu, os links desaparecem antes que se tenha tempo de clic-los. Estranho! Tente voc mesmo. Faa voc mesmo isso a! Uma maneira standard para criar um interessante drop-down menu horizontal. Tudo o que voc tem a fazer agora personalizar a estilizao e criar seu prprio menu. Para servir de 'aperitivo' um menu com mais apelo visual. Eu o preparei antes. Divirta-se! NT: O autor publicou dois artigos posteriores, mostrando como acresentar mais camadas de sub-sub-menus e incrementando o menu atual. Traduzi tais artigos em 2005-9-19 e voc poder continuar lendo a Parte 2

:: Drop-Down menu vertical - Parte 2 e Parte 3 ::

Este tutorial foi atualizado em: 10/03/2011 Nota: Se voc est procurando a verso horizontal deste menu consulte um tutorial publicado pelo Yogodoshi emAprenda a criar um menu drop-down com CSS e Javascript.
Autor: Nick Rigby URL do original: http://www.nickrigby....horizontal-style-pt-2 http://www.nickrigby....horizontal-style-pt-3 Ttulo original: Drop-Down Menus, Horizontal Style Pt2 and Pt3 Traduzido com autorizao expressa do autor

Ir para a Parte 1 J se vai mais de um ms que meu artigo foi publicado em ALA Article e minha caixa de mensagens ficou cheia de e-mails com dvidas e perguntas sobre o menu. A dvida mais comum foi a de como adicionar mais uma camada pop-up, ou seja um sub-menu nos sub-menus. Felizmente isto simples e aqui temos uma viso antecipada do menu que pretendemos criar. Modificando a lista Como voc j deve ter percebido, precisaremos adicionar mais um elemento ul na nossa lista original para criar um sub-sub-menu. Observe abaixo: (NT: O elemento que adicionamos est em destaque no cdigo abaixo.)
view source print?

01.<ul> 02.<li><a 03.<li><a 04.<ul> 05.<li><a 06.<li><a 07.<li><a 08.</ul> 09.</li> 10.<li><a 11.<ul> 12.<li><a 13.<li><a

href="#">Home</a></li> href="#">About</a> href="#">History</a></li> href="#">Team</a></li> href="#">Offices</a></li>

href="#">Services</a> href="#">Web Design</a></li> href="#">Internet Marketing</a></li>

14.<li><a 15. 16.<ul> 17.<li><a 18.<li><a 19.<li><a 20.<li><a 21.</ul> 22. 23.</li> 24.<li><a 25.<li><a 26.</ul> 27.</li> 28. 29.<li><a 30.<ul> 31.<li><a 32.<li><a 33.<li><a 34.<li><a 35.</ul> 36. 37.</li> 38.</ul>

href="#">Hosting</a>

href="#">Dedicated</a></li> href="#">Virtual</a></li> href="#">Shared</a></li> href="#">Managed</a></li>

href="#">Domain Names</a></li> href="#">Broadband</a></li>

href="#">Contact Us</a> href="#">United Kingdom</a></li> href="#">France</a></li> href="#">USA</a></li> href="#">Australia</a></li>

Bem claro e direto, mas esteja ciente de que este exemplo descreve a tcnica para construo de somente mais uma camada de sub-menu. Modificando o CSS Precisaremos adicionar algumas regras a mais nas CSS, para fazer funcionar o sub-sub-menu. Estas regras CSSnecessrias so mostradas a seguir:
view source print?

1.li:hover ul ul, li.over ul ul { 2.display:none; 3.} 4. 5.li:hover ul, li li:hover ul, li.over ul, 6.li li.over ul { 7.display: block; 8.} /* Aqui a magica */

Estas regras devem substituir as antigas regras abaixo:

view source print?

1.li:hover ul, li.over ul { 2.display: block; 3.}

E, como voc deve ter notado, incluimos regra CSS para o Internet Explorer (.over ul), j que este navegador no suporta a pseudo classe hover no elemento li. Um novo Javascript Como voc j deve estar sabendo, o Internet Explorer precisa de regras adicionais para fazer funcionar o estado hover e assim devemos acresentar algum cdigo JavaScript para isto. Felizmente os criadores do Suckerfish

Dropdown , aperfeioaram o cdigo JavaScript original de modo a que faa funcionar um sub-sub-menu (Legal!). Ento, por favor substitua o arquivo drop_down.js (NT: usado na Parte 1 deste tutorial) pelo cdigo abaixo: (O sinal indica uma quebra de linha e no deve ser colocado no cdigo)
view source print?

01.over = function() { 02.var sfEls = document.getElementById("nav"). 03.getElementsByTagName("LI"); 04.for (var i=0; i<sfEls.length; i++) { 05.sfEls[i].onmouseover=function() { 06.this.className+=" over"; 07.} 08.sfEls[i].onmouseout=function() { 09.this.className=this.className. 10.replace(new RegExp(" over\\b"), ""); 11.} 12.} 13.} 14.if (window.attachEvent) window.attachEvent("onload", over);

isso a Espero que a partir de agora voc possa incluir sub-sub menus ao seu menu. Veja mais uma vez o menu que acabamos de criar. Divirta-se! Drop-Down menus, estilizao horizontal - Parte 3 NT: Nick Rigby publicou a Parte 3 deste tutorial que traduzo a seguir J faz algum tempo que meu artigo original para construo de um drop-down menu foi publicado em A List Apart. Eu recentemente criei uma Parte 2 para o menu , (NT: Trata-se do artigo traduzido acima) que aperfeioou o menu original, permitindo acresentar subsub-menu, contudo ainda assim recebi uma grande quantidade de emails perguntando como implementar o menu. Este artigo incrementa mais ainda o menu e espero que torne as coisas mais fceis para implementar o menu em uma situao real. Para os mais impacientes aqui temos uma viso antecipada do menu. Quais so as novidades? O aspecto visual mais importante para o menu que agora ao ser ativado um submenu ou sub-sub-menu, o seu elemento pai permanece em destaque. Eu adicionei

uma flexinha para indicar os links que contm sub-menus. claro que voc poder usar qualquer elemento visual para indicar a existncia de sub-menu, simplesmente modificando as CSS. Eu acresentei tambm uma funcionalidade que permite usar trs camadas de sub-menus. Pessoalmente eu acredito que usar trs camadas de sub-menu muito pouco usual, mas esta funcionalidade facilitar o trabalho de quem tiver pensando em implement-lo. De toda forma, possvel extender o menu para tantas camadas quanto voc queira e para agilizar o seu trabalho d uma olhada na CSS no cdigo fonte da pgina do menu. A ltima modificao que fiz foi usar tamanhos relativos para as fontes de modo que o redimensionamento de textos agora funciona no Internet Explorer para Windows. Compatibilidade Este menu foi testado nos seguintes navegadores: Windows o Internet Explorer 6 o Internet Explorer 5.5 o Internet Explorer 5.01 o Opera 7+ o Netscape 7+ o Firefox 1+ Macintosh o Safari 1+ o Firefox 1+ o Internet Explorer 5.2 o Opera 7+ o Netscape 7+ o Camino 0.8.4 * Notar que um cdigo JavaScript essencial para o funcionamento do menu no Internet Explorer

Como funciona o menu

No vou entrar aqui em explicaes sobre o funcionamento do menu j que isto foi feito no artigo anterior. Se voc no leu este artigo, d uma olhada na Parte 1 do tutorial. Acredito que no haver dificuldades no entendimento do menu se voc olhar no cdigo fonte da pgina do menu. Fim OK, isso ai. Se voc tiver qualquer observao sobre o menu, poder comentar no artigo original em ingls.