Hoje, a pedido de meus amigos, escreverei um tutorial simples sobre o efeito de um menu deslizante em meu site no departamento de software da Universidade de Niujiang, parece que os anúncios no Itnow também. use este efeito. Quando não estiver em uso Oculto, quando você clica na camada do botão, ele desliza lentamente para fora, o que economiza espaço limitado na página e obtém um efeito visual invejável, que é muito bom. Você pode clicar aqui para ver esse efeito.
Vamos direto ao assunto e parar de falar bobagens. Os preparativos são os seguintes:
1. Crie um novo documento em branco em dw (ou abra a página à qual deseja adicionar efeitos).
2. Defina seu próprio estilo CSS.
3. Insira uma tabela longa de 500 pixels na página (observe aqui: o objetivo de inserir a tabela é manter a posição relativa da camada de controle inalterada em diferentes resoluções. Se sua página não tiver feito configurações relevantes antes, talvez seja necessário fazer isso Passe algum tempo organizando a estrutura da sua página).
4. Posicione o cursor na tabela, clique no menu [Inserir - Camada] para inserir uma camada com comprimento 500 e altura 20, e nomeie-a como camada1.
5. Em seguida, coloque o cursor na camada camada1, clique no menu [Inserir - Camada] e insira uma camada camada2 com comprimento de 500 e altura de 130, defina a margem esquerda e a margem superior das propriedades da camada2 como 0, e especifique a margem esquerda e a margem superior das propriedades da camada2 como 0; isto Uma cor de fundo que você gosta.
6． Em seguida, repita o método do passo 5 e insira uma camada layer3. Esta camada não tem uso especial. No meu tutorial, quero apenas colocar alguns botões. No final, o meu ficou assim:
DICAS: O objetivo de fazer isso aqui é adicionar um defletor na frente da camada que você deseja deslizar. Somente quando você clicar nele a camada deslizará lentamente para fora da camada.
Agora estamos entrando oficialmente no processo de produção do menu deslizante que vamos criar hoje.
Agora vamos repetir o passo 5 acima novamente, inserir outra camada camada4, definir as propriedades da camada para largura 500 e altura 150, que é exatamente a soma das alturas da camada2 e camada3, e ajustar a camada camada4 para as outras duas imagens abaixo. . Como mostrado na imagem:
Em seguida, clicamos no olho na frente da camada 2 para fechá-lo, para que possamos ver a camada 4 abaixo dela.
Neste momento, clicamos em ALT + F9 para abrir o painel da linha do tempo. DW adicionou a linha do tempo padrão Timeline1 para nós. Em seguida, selecionamos a camada que queremos deslizar, camada4, clique com o botão direito nela e selecione [Adicionar à linha do tempo. ]. Neste momento, podemos ver a camada layer4 que acabamos de criar no painel da linha do tempo, o que mostra que a adicionamos com sucesso! 
Em seguida, clicamos no 15º quadro da linha do tempo e ajustamos a margem superior no painel de propriedades da camada 4 para 150. Neste ponto, uma camada deslizante está pronta. Você pode arrastar lentamente o quadrado vermelho na linha do tempo de 1 a 15 e poderá ver sua camada deslizando lentamente da camada 2 e da camada 3. 
Ok, agora só precisamos definir uma ação para esta camada deslizante camada4 para ativá-la, e pronto :) Antes disso, inseri uma tabela na camada3 que adicionei e configurei duas para o botão camada4.
Primeiro configuramos a ação para ativar a camada deslizante. Selecione Expandir este botão, vá para o painel Comportamento e clique em
Selecione [Linha do tempo - Linha do tempo de reprodução] no menu que aparece. DW abrirá um formulário, selecione linha do tempo1 no menu suspenso acima.
Em seguida, confirme se o evento está onclick no painel de comportamento
Ok, aqui você pode visualizá-lo. Ao clicar no botão expandir, suas camadas deslizarão lentamente de cima para baixo!
Que tal, você pode ver :) Vamos adicionar uma ação simples de fechar a camada, ou seja, a camada ficará oculta após clicar no botão Fechar. Selecione o botão Fechar, vá para o painel Comportamento e clique em Selecione [Mostrar camadas ocultas] no menu que aparece, selecione a camada 4 no formulário pop-up e clique no botão Ocultar abaixo para defini-la como oculta, conforme mostrado na figura: 
Ok, visualizei novamente e descobri que depois de expandi-lo, cliquei para fechar a camada e ela desapareceu :) No entanto, parece haver um problema. Quando cliquei para expandir novamente, nada parece acontecer. tem uma ação que não foi definida.
Repita a etapa 5 agora, selecione o botão de expansão, adicione a ação [Timeline - Go to Timeline Frame], selecione timeline1 no menu suspenso no formulário pop-up e adicione 1 ao número do quadro.
Bem, esta prévia descobriu que esse problema foi resolvido. Mas ainda parece que esquecemos um problema. Depois de clicar para fechar, a camada é definida como oculta e, em seguida, clicar para expandir não responde. Basta usar o método antigo e adicionar uma ação ao botão de expansão para resolver o problema!
Repita a etapa 5 e selecione [Mostrar camada oculta]. Ao contrário da etapa 6 agora, desta vez selecionamos mostrar. Após a confirmação, certifique-se de que o momento em que a camada oculta é exibida no painel de comportamento seja ao clicar. O painel de comportamento do botão expandido neste momento é mostrado abaixo:
OK, visualize novamente, está tudo bem!
Neste ponto, o efeito está completo. É claro que todos podem criar efeitos melhores por si mesmos, mas permanece o mesmo, desde que dominemos o uso da linha do tempo e dos comportamentos de ação, todos os efeitos são apenas uma questão de operação:)