Código HTML para um menu de árvore

Conteúdo

Ao criar um menu de árvore, os desenvolvedores precisam categorizar as diferentes seções de conteúdo de um site. Por exemplo, um site de vendas de produtos pode ter seções para cada tipo de produto com subseções adicionais dentro delas para dividir os produtos em categorias. Às vezes, os desenvolvedores da Web usam subdiretórios para organizar o conteúdo do site, caso em que cada diretório poderia corresponder a um elemento de nível superior na árvore de menus. Cada item de menu será, em última instância, um link HTML, como no código de exemplo a seguir:

Esse código vincula uma pasta chamada "vestuário", localizada no diretório raiz do site. Como não há uma página indicada, o link abrirá a página de índice nesse diretório. Dentro da seção de roupas do menu de árvore, os itens podem ser vinculados a páginas específicas, como segue: Calças

Listas

Os menus da árvore HTML geralmente envolvem listas. O exemplo de discagem a seguir mostra um menu usando listas não numeradas:

• Vestuário
• • Calças
  • Casacos
• Presentes
• • Alimento
  • Itens Novidades
  • DVDs

Este menu contém duas seções de primeiro nível para "roupas" e "presentes". Dentro de cada um desses itens estão itens adicionais na lista. Cada item na lista pode conter outra lista para sites complexos, um menu de árvore pode envolver vários níveis de profundidade. Clicar em um elemento de nível superior levará o usuário para a página dessa seção da página, clicando em um item específico que o enviará para uma página específica dentro de uma seção.

Estilo

A maioria dos sites usa folhas de estilo em seus menus. Dentro do código CSS, os desenvolvedores podem ditar diferentes aspectos para a aparência do menu, incluindo o design, bem como as características visíveis de cada item na lista. Os navegadores da Web geralmente exibem marcadores nos itens de lista padrão, que muitos desenvolvedores optam por não exibir. O seguinte exemplo de código CSS mostra isso:

ul {list-style-type: nenhum; }

Para escolher um estilo específico, o código será o seguinte: ul {list-style-type: square;}

Os desenvolvedores podem, opcionalmente, adicionar atributos de classe a listas em diferentes níveis dentro de um menu de árvore, adaptando o CSS para cada um deles.

Escrevendo o roteiro

Muitos sites usam funções JavaScript para melhorar a interatividade com menus em árvore. Ao usá-los, os desenvolvedores podem especificar que certos itens não são visíveis para o usuário inicialmente. Por exemplo, clicar em um item na lista de nível superior pode fazer com que o início apareça dinamicamente. As funções JavaScript podem usar a propriedade de apresentação ou visibilidade de um elemento para informar ao navegador para mostrar ou ocultar. O código a seguir mostra a configuração de um item na lista que está oculto: element.style.visibility = "hidden";

A alternativa a seguir usa a propriedade de apresentação: element.style.display = "none";