Como criar uma lista suspensa com links

Muitos sites possuem menus de navegação através de blocos de opções que ocupam a parte superior do site ou um de seus lados. Como essas estruturas de navegação apresentam todas as opções disponíveis, oferecem uma grande quantidade de informações contextuais. No entanto, eles ocupam uma quantidade considerável de espaço na tela. Designers que não têm muito espaço podem optar por usar menus suspensos que contêm uma lista de objetos e serão expandidos apenas quando selecionados. Você pode criar esse tipo de estrutura para o seu site usando HTML e JavaScript.

Passo 1

Abra sua página da web e verifique seu código. Se você usa um editor de texto, basta abrir sua página nesse editor e selecionar a linha em que deseja adicionar o menu suspenso. Se você usar um editor visual (por exemplo, Adobe Dreamweaver ou Microsoft Expression Web), abra sua página ou clique no local desejado no menu suspenso. Feito isso, mude da visualização gráfica para a visualização de código. Isso mostrará o código HTML que determina o conteúdo e a aparência da sua página.

Etapa 2

Pressione “Enter” para criar uma linha em branco.

Etapa 3

Copie e cole o seguinte código na linha que você deixou em branco:

Etapa 4

Atualize os parâmetros dos links para corresponder aos seus critérios de design. Digite o texto padrão no topo da lista, modificando diretamente o valor após o rótulo

Etapa 5

Salve sua página da web e abra-a no navegador. Selecione uma opção no menu suspenso e clique no botão adjacente para acessar o objeto selecionado.

Referências

 

Você pode estar interessado:

Deixe um comentário