Como criar uma lista drop-down em html sem java

Alguma vez você já criou uma lista muito longa em HTML que você teria gostado de sair para o visitante a sua página poderia facilmente usar o? Para configurar esse recurso ler este artigo que irá ajudá-lo a ajustar o código que você precisa para alcançá-lo.

passos

1

Abra um programa editor de texto simples como o Notepad ou Wordpad no Windows, ou o TextEdit em um Mac.

2

Comece sua página web como faria com qualquer outra página da web, adicionando um rótulo e cabeçalho

3

Criar uma porção javascript o documento que informa ao navegador para exibir a lista como expansível. Use o seguinte código para formar este script.

lt;estilo tipo="text / css"gt; .Row {display {vertical-align:: altura top- auto importante- .list!}: none; .mostrar} {display: none; } .hide: Alvo + .mostrar {display: inline-} .hide: target {display: none; } .hide: Alvo ~ .list {display: inline-} print @media {.hide, .mostrar {display: none; }}lt;/estilogt;

4

Feche a parte de cabeçalho da página com o cabeçalho tag de fechamento ().

5

Criar o corpo do código HTML. Digite o rótulo para começar a escrever o corpo (.)

6

Crie o conteúdo da lista, incluindo o estilo de informações em HTML que você quiser usar o navegador para expandir ou reduzir a lista. Use o seguinte código para criar esta. Lembre-se de seguir as regras para a criação de listas e listas aninhadas dentro do código.

lt;div classe="linha"gt;lt;para href="# hide1" classe="esconder" identidade="hide1"gt; Expandirlt;/paragt;lt;para href="# SHOW1" classe="mostra" identidade="SHOW1"gt; Recolherlt;/paragt;lt;div classe="lista"gt;lt;ulgt;lt;ligt; item 1lt;/ligt;lt;ligt; ponto 2lt;/ligt;lt;ligt; O item 3lt;/ligt;lt;/ulgt;lt;/divgt;lt;/divgt;

7

Fecha a seção do corpo HTML, digitando o tag rótulo.

8

Digite o tag HTML fechamento, para completar o arquivo.

9

Salve o seu trabalho como um HTML ou HTM e verificar a página no seu navegador antes de enviá-lo ao seu website.