Banner propaganda da DevMedia - Cursos de desenvolvimento web

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: 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

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®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo