Hoy, a petición de mis amigos, escribiré un tutorial sencillo sobre el efecto del menú deslizante en mi sitio web; en el departamento de software de la Universidad de Niujiang, hay un efecto sobre el deslizamiento de capas. Parece que los anuncios en Itnow también. use este efecto Cuando no esté en uso Oculto, cuando haga clic en la capa del botón, se deslizará lentamente hacia afuera, lo que ahorra espacio de página limitado y logra un efecto visual envidiable, que se siente bastante bien. Puedes hacer clic aquí para ver este efecto.
Pongámonos manos a la obra y dejemos de decir tonterías. Los preparativos son los siguientes:
1. Cree un nuevo documento en blanco en dw (o abra la página a la que desea agregar efectos).
2. Establece tu propio estilo CSS.
3． Inserte una tabla de 500 píxeles de largo en la página (nota aquí: el propósito de insertar la tabla es mantener la posición relativa de la capa de control sin cambios en diferentes resoluciones. Si su página no ha realizado configuraciones relevantes antes, es posible que deba hacer esto Dedique algún tiempo a organizar la estructura de su página).
4. Coloque el cursor en la tabla, haga clic en el menú [Insertar - Capa] para insertar una capa con una longitud de 500 y una altura de 20, y asígnele el nombre capa1.
5. Luego coloque el cursor en la capa capa1, haga clic en el menú [Insertar - Capa] e inserte una capa capa2 con una longitud de 500 y una altura de 130, establezca el margen izquierdo y el margen superior de las propiedades de la capa2 en 0, y especifique; Es un color de fondo que te guste.
6． Luego repita el método del paso 5 e inserte una capa capa3. Esta capa no tiene ningún uso especial, solo quiero colocar algunos botones. Al final el mío quedó así:
CONSEJOS: El propósito de hacer esto aquí es agregar un deflector delante de la capa que desea deslizar. Solo cuando haga clic en él, la capa se deslizará lentamente desde debajo de su capa.
Ahora entramos oficialmente en el proceso de producción del menú deslizante que vamos a crear hoy.
Ahora repitamos el paso 5 anterior nuevamente, insertemos otra capa, capa4, establezcamos las propiedades de la capa en ancho 500 y altura 150, que es exactamente la suma de las alturas de la capa2 y la capa3, y ajustemos la capa 4 a las otras dos imágenes de la capa debajo. . Como se muestra en la imagen:
Luego hacemos clic en el ojo delante de la capa 2 para cerrarlo, de modo que podamos ver la capa 4 debajo de ella.
En este momento, hacemos clic en ALT + F9 para abrir el panel de línea de tiempo. DW ha agregado la línea de tiempo predeterminada Timeline1 para nosotros. Luego, seleccionamos la capa que queremos deslizar, capa4, hacemos clic derecho sobre ella y seleccionamos [Agregar a la línea de tiempo. ]. En este momento, podemos ver la capa Layer4 que acabamos de crear en el panel de línea de tiempo, lo que muestra que la hemos agregado correctamente. 
Luego hacemos clic en el fotograma 15 de la línea de tiempo y ajustamos el margen superior en el panel de propiedades de la capa 4 a 150. En este punto, una capa deslizante está lista. Puede arrastrar lentamente el cuadrado rojo en la línea de tiempo de 1 a 15, y podrá ver cómo sale su capa deslizándose lentamente desde debajo de la capa 2 y la capa 3. 
Bien, ahora solo necesitamos establecer una acción para esta capa deslizante capa4 para activarla, y eso se acabó :) Antes de esto, inserté una tabla en la capa3 que agregué y configuré dos para el botón de la capa4.
Primero configuramos la acción para activar la capa deslizante. Seleccione Expandir este botón, vaya al panel Comportamiento y haga clic en
Seleccione [Línea de tiempo - Línea de tiempo de reproducción] en el menú que aparece. DW abrirá un formulario, seleccione línea de tiempo1 en el menú desplegable de arriba.
Luego confirme que el evento está activado, haga clic en el panel de comportamiento.
Bien, aquí puedes obtener una vista previa. Cuando hagas clic en el botón expandir, ¡tus capas se deslizarán lentamente de arriba a abajo!
¿Qué tal? Puedes verlo :) Agreguemos una acción de cierre simple a la capa, es decir, la capa se ocultará después de hacer clic en el botón cerrar. Seleccione el botón Cerrar, vaya al panel Comportamiento y haga clic en Seleccione [Mostrar capas ocultas] en el menú que aparece, seleccione la capa 4 en el formulario emergente y luego haga clic en el botón Ocultar a continuación para configurarla como oculta, como se muestra en la figura: 
Bien, obtuve una vista previa nuevamente y descubrí que después de expandirla, hice clic para cerrar la capa y desapareció :) Sin embargo, parece haber un problema cuando hice clic para expandir nuevamente, no parece suceder nada. tener una acción que no ha sido establecida.
Repita el paso 5 hace un momento, seleccione el botón expandir, agregue la acción [Línea de tiempo - Ir al fotograma de la línea de tiempo], seleccione la línea de tiempo1 en el menú desplegable en el formulario emergente y agregue 1 al número de fotograma.
Bueno, esta vista previa encontró que este problema se resolvió. Pero todavía parece que hemos pasado por alto un problema. Después de hacer clic para cerrar, la capa se oculta y luego hacer clic para expandir no responde. ¡Simplemente use el método anterior y agregue una acción al botón expandir para resolver el problema!
Repita el paso 5 y seleccione [Mostrar capa oculta]. Al contrario del paso 6 de ahora, esta vez seleccionamos mostrar. Después de la confirmación, asegúrese de que el momento en que se muestra la capa oculta en el panel de comportamiento sea al hacer clic. El panel de comportamiento del botón expandido en este momento es el que se muestra a continuación:
OK, vista previa nuevamente, ¡todo está bien!
En este punto, el efecto está completo. Por supuesto, todos pueden crear mejores efectos por sí mismos, pero siempre y cuando dominemos el uso de la línea de tiempo y los comportamientos de acción, todos los efectos son solo una cuestión de operación:)