drop down menu vertical com css
TRANSCRIPT
http://maujor.com/tutorial/ddownmenu-a.php
Drop Down menu vertical com CSSNota: Se você está procurando a versão 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/
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 de scripts necessários para fazer funcionar estes tipos de menus. Mas, usando-se uma marcação HTML estruturada e regrasCSS simples é possível criar menus drop-down de raro apelo visual, fáceis de editar e atualizar e que funcionem 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ê deve estar 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 criar a estrutura é através de uma lista não ordenada, com cada um dos sub-menus constituidos por outra lista não ordenada dentro da primeira. Parece complicado? É bem direto, observe:
<ul> <li><a href="#">Home</a></li> <li><a href="#">About</a> <ul> <li><a href="#">History</a></li> <li><a href="#">Team</a></li> <li><a href="#">Offices</a></li> </ul> </li> <li><a href="#">Services</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">Internet Marketing</a></li> <li><a href="#">Hosting</a></li> <li><a href="#">Domain Names</a></li> <li><a href="#">Broadband</a></li> </ul> </li>
<li><a href="#">Contact Us</a> <ul> <li><a href="#">United Kingdom</a></li> <li><a href="#">France</a></li> <li><a href="#">USA</a></li> <li><a href="#">Australia</a></li> </ul> </li>
</ul>
É isso aí: um HTML simples, ao mesmo tempo acessível e fácil de editar.
http://maujor.com/tutorial/ddownmenu-a.php
Visualmente atraente?
Se você visitou a página contendo a visão 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 indentação próprias das listas não ordenadas e definiremos uma largura para os itens do menu.
ul {margin: 0;padding: 0;list-style: none;width: 150px;
}
A seguir precisamos posicionar os itens da lista. Felizmente os itens são renderizados um embaixo do outro, por padrão, que é justamente o que nós queremos. Contudo vamos definir o posicionamento com o valorrelative, porque iremos posicionar os sub-menus de modo absoluto em relação a eles, itens.
ul li {position: relative;
}
Próximo passo, são os sub-menus. Queremos cada sub-menu ao lado direito do seu elemento pai (item) quando passarmos o mouse sobre ele, item.
li ul {position: absolute;left: 149px;top: 0;display: none;
}
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 consequência não apareça uma borda dupla. (Você verá este efeito adiante.)
Também definimos display como “none,” pois não queremos 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 estilizar nossos links.
ul li a {display: block;text-decoration: none;color: #777;background: #fff;padding: 5px;border: 1px solid #ccc;border-bottom: 0;
}
Eu estilizei os links de acordo com minhas preferências 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.
http://maujor.com/tutorial/ddownmenu-a.php
Bem, as coisas agora parecem um pouco melhor, muito embora usuários com Internet Explorer não concordem. Lamentavelmente o IE Win interpreta as quebras de linha entre os itens de lista, como espaços vazios e assim para o IE os itens do menu não se assentam um sobre o outro. Contudo existe uma maneira de corrigir este bug do IE:
/* Fix IE. Hide from IE Mac \*/* html ul li { float: left; }* html ul li a { height: 1%; }
/* End */
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 declaração height: 1% que foi definida. Lamentavelmente (outra vez!) a propriedade float usada no hack faz aparecer outro bug no IE, que requer a declaração de um valor para height a fim 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:
ul {margin: 0;padding: 0;list-style: none;width: 150px;border-bottom: 1px solid #ccc;
}
Com alguma dose de sorte, todos agora estaremos aptos a visualizar o menu não funcionando.
Fazendo funcionar
Agora o pulo! Precisamos fazer 'aparecer' os sub-menus quando passamos o mouse sobre o item.
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 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 oIE.Um 'pouquinho' de JavaScript será necessário para trazer o IE à ação. (line wraps marked » — Ed.):
startList = function() {if (document.all&&document.getElementById) {navRoot = document.getElementById("nav");for (i=0; i<navRoot.childNodes.length; i++) {node = navRoot.childNodes[i];if (node.nodeName=="LI") {node.onmouseover=function() {this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace
(" over", ""); } } } }
http://maujor.com/tutorial/ddownmenu-a.php
}
window.onload=startList;
Muito grato e apreciado à Patrick Griffiths e Dan Webb, que mostraram esta dica em um artigo no ,Suckerfish Dropdowns. Obrigado, rapazes!
Então, a regra para hover agora é:
li:hover ul, li.over ul {
display: block; }
Adicionalmente precisamos referenciar o JavaScript com nosso ul, principal, assim:
<ul id="nav">
Esperamos então, agora com as coisas nos seus lugares, que todos sejamos capazes de visualizar uma versão simples 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 sobre determinados itens. Este problema é facilmente resolvido modificando nosso hack como mostrado a seguir:
/* Fix IE. Hide from IE Mac \*/* html ul li { float: left; height: 1%; }* html ul li a { height: 1%; }
/* End */
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 além do menu, os links desaparecem antes que se tenha tempo de clicá-los. Estranho! Tente você mesmo.
Faça 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 estilização e criar seu próprio menu. Para servir de 'aperitivo' um menu com mais apelo visual. Eu o preparei antes. Divirta-se!
Nota: Se você está procurando a versão horizontal deste menu consulte um tutorial publicado pelo Yogodoshi emAprenda a criar um menu drop-down com CSS e Javascript.
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 código abaixo.)
<ul> <li><a href="#">Home</a></li> <li><a href="#">About</a> <ul> <li><a href="#">History</a></li>
http://maujor.com/tutorial/ddownmenu-a.php
<li><a href="#">Team</a></li> <li><a href="#">Offices</a></li> </ul> </li> <li><a href="#">Services</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">Internet Marketing</a></li> <li><a href="#">Hosting</a>
<ul> <li><a href="#">Dedicated</a></li> <li><a href="#">Virtual</a></li> <li><a href="#">Shared</a></li> <li><a href="#">Managed</a></li> </ul>
</li> <li><a href="#">Domain Names</a></li> <li><a href="#">Broadband</a></li> </ul> </li>
<li><a href="#">Contact Us</a> <ul> <li><a href="#">United Kingdom</a></li> <li><a href="#">France</a></li> <li><a href="#">USA</a></li> <li><a href="#">Australia</a></li> </ul>
</li>
</ul>
Bem claro e direto, mas esteja ciente de que este exemplo descreve a técnica para construção 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 CSS necessárias são mostradas a seguir:
li:hover ul ul, li.over ul ul { display:none; }
li:hover ul, li li:hover ul, li.over ul, li li.over ul { display: block;
} /* Aqui a magica */
Estas regras devem substituir as antigas regras abaixo:
li:hover ul, li.over ul { display: block;
}
http://maujor.com/tutorial/ddownmenu-a.php
E, como você deve ter notado, incluimos regra CSS para o Internet Explorer (.over ul), já que este navegador não 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 código JavaScript para isto. Felizmente os criadores doSuckerfish Dropdown , aperfeiçoaram o código JavaScript original de modo 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 colocado no código)
over = function() {var sfEls = document.getElementById("nav").»
getElementsByTagName("LI");for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {this.className+=" over";
}sfEls[i].onmouseout=function() {
this.className=this.className.»replace(new RegExp(" over\\b"), "");
}}
}
if (window.attachEvent) window.attachEvent("onload", over);
É isso ai
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, estilização 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 construção 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 aperfeiçoou o menu original, permitindo acresentar sub-sub-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 fáceis para implementar o menu em uma situação real. Para os mais impacientes aqui temos 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, o seu elemento pai permanece em destaque. Eu adicionei uma flexinha para indicar os links que contém sub-menus. É claro que você poderá usar qualquer elemento visual para indicar a existência de sub-menu, simplesmente modificando as CSS.
Eu acresentei também uma funcionalidade que permite usar três camadas de sub-menus. Pessoalmente eu acredito que usar três camadas de sub-menu é muito pouco usual, mas esta funcionalidade facilitará o trabalho de quem tiver pensando em implementá-lo. De toda forma, é possível extender o menu para tantas camadas quanto você queira e para agilizar o seu trabalho dê uma olhada na CSS no código fonte da página do menu.
A última modificação que fiz foi usar tamanhos relativos para as fontes de modo que o redimensionamento de textos agora funciona no Internet Explorer para Windows.
http://maujor.com/tutorial/ddownmenu-a.php
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 o funcionamento do menu no Internet Explorer
Como funciona o menu
Não vou entrar aqui em explicações sobre o funcionamento do menu já que isto foi feito no artigo anterior. Se você não leu este artigo, dê uma olhada na Parte 1 do tutorial. Acredito que não haverá dificuldades no entendimento do menu se você olhar no código fonte da página do menu.
Fim
OK, é isso ai. Se você tiver qualquer observação sobre o menu, poderá comentar no artigo original em inglês.