Código HTML para um menu em árvore

As páginas da Web em HTML podem usar estruturas hierárquicas que são particularmente adequadas aos menus do site. Se você possui um site grande, com muitas seções e subseções, com um menu em árvore, fornecerá aos usuários uma maneira intuitiva de navegar pelo conteúdo. O formato HTML para um menu em árvore geralmente envolve listas com cada elemento da lista que contém um elemento que ancora o HTML a uma página específica ou a uma área do site. Muitos sites também usam folhas de estilo em cascata e código JavaScript para melhorar a aparência e a funcionalidade dos menus em árvore.

Conteúdo

Ao criar um menu em á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 para dividir os produtos em categorias. Às vezes, os desenvolvedores da Web usam subdiretórios para organizar o conteúdo do site; nesse caso, cada diretório pode corresponder a um item de nível superior na árvore de menus. Cada item de menu acabará por ser um link HTML, como no seguinte código de exemplo: Vestuário

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

Listas

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

Este menu contém duas seções de primeiro nível para “roupas” e “presentes”. Dentro de cada um desses itens adicionais estão na lista. Cada item da lista pode conter outra lista para sites complexos; um menu em árvore pode envolver vários níveis de profundidade. Clicar em um item de nível superior levará o usuário à página dessa seção da página; clicar em um item específico enviará você a 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 determinar diferentes aspectos da aparência do menu, incluindo o design, bem como as características visíveis de cada item da lista. Os navegadores da Web geralmente exibem marcadores nos itens da lista por padrão, que muitos desenvolvedores optam por não exibir. O exemplo a seguir de código CSS mostra isso:

ul {tipo de estilo de lista: nenhum; }

Para escolher um estilo de marcador 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 em árvore, adaptando o CSS para cada um deles.

Escrevendo o script

Muitos sites usam funções JavaScript para melhorar a interatividade com os menus em árvore. Ao usá-los, os desenvolvedores podem especificar que determinados 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 a inicialização apareça dinamicamente. As funções JavaScript podem usar a propriedade de apresentação ou visibilidade de um item para dizer ao navegador para mostrar ou ocultar. O código a seguir mostra a configuração de um item da lista oculta: element.style.visibility = “hidden”;

A alternativa a seguir usa a propriedade presentation: element.style.display = “none”;

Referências

 

Você pode estar interessado:

Deixe um comentário