Embed Size (px)
Citation preview
5/16/2018 Menu DropDown - slidepdf.com
http://slidepdf.com/reader/full/menu-dropdown 1/10
:: Drop-Down menu vertical ::
Este tutorial foi atualizado em: 10/03/2011
Nota: Se você está procurando a versão horizontal destemenu consulte um tutorial publicado pelo YogodoshiemAprenda a criar um menu drop-down com CSS e Javascript.
Autor: Nick Rigby
URL do original: http://www.alistapart.com/articles/horizdropdowns/
Título 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 drop-down estará familiarizado com a grande quantidade descripts necessários para fazer funcionar estes tipos demenus. Mas, usando-se uma marcação HTML estruturadae regras CSS simples é possível criar menus drop-down deraro apelo visual, fáceis de editar e atualizar e quefuncionem perfeitamente em váriados tipos de browsers,inclusive no Internet Explorer. Melhor ainda, para
designers zelosos de seus códigos, nenhum JavaScript énecessário! (Na verdade, um 'pouquinho' de JavaScript énecessário, mas nada tão complicado, como você deveestar imaginando.)Aqui temos uma visão antecipada do menu em ação.
Criando o menu
O primeiro e mais importante passo na criação do menu é
a definição de sua estrutura. A melhor maneira de se criara estrutura é através de uma lista não ordenada, com cadaum dos sub-menus constituidos por outra lista nãoordenada dentro da primeira. Parece complicado? É bemdireto, observe:view sourceprint?
01.<ul>
02.<li><a href="#">Home</a></li>
03.<li><a href="#">About</a>
04.<ul>
05.<li><a href="#">History</a></li>
06.<li><a href="#">Team</a></li>
07.<li><a href="#">Offices</a></li>
08.</ul>
09.</li>
10.<li><a href="#">Services</a>
5/16/2018 Menu DropDown - slidepdf.com
http://slidepdf.com/reader/full/menu-dropdown 2/10
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 acessível efácil de editar.
Visualmente atraente?
Se você visitou a página contendo a visão antecipada domenu (link lá em cima), visualizou uma entediante lista deitens. E, eu prometo iremos torná-la mais atrativa! Vamosadicionar-lhe estilos.
Primeiramente removeremos as marcas (bullets) e aindentação próprias das listas não 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 são renderizados um embaixo dooutro, por padrão, que é justamente o que nósqueremos. Contudo vamos definir o posicionamento com o
valorrelative, porque iremos posicionar os sub-menusde modo absoluto em relação a eles, itens.view sourceprint?
1.ul li {
2. position: relative;
3.}
Próximo passo, são os sub-menus. Queremos cada sub-menu ao lado direito do seu elemento pai (item) quandopassarmos o mouse sobre ele, item.view source
print?
1.li ul {
2. position: absolute;3.left: 149px;
4.top: 0;
5.display: none;
5/16/2018 Menu DropDown - slidepdf.com
http://slidepdf.com/reader/full/menu-dropdown 3/10
6.}
Usando as propriedades CSS “left” e “top” posicionamosde 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 itensdo menu), isto faz com que os sub-menus transpassem omenu e em consequência não apareça uma borda dupla.(Você verá este efeito adiante.)
Também definimos display como “none,” pois nãoqueremos os sub-menus visíveis por padrão.
Bem, agora já temos nosso framework no lugar, mas isto
ainda está com um visual bem precário. Vamos estilizarnossos 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 preferências
pessoais, mas é claro, você pode estilizar segundo as suasnecessidades. É importante definir display como “block,” para garantirmos que cada link ocupará toda a a larguradefinida para o item da lista.
Bem, as coisas agora parecem um pouco melhor, muitoembora usuários com Internet Explorer não concordem.Lamentavelmente o IE Win interpreta as quebras de linhaentre os itens de lista, como espaços vazios e assim parao IE os itens do menu não se assentam um sobre o outro.Contudo existe uma maneira de corrigir este bug do IE:view sourceprint?
1./* Fix IE. Hide from IE Mac \*/
2.* html ul li { float: left; }
3.* html ul li a { height: 1%; }
4./* End */
Podemos aplicar o Holly Hack acima, que esconde estasregras CSS de todos os browsers menos do IE Win.Perfeito. Você deve ter notado a declaração height:
1% que foi definida. Lamentavelmente (outra vez!) a
propriedade float usada no hack faz aparecer outro bug
5/16/2018 Menu DropDown - slidepdf.com
http://slidepdf.com/reader/full/menu-dropdown 4/10
no IE, que requer a declaração de um valor para height afim de fazer os links elementos nível de bloco.Você deve ter notado também que se faz necessário'fechar' o menu, e isto pode ser feito adicionando-se uma
borda no fim da lista. E, as regras CSS para ul são: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 avisualizar o menu não funcionando.
Fazendo funcionar
Agora o pulo! Precisamos fazer 'aparecer' os sub-menusquando passamos o mouse sobre o item.view source
print?
1.li:hover ul { display: block; }
Oba...aqui nosso menu em ação.
“Woo hoo! Funciona!” ouço 1% de vocês exclamar. “Sinistro!”
OK, OK, droga, o IE/Win tinha que arruinar tudo e não secomportar em conformidade. O IE/Win somente suporta apseudo classe:hover aplicada a um link —assim li:hover que faz os sub-menus aparecer, nadasignifica para o IE.Um 'pouquinho' de JavaScript será necessário para trazero IE à ação. (line wraps marked » — Ed .):view sourceprint?
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!
5/16/2018 Menu DropDown - slidepdf.com
http://slidepdf.com/reader/full/menu-dropdown 5/10
Então, a regra para hover agora é:view source
print?
1.li:hover ul, li.over ul {
2.display: block;
3.}
Adicionalmente precisamos referenciar o JavaScript comnosso ul, principal, assim:view source
print?
1.<ul id="nav">
Esperamos então, agora com as coisas nos seus lugares,que todos sejamos capazes de visualizar uma versãosimples do menu em ação.
IE5.01 Jumping Menu Bug
Quem estiver usando IE5.01 em Windows notará que o
menu tende a 'saltar' quando passamos o mouse sobredeterminados itens. Este problema é facilmente resolvidomodificando nosso hack como mostrado a seguir:view source
print?
1./* Fix IE. Hide from IE Mac \*/
2.* html ul li { float: left; height: 1%; }
3.* html ul li a { height: 1%; }
4./* End */
Um misterioso bug no IE6 :
Durante o desenvolvimento deste artigo, eu descobri umestranho bug, que acredito acontecer apenas no IE6.Devemos declarar um background para li a, pois quandoum sub-menu estende-se verticalmente além do menu, oslinks desaparecem antes que se tenha tempo de clicá-los.Estranho! Tente você mesmo.
Faça você mesmo
É isso aí! Uma maneira standard para criar uminteressante drop-down menu horizontal. Tudo o que vocêtem a fazer agora é personalizar a estilização e criar seupróprio menu. Para servir de 'aperitivo' um menu com mais apelo visual. Eu o preparei antes. Divirta-se!NT: O autor publicou dois artigos posteriores, mostrandocomo acresentar mais camadas de sub-sub-menus eincrementando o menu atual.Traduzi tais artigos em 2005-9-19 e você poderá continuar
lendo a Parte 2
5/16/2018 Menu DropDown - slidepdf.com
http://slidepdf.com/reader/full/menu-dropdown 6/10
:: Drop-Down menu vertical - Parte 2 eParte 3 ::
Este tutorial foi atualizado em: 10/03/2011
Nota: Se você está procurando a versão horizontal destemenu consulte um tutorial publicado pelo YogodoshiemAprenda 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
Título original: Drop-Down Menus, Horizontal Style Pt2 and Pt3
Traduzido com autorização expressa do autor
« Ir para a Parte 1Já se vai mais de um mês que meu artigo foi publicado
em ALA Article e minha caixa de mensagens ficou cheia dee-mails com dúvidas e perguntas sobre o menu. A dúvidamais comum foi a de como adicionar mais umacamada pop-up, ou seja um sub-menu nos sub-menus.Felizmente isto é simples e aqui temos uma visão 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 umsub-sub-menu. Observe abaixo:(NT: O elemento que adicionamos está em destaque nocódigo abaixo.)view source
print?
01.<ul>
02.<li><a href="#">Home</a></li>
03.<li><a href="#">About</a>
04.<ul>
05.<li><a href="#">History</a></li>
06.<li><a href="#">Team</a></li>
07.<li><a href="#">Offices</a></li>
08.</ul>
09.</li>
10.<li><a href="#">Services</a>11.<ul>
12.<li><a href="#">Web Design</a></li>
13.<li><a href="#">Internet Marketing</a></li>
5/16/2018 Menu DropDown - slidepdf.com
http://slidepdf.com/reader/full/menu-dropdown 7/10
14.<li><a href="#">Hosting</a>
15.
16.<ul>
17.<li><a href="#">Dedicated</a></li>
18.<li><a href="#">Virtual</a></li>
19.<li><a href="#">Shared</a></li>
20.<li><a href="#">Managed</a></li>
21.</ul>
22.
23.</li>
24.<li><a href="#">Domain Names</a></li>
25.<li><a href="#">Broadband</a></li>
26.</ul>
27.</li>
28.
29.<li><a href="#">Contact Us</a>
30.<ul>
31.<li><a href="#">United Kingdom</a></li>
32.<li><a href="#">France</a></li>
33.<li><a href="#">USA</a></li>
34.<li><a href="#">Australia</a></li>
35.</ul>
36.
37.</li>
38.</ul>
Bem claro e direto, mas esteja ciente de que este exemplodescreve a técnica para construção de somente mais umacamada de sub-menu.
Modificando o CSS
Precisaremos adicionar algumas regras a mais nas CSS,para fazer funcionar o sub-sub-menu. Estasregras CSSnecessárias são mostradas a seguir:view sourceprint?
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 sourceprint?
1.li:hover ul, li.over ul {
2.display: block;
3.}
E, como você deve ter notado, incluimos regra CSS parao Internet Explorer (.over ul), já que este navegadornão suporta a pseudo classe hover no elemento li.
Um novo Javascript
Como você já deve estar sabendo, o InternetExplorer precisa de regras adicionais para fazer funcionaro estado hover e assim devemos acresentar algum códigoJavaScript para isto. Felizmente os criadores do Suckerfish
5/16/2018 Menu DropDown - slidepdf.com
http://slidepdf.com/reader/full/menu-dropdown 8/10
Dropdown , aperfeiçoaram o código JavaScript original demodo a que faça funcionar um sub-sub-menu (Legal!).Então, por favor substitua o arquivo drop_down.js (NT:usado na Parte 1 deste tutorial) pelo código abaixo: (O
sinal» indica uma quebra de linha e não deve ser colocadono código)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-submenus ao seu menu. Veja mais uma vez o menu que acabamos de criar. Divirta-se!
Drop-Down menus, estilização horizontal - Parte 3
NT: Nick Rigby publicou a Parte 3 deste tutorial quetraduzo a seguir
Já faz algum tempo que meu artigo original para construção de um drop-down menu foi publicado em A List Apart. Eu recentemente criei uma Parte 2 para omenu , (NT: Trata-se do artigo traduzido acima) queaperfeiçoou o menu original, permitindo acresentar sub-sub-menu, contudo ainda assim recebi uma grande
quantidade de emails perguntando como implementar omenu. Este artigo incrementa mais ainda o menu e esperoque torne as coisas mais fáceis para implementar o menuem uma situação real. Para os mais impacientes aquitemos uma visão antecipada do menu.
Quais são as novidades?
O aspecto visual mais importante para o menu é que
agora ao ser ativado um submenu ou sub-sub-menu, oseu elemento pai permanece em destaque. Eu adicionei
5/16/2018 Menu DropDown - slidepdf.com
http://slidepdf.com/reader/full/menu-dropdown 9/10
uma flexinha para indicar os links que contém sub-menus.É claro que você poderá usar qualquer elemento visualpara indicar a existência de sub-menu, simplesmentemodificando as CSS.
Eu acresentei também uma funcionalidade que permiteusar três camadas de sub-menus. Pessoalmente euacredito que usar três camadas de sub-menu é muitopouco usual, mas esta funcionalidade facilitará o trabalhode quem tiver pensando em implementá-lo. De todaforma, é possível extender o menu para tantas camadasquanto você queira e para agilizar o seu trabalho dê umaolhada na CSS no código fonte da página do menu.
A última modificação que fiz foi usar tamanhos relativospara as fontes de modo que o redimensionamento detextos agora funciona no Internet Explorer para Windows.
Compatibilidade
Este menu foi testado nos seguintes navegadores:
• Windowso Internet Explorer 6o Internet Explorer 5.5o Internet Explorer 5.01o Opera 7+o Netscape 7+o Firefox 1+
• Macintosho Safari 1+o Firefox 1+o Internet Explorer 5.2o Opera 7+o Netscape 7+o Camino 0.8.4
* Notar que um código JavaScript é essencial para ofuncionamento do menu no Internet Explorer
Como funciona o menu
5/16/2018 Menu DropDown - slidepdf.com
http://slidepdf.com/reader/full/menu-dropdown 10/10
Não vou entrar aqui em explicações sobre ofuncionamento do menu já que isto foi feito no artigoanterior. Se você não leu este artigo, dê uma olhadana Parte 1 do tutorial. Acredito que não haverá
dificuldades no entendimento do menu se você olhar nocódigo fonte da página do menu.
Fim
OK, é isso ai. Se você tiver qualquer observação sobre omenu, poderá comentar no artigo original em inglês.
