Uma simples lista de botões pode parecer melhor do que as ligações HTML5 comuns, mas às vezes, a sua página precisa ter um esquema de navegação mais complexa. Por exemplo, você pode querer criar um sistema de menu para ajudar o usuário ver a estrutura do seu site.

Construir uma lista aninhada

Comece criando um sistema de listas aninhadas sem qualquer CSS em tudo.

No estilo CSS está no lugar ainda, mas a lista tem suas próprias complexidades:

• A lista preliminar tem três entradas. Esta é realmente uma lista de várias camadas. O nível superior indica categorias, não necessariamente ligações.

• Cada elemento no topo da lista tem a sua própria sublista. Uma segunda camada de ligações tem várias ligações na maioria dos elementos.

• O elemento de desenvolvimento de web tem outra camada de sub-listas. O layout geral desta entrada da lista corresponde a uma hierarquia complexa de informações - como a maioria dos sites complexos.

• A lista valida ao rigoroso padrão HTML. É especialmente importante para validar o seu código antes de adicionar CSS quando envolve código HTML um pouco complexa, como a lista de vários níveis. Um pequeno problema na estrutura HTML que pode passar despercebida em um documento HTML simples pode causar todos os tipos de problemas estranhos no seu CSS.

Aqui está o código para a lista aninhada em HTML simples:

Alguns dos meus links favoritos
Rede social
digg
reddit
stumbleupon
Referência
Google
wikipedia
dicionário
desenvolvimento web
XHTML / CSS
escolas w3
htmlhelp
CSS Zen Garden
Programação
javascript.com
php.net
mysql.com

Tome especial cuidado com o seu recuo ao fazer uma lista aninhada complexo como este. Sem recuo adequado, torna-se muito difícil estabelecer a estrutura da página. Além disso, um item da lista pode conter texto e uma outra lista. Qualquer outro arranjo irá causar um erro de validação.

Escondendo as listas internas

O primeiro passo da criação de um sistema de menu dinâmico é para esconder quaisquer listas que são incorporados em um item da lista. Adicione o seguinte estilo CSS para sua página:

li ul {display: nenhum;}

Na realidade, você costuma aplicar esta técnica só a um div especialmente marcada, como um sistema de menu.

Sua página irá sofrer uma transformação surpreendente.

Esse minúsculo trecho de código CSS é uma verdadeira potência. Ele faz algumas coisas fascinantes, tais como

• Operando em listas não ordenadas que aparecem dentro de itens da lista: O que isso realmente significa é a lista de nível superior não serão afetadas, mas qualquer lista desordenada que aparece dentro de um item da lista terá o estilo aplicado.

• utilização display: none para tornar o texto desaparecer: Definir o exibição atribuir a conta a página HTML para esconder os dados fornecidos por completo.

Este código funciona bem em quase todos os navegadores.

Obtendo as listas internas para aparecer na sugestão

A parte divertida é obter as listas de interiores para aparecer quando o mouse está sobre o elemento pai. Um segundo estilo CSS pode fazer isso acontecer:

li ul {display: nenhum;} li: pairar ul {display: BLOCO}

O novo código é bastante interessante. Confira o efeito de segurar o mouse sobre o elemento de rede social.

Este código não funciona em todos os navegadores! Internet Explorer 6 (IE6) e versões anteriores não suportam o :flutuar pseudo-classe em qualquer elemento excepto uma. Fornecer um comentário condicional com um estilo alternativo para as primeiras versões do IE. Todos os navegadores modernos (incluindo IE 7 e posterior) funcionam bem.

Aqui está como o código de lista-reaparecimento funciona:

• Todas as listas dentro de listas estão ocultas. A primeira regra de estilo esconde qualquer lista que está dentro de um elemento da lista.

• li: hover refere-se a um item da lista que está sendo pairado sobre. Ou seja, se o mouse está situado no topo de um item da lista, esta regra diz respeito a ele.

• li: pairar ul refere-se a uma lista não ordenada dentro de um item da lista pairou. Em outras palavras, se algum conteúdo é uma lista desordenada que repousa dentro de uma lista que atualmente tem o pairando mouse sobre ele, aplicar esta regra.

• Mostrar a lista como um bloco. display: block substitui o anterior display: none instrução e exibe o elemento particular como um bloco. O texto reaparece magicamente.

Este hide-and-seek truque não é tudo o que ótimo por conta própria. É realmente muito chato ter o conteúdo pop-up e ir embora assim. Há um outro problema mais irritante.

Para ver por que isso acontece, tomar um outro olhar para o código CSS que faz com que o segmento para reaparecer:

li: hover ul {display: BLOCO}

Esse código significa set exibição para quadra para qualquer ul que é um filho de um pairou li. O problema é que o desenvolvimento Web li contém uma ul Isso contém mais dois uls. Todas as listas em Desenvolvimento Web aparecer, não apenas o filho imediato.

Mais uma modificação do CSS corrige esse problema:

li ul {display: nenhum;} li: pairar gt; ul {display: BLOCO}

O símbolo maior que (gt;) É uma ferramenta seletor especial. Ele indica uma relação directa. Em outras palavras, o ul deve ser um filho direto do pairou li, não um neto ou bisneto. Com este indicador no lugar, a página age corretamente.

Este truque permite que você crie listas aninhadas tão profundamente como você deseja e para abrir qualquer segmento pairando sobre seu pai.

Meu código atual tem uma lista com três níveis de aninhamento, mas você pode adicionar tantas listas aninhadas que quiser e usar esse código para torná-lo agir como um menu dinâmico.

Video: Desenvolvendo um aplicativo HTML5 e Thunkable)

Este tipo de menu não é necessariamente uma boa idéia. Ter coisas pop em torno de como este é realmente muito perturbador.