O menu suspenso é um dos efeitos mais comuns na Internet. Basta clicar ou mover o mouse e um menu mais detalhado aparecerá. Ele não apenas economiza espaço no layout da página da web, mas também torna o layout da página da web conciso e. ordenado, mas também é um romance. O lindo menu suspenso adiciona muita cor à sua página da web.
Há muitas maneiras de criar menus suspensos. Esta coluna apresentará quatro métodos comumente usados, permitindo que você crie seu próprio menu suspenso como desejar.
■ Use o Dreamweaver para criar menus suspensos
??Dreamweaver é a ferramenta mais comumente usada para criar menus suspensos. Possui um método simples e controle livre. É um curso obrigatório para criar menus suspensos.
O princípio de usar o Dreamweaver para criar um menu suspenso é muito simples. Ele usa o método Show-Hide Layers integrado no painel Comportamentos e usa onMouseOver (o mouse se move para) e onMouseOut (o mouse se afasta) para. acionar a ocultação e exibição da camada, e o menu que aparecerá estará na camada.
??Portanto, podemos criar um menu suspenso em quatro etapas. Primeiro, precisamos de uma barra de navegação, que é usada para colocar o menu principal que aparece primeiro na frente do visualizador. aparecerá após ser ocultado e então, o passo mais crítico é adicionar o efeito de ocultar e mostrar camadas ao menu principal e ao menu suspenso, por fim, embelezamos o menu; O efeito final que você vê é mostrado na figura. Você também pode visitar o seguinte endereço: menu.htm.
??Acredito que você não pode esperar mais, então vamos começar agora mesmo!
1. Produção de barra de navegação
Primeiro, faça alguns trabalhos preliminares necessários. Pressione CTRL+J para abrir a janela Propriedades da página. As configurações dos parâmetros são mostradas na Figura 2. Esta configuração terá um impacto na posição do menu, portanto, defina-a conforme mostrado na Figura 2. foto.
Pressione CTRL+F2 para abrir o painel Objetos e clique no botão de camada
Por fim, mantenha pressionado o mouse e arraste uma camada na página e, a seguir, defina os parâmetros no painel Propriedades da camada. Preencha a caixa ID da camada com o título e preencha as caixas L, T, W e H. com 8, 15 e 15 respectivamente 480, 15, preencha a cor de fundo com #006699, conforme mostrado na imagem.
Mova o cursor dentro da camada e clique no botão tabela no painel Objetos
, insira uma tabela com uma linha e quatro colunas e configure-a conforme mostrado na figura.
Mantenha pressionada a tecla CTRL e clique nas quatro células da tabela, defina sua largura para 120 e insira o texto nas duas primeiras células, que é o nome do seu menu principal. "Classic Forum" e "Tianji.com" como exemplos e links adicionados.
2. Criação de menu suspenso
Agora comece a fazer o menu que aparecerá em forma de drop-down, também utilizando camadas.
Insira uma camada do painel Objetos novamente abaixo da barra de navegação que fizemos anteriormente. Preencha os parâmetros da seguinte forma: preencha a caixa Layer ID com menu1, preencha as caixas L, T, W e H com 8, 34, 120. e 80 respectivamente. Preencha a cor de fundo com #999966 Os dois parâmetros L e T servem para definir a distância entre esta camada e as bordas esquerda e superior da janela. ser extraviado e a usabilidade após a conclusão será afetada.
Neste momento, podemos inserir o conteúdo do menu que desejamos na camada menu1. Para maior comodidade do layout, ainda utilizo tabelas para fazer menus aqui. Esta camada aparecerá como um menu suspenso para "Fórum Clássico", preencha os links do menu que você precisa. Da mesma forma, crie um menu suspenso (menu camada 2) para "Tianji.com".
O que deve ser observado nesta etapa é que a posição da camada (menu1, menu2) onde está localizado o menu suspenso é muito importante (determinada pelos dois parâmetros L e T). Sua borda superior deve ficar próxima à borda inferior da barra de navegação, para garantir que o menu possa ser utilizado normalmente após concluirmos a terceira etapa. Porque se você ficar longe da barra de navegação, o menu desaparecerá assim que o mouse sair da barra de navegação.
Pressione F2 para abrir o painel LAYER, que lista as três camadas da página da web. Clique no espaço na frente do menu1 e do menu2, e o ícone de olho fechado aparecerá, e essas duas camadas serão ocultadas. Esta etapa é realizada porque o estado inicial do menu suspenso é invisível.
3. Adicionando efeitos de mostrar e ocultar
Esta etapa é crucial para transformar a decadência em magia. Por favor, siga-me com atenção.
Esta etapa é dividida em duas partes: primeiro, adicione um comando para controlar a exibição e ocultação do menu principal na barra de navegação; segundo, adicione um comando para controlar a exibição e ocultação do próprio menu suspenso;
1. Na seção da barra de navegação, primeiro pressione e segure a tecla CTRL e clique na primeira célula da barra de navegação. Agora pressione Shift+F3 para abrir a janela Comportamentos e clique.
botão e selecione "Mostrar-ocultar camadas" na opção suspensa (como mostrado na imagem). Se não houver tal item nas opções, selecione IE 5.0 em Mostrar eventos para, clique no botão novamente e "Mostrar-ocultar camadas" aparecerá.
Uma janela irá aparecer, conforme mostrado abaixo. Na caixa Camadas Nomeadas, todas as camadas da página web atual serão listadas. Selecione "camada "menu1" " porque queremos que a camada menu1 responda ao "Fórum Clássico". Em seguida, clique no botão "mostrar" abaixo e OK.
Neste momento, você retornará à janela Comportamentos e as palavras mostradas abaixo aparecerão na janela. Clique no texto "onClick" em Eventos e uma pequena seta para baixo aparecerá. Clique nele e selecione onMouseOver no menu suspenso. opção para baixo. O objetivo desta etapa é alterar o status do menu suspenso menu1 para Mostrar quando o mouse se move para a primeira célula.
A próxima etapa é ocultar o menu suspenso menu2 quando o mouse se move para a segunda célula.
Peça novamente botão, selecione "Mostrar-ocultar camadas" na opção suspensa e selecione "camada" menu1 "" na janela pop-up, porque queremos que a camada menu1 responda ao "Fórum Clássico". Em seguida, clique no botão "ocultar" abaixo e OK.
Retorne à janela Comportamentos, clique na pequena seta para baixo e selecione onMouseOut na opção suspensa.
2. Na parte do menu suspenso, primeiro selecione a camada menu1 clicando na borda da camada ou clicando em menu1 no painel LAYER Use o mesmo método da parte da barra de navegação para adicionar comandos para mostrar e ocultar-se na janela Comportamentos. . O efeito disso é que quando o mouse sai da camada menu1, a camada menu1 fica automaticamente oculta. O status da última camada menu1 é mostrado na figura.
3. Repita as duas partes acima e adicione comandos de mostrar e ocultar camadas para o segundo menu principal "Tianji.com" e menu de camada2 da barra de navegação.
4. Embelezamento e modificação de menus suspensos
Neste ponto, o efeito funcional do menu suspenso foi implementado e você pode vê-lo agora pressionando F12. No entanto, você também deve descobrir que o menu é um pouco feio, as fontes não são boas o suficiente, a cor padrão do link das opções do menu não é bonita e o menu não tem bordas, então vamos dar um pouco de beleza .
1. Defina o estilo da fonte do menu. Pressione Shift+F11 para abrir o painel Estilo CSS e clique abaixo do painel.
botão
Selecione a tag td na caixa Tag da janela pop-up "Novo Estilo", selecione o segundo item Redefinir Tag HTML para Tipo e selecione Este Documento Somente para Definir, conforme mostrado na figura.
Neste momento, a janela de configuração aparece Independentemente de outras coisas, basta selecionar 12 na caixa Tamanho à direita e a unidade é pixels.
2. Defina o estilo do link do menu No painel de estilo, clique no botão abaixo do painel. Na janela pop-up, selecione o terceiro item Usar seletor CSS para tipo, selecione a tag a:hover na caixa Tag e selecione Este documento. Somente para Definir, conforme mostrado na figura.
Após clicar em OK, na janela pop-up, preencha #ff9933 para Cor, selecione nenhum para Decoração e clique em OK.
Volte ao painel de estilo e clique abaixo do painel botão, na janela pop-up, selecione o terceiro item Usar seletor CSS para Tipo, selecione a tag a:link na caixa Tag e selecione Este documento apenas para Definir.
Após clicar em OK, na janela pop-up, preencha #ffffff para Cor, selecione nenhum para Decoração e clique em OK.
Volte ao painel de estilo e clique abaixo do painel botão, na janela pop-up, selecione o terceiro item Usar seletor CSS para Tipo, selecione a tag a:visited na caixa Tag e selecione Este documento apenas para Definir.
Após clicar em OK, na janela pop-up, preencha #ffffff para Cor, selecione nenhum para Decoração e clique em OK.
3. Defina o estilo da borda do menu no painel de estilo, clique no botão abaixo do painel, na janela pop-up, selecione a tag td na caixa Tag, selecione o segundo item Redefinir tag HTML para tipo e selecione Este documento apenas para definir , conforme mostrado na figura.
A janela de configurações aparece, selecione Borda na lista à esquerda, insira a largura dos quatro lados à direita como 1, defina a cor como preto #000000 e selecione sólido como Estilo.
Neste ponto, conseguimos. Use-o em sua página da web agora.