Voltar para o site

Drop-Down menu vertical - Parte 2 e Parte 3

Publicado em: 19/09/2005
Atualizado em: 10/03/2011

Autor: Nick Rigby
URL do original: https://www.nickrigby....horizontal-style-pt-2
https://www.nickrigby....horizontal-style-pt-3
Título original: Drop-Down Menus, Horizontal Style Pt2 and Pt3
Traduzido com autorização expressa do autor

Introdução

« Ir para a Parte 1

Já se vai mais de um mês que meu artigo foi publicado em ALA Article e minha caixa de mensagens ficou cheia de e-mails com dúvidas e perguntas sobre o menu. A dúvida 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 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 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> 
        <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; 
	}

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 do Suckerfish 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 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, 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.

Compatibilidade

Este menu foi testado nos seguintes navegadores:

* 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.

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.

topo