Este wikiHow ensina como usar o Adobe Dreamweaver para criar uma caixa suspensa para uma página da web. As caixas suspensas são menus que "caem" quando um item da sua página da web é clicado, apresentando mais opções no processo.
Passos
Etapa 1. Abra um projeto do Dreamweaver
Clique duas vezes no arquivo do projeto para fazer isso. Se você deseja criar um novo projeto do Dreamweaver, em vez disso, abra o Dreamweaver e clique em Arquivo, clique Novoe siga as instruções na tela.
Etapa 2. Crie uma lista ordenada
Para criar um menu suspenso, você deve ter pelo menos um item de marcador. Você pode criar um marcador desativando o CSS (clique no Visualizar item de menu, selecione Renderização de estiloe clique Estilos de exibição se estiver marcada), clicando no local onde deseja adicionar o ponto, clicando no ícone do marcador na parte inferior da janela e digitando o nome do ponto. Você deve então ligar novamente o CSS antes de prosseguir.
- O nome do ponto aqui servirá como ativador do menu suspenso (por exemplo, o botão sobre o qual passa ou toca para abrir o menu suspenso).
- Pule esta etapa se você já tiver um item de lista que deseja converter em um menu suspenso.
Etapa 3. Determine o nome da sua lista
Clique no Código guia e certifique-se de que você está no Código fonte configuração e, em seguida, role para baixo até o código da lista ordenada (será entre um"
"tag e um"
"tag) e procure a tag" "acima do topo"
tag. A palavra entre aspas é o nome da sua lista.
-
Se você não vir um nome, insira a tag (onde nome se refere ao seu nome preferido da lista) diretamente acima do
marcação.
Etapa 4. Remova os marcadores
Certifique-se de que você está no lugar certo clicando no Projeto guia e, em seguida, clicando no CSS Designer guia no canto superior direito da janela e faça o seguinte:
- Clique + à direita do título "Seletores".
- Digite #name ul onde "name" é o nome da sua lista.
- Pressione ↵ Enter duas vezes.
- Role para baixo e clique list-style-type no painel na parte inferior do CSS Designer aba.
- Clique Nenhum no menu pop-up resultante.
Etapa 5. Altere sua lista ordenada para exibição horizontal
Para fazer isso:
- Clique + à direita do título "Seletores".
- Digite #nome li onde "nome" é o nome da sua lista.
- Encontre o título "flutuante" no painel na parte inferior do CSS Designer aba.
- Clique no Deixou botão imediatamente à direita do título "flutuante".
Etapa 6. Adicione uma tag ativa à sua lista
Clique no + à direita de "Seletores", digite #nome a (onde "nome" é o nome da sua lista) e pressione ↵ Enter duas vezes.
Etapa 7. Adicione uma cor de fundo
Selecione os #nomeia um item, se necessário, clique na guia "Cor de fundo" em forma de caixa na parte superior do CSS Designer painel, selecione o cor de fundo opção e selecione uma cor de fundo para usar.
Esta é a cor que os itens da sua lista suspensa usarão
Etapa 8. Faça com que seus itens de lista usem o formato de "bloco"
Esse formato garante que, quando alguém clicar ou tocar em um item da lista, poderá abri-lo selecionando um pouco acima ou abaixo, em vez de selecionar precisamente o texto:
- Certifique-se de que o seu #nomeia um o item é selecionado no CSS Designer aba.
- Role para baixo até o título "display" no painel.
- Clique no lado direito do título "display" e, em seguida, clique em bloquear no menu resultante.
Etapa 9. Adicione preenchimento, se necessário
Se você notar que os itens da sua lista estão pressionados uns contra os outros, você pode colocar algum espaço entre eles, fazendo o seguinte:
- Certifique-se de que o seu #nomeia um o item é selecionado no CSS Designer aba.
- Role para baixo até o título "preenchimento" no painel.
- Altere os campos de texto "px" superior e inferior para ler pelo menos 5.
- Altere os campos de texto "px" esquerdo e direito para ler pelo menos 10.
Etapa 10. Crie uma cor flutuante
Esta é a cor que aparecerá quando você passar o cursor do mouse sobre um item no menu suspenso:
- Clique + à direita do título "Seletores".
- Digite #nave a: hover (onde "nome" é o nome da sua lista) e pressione ↵ Enter duas vezes.
- Clique na guia "Cor de fundo".
- Selecione cor de fundo e selecione uma cor mais clara do que a usada para a cor de fundo.
Etapa 11. Desligue o CSS
Clique no Visualizar item de menu, selecione Renderização de estiloe clique no Estilos de exibição opção na janela pop-out.
Se o Estilos de exibição opção estiver esmaecida, clique em qualquer lugar no documento do Dreamweaver e tente novamente.
Etapa 12. Crie o conteúdo do menu suspenso
Você pode fazer isso adicionando subpontos abaixo do marcador que deseja usar como botão do menu suspenso:
- Clique à direita do item da lista que deseja transformar em um menu suspenso e pressione ↵ Enter.
- Pressione Tab ↹.
- Digite o nome do primeiro item do menu suspenso e pressione ↵ Enter.
- Digite o nome do próximo menu suspenso e pressione ↵ Enter e repita conforme necessário.
Etapa 13. Amarre o conteúdo do menu suspenso a um item de marcador
Para fazer isso:
- Clique + ao lado de "Seletores", digite #nome ul ul e pressione ↵ Enter duas vezes.
- Role para baixo e clique exibição, então clique Nenhum no menu pop-up.
- Encontre e clique posição, então clique absoluto no menu pop-up.
Etapa 14. Crie o próprio menu suspenso
Você terá que adicionar outro seletor para fazer isso:
- Clique + ao lado de "Seletores", digite #nome ul li: hover> ul e pressione ↵ Enter duas vezes.
- Encontre e clique exibição, então clique bloquear no menu pop-up resultante.
Etapa 15. Faça com que o conteúdo do menu suspenso seja exibido verticalmente
Por padrão, o conteúdo do menu suspenso será exibido em uma barra horizontal, mas você pode forçá-lo em uma coluna vertical fazendo o seguinte:
- Clique + ao lado de "Seletores", digite #nome ul ul li e pressione ↵ Enter duas vezes.
- Encontre o título "flutuante".
- Clique no botão "nenhum" () opção à direita do título "flutuante".
Etapa 16. Salve seu projeto
Pressione Ctrl + S (Windows) ou ⌘ Command + S (Mac) para fazer isso.