El menú desplegable es uno de los efectos más comunes en Internet. Simplemente haga clic o mueva el mouse y aparecerá un menú más detallado. No solo ahorra espacio en el diseño de la página web, sino que también lo hace conciso y. ordenado, pero también novedoso. El hermoso menú desplegable agrega mucho color a su página web.
Hay muchas formas de crear menús desplegables. Esta columna le presentará cuatro métodos comúnmente utilizados, lo que le permitirá crear su propio menú desplegable como desee.
■ Utilice Dreamweaver para crear menús desplegables
Dreamweaver es la herramienta más utilizada para crear menús desplegables. Tiene un método simple y control gratuito. Puede crear estilos de menú al máximo. Es un curso obligatorio para crear menús desplegables.
El principio de uso de Dreamweaver para crear un menú desplegable es muy simple. Utiliza el método integrado Mostrar-Ocultar capas en el panel Comportamientos y usa onMouseOver (el mouse se mueve hacia) y onMouseOut (el mouse se aleja) para. active la ocultación y visualización de la capa, y el menú que aparecerá está en la capa.
Por lo tanto, podemos crear un menú desplegable en cuatro pasos. Primero, necesitamos una barra de navegación, que se utiliza para colocar el menú principal que aparece primero frente al visor; aparecerá después de estar oculto; y luego, el paso más crítico es agregar el efecto de ocultar y mostrar capas al menú principal y al menú desplegable, finalmente, embellecemos el menú. El efecto final que ve es el que se muestra en la figura. También puede visitar la siguiente dirección: menu.htm.
??Creo que no puedes esperar más, ¡así que comencemos de inmediato!
1. Producción de barra de navegación.
Primero, realice el trabajo preliminar necesario. Presione CTRL+J para abrir la ventana Propiedades de la página. La configuración de los parámetros se muestra en la Figura 2. Esta configuración tendrá un impacto en la posición del menú, así que configúrela como se muestra en la. imagen.
Presione CTRL+F2 para abrir el panel Objetos y haga clic en el botón de capa
Finalmente, mantenga presionado el mouse y arrastre una capa en la página, y luego configure los parámetros en el panel Propiedades de la capa. Complete el cuadro ID de capa con el título y complete los cuadros L, T, W y H. con 8, 15 y 15 respectivamente 480, 15, complete el color de fondo con #006699, como se muestra en la imagen.
Mueva el cursor dentro de la capa y haga clic en el botón de tabla en el panel Objetos
, inserte una tabla con una fila y cuatro columnas y configúrela como se muestra en la figura.
Mantenga presionada la tecla CTRL y haga clic en las cuatro celdas de la tabla, luego establezca su ancho en 120 e ingrese el texto en las dos primeras celdas, que es el nombre de su menú principal. Puede ingresar el nombre que usé. "Classic Forum" y "Tianji.com" como ejemplos y enlaces agregados.
2. Creación de menú desplegable
Ahora comienza a hacer el menú que aparecerá como desplegable, usando también capas.
Inserte una capa desde el panel Objetos nuevamente debajo de la barra de navegación que creamos anteriormente. Complete los parámetros de la siguiente manera: complete el cuadro ID de capa con menu1, complete los cuadros L, T, W y H con 8, 34, 120. y 80 respectivamente. Complete el color de fondo con # 999966. Los dos parámetros L y T son para establecer la distancia entre esta capa y los bordes izquierdo y superior de la ventana. No deben completarse incorrectamente, de lo contrario, el menú. se extraviará y la usabilidad una vez finalizado se verá afectada.
En este momento, podemos ingresar el contenido del menú que queremos en la capa menú1. Para facilitar el diseño, todavía uso tablas para crear menús aquí. Esta capa aparecerá como un menú desplegable para "Foro clásico", complete los enlaces del menú que necesite. De la misma manera, cree un menú desplegable (menú de capa 2) para "Tianji.com".
Lo que se debe tener en cuenta en este paso es que la posición de la capa (menú1, menú2) donde se encuentra el menú desplegable es muy importante (determinada por los dos parámetros L y T). Su borde superior debe estar cerca del borde inferior de la barra de navegación, para garantizar que el menú se pueda utilizar normalmente después de completar el tercer paso. Porque si te mantienes alejado de la barra de navegación, el menú desaparecerá tan pronto como el mouse abandone la barra de navegación.
Presione F2 para abrir el panel CAPA, que enumera las tres capas en la página web. Haga clic en el espacio frente al menú 1 y al menú 2, aparecerá el icono de ojo cerrado y estas dos capas se ocultarán. Este paso se realiza porque el estado inicial del menú desplegable es invisible.
3. Agregar efectos de mostrar y ocultar
Este paso es un paso crucial para convertir la decadencia en magia. Síganme con atención.
Este paso se divide en dos partes: primero, agregue un comando para controlar la visualización y ocultación del menú principal en la barra de navegación; segundo, agregue un comando para controlar la visualización y ocultación del menú desplegable en sí.
1. En la sección de la barra de navegación, primero presione y mantenga presionada la tecla CTRL y haga clic en la primera celda de la barra de navegación. Ahora presione Shift+F3 para abrir la ventana Comportamientos y haga clic.
y seleccione "Mostrar-Ocultar capas" en la opción desplegable (como se muestra en la imagen). Si no existe tal elemento en las opciones, seleccione IE 5.0 en Mostrar eventos para, haga clic en el botón nuevamente y aparecerá "Mostrar-Ocultar capas".
Aparecerá una ventana, como se muestra a continuación. En el cuadro Capas con nombre, se enumerarán todas las capas de la página web actual. Seleccione "capa "menú1" " porque queremos que la capa menú1 responda al "Foro clásico". Luego haga clic en el botón "mostrar" a continuación y Aceptar.
En este momento, volverá a la ventana Comportamientos y las palabras que se muestran a continuación aparecerán en la ventana. Haga clic en el texto "onClick" debajo de Eventos y aparecerá una pequeña flecha hacia abajo. Haga clic en él y seleccione onMouseOver en el menú desplegable. opción hacia abajo. El propósito de este paso es cambiar el estado del menú desplegable menu1 a Mostrar cuando el mouse se mueve a la primera celda.
El siguiente paso es ocultar el menú desplegable menu2 cuando el mouse se mueve a la segunda celda.
Ordene nuevamente , seleccione "Mostrar-Ocultar capas" en la opción desplegable y seleccione "capa "menú1" " en la ventana emergente, porque queremos que la capa menú1 responda al "Foro clásico". Luego haga clic en el botón "ocultar" a continuación y Aceptar.
Regrese a la ventana Comportamientos, haga clic en la pequeña flecha hacia abajo y seleccione onMouseOut en la opción desplegable.
2. En la parte del menú desplegable, primero seleccione la capa menu1 haciendo clic en el borde de la capa o haciendo clic en menu1 en el panel CAPA. Utilice el mismo método que la parte de la barra de navegación para agregar comandos para mostrarse y ocultarse en la ventana Comportamientos. . El efecto de esto es que cuando el mouse sale del menú de capa 1, el menú de capa 1 se oculta automáticamente. El estado del menú de la última capa1 es como se muestra en la figura.
3． Repita las dos partes anteriores y agregue comandos para mostrar y ocultar capas para el segundo menú principal "Tianji.com" y el menú de capas 2 de la barra de navegación.
4. Embellecimiento y modificación de menús desplegables.
En este punto, se ha implementado el efecto funcional del menú desplegable y ahora puede verlo presionando F12. Sin embargo, también debe encontrar que el menú es un poco feo, las fuentes no son lo suficientemente finas, el color predeterminado del enlace de las opciones del menú no es atractivo y el menú no tiene bordes, así que démosle un poco de belleza. .
1. Defina el estilo de fuente del menú. Presione Shift+F11 para abrir el panel Estilo CSS y haga clic debajo del panel.
botón
Seleccione la etiqueta td en el cuadro Etiqueta de la ventana emergente "Nuevo estilo", seleccione el segundo elemento Redefinir etiqueta HTML para Tipo y seleccione Este documento solo para Definir, como se muestra en la figura.
En este momento, aparece la ventana de configuración Independientemente de otras cosas, simplemente seleccione 12 en el cuadro Tamaño a la derecha y la unidad es píxeles.
2. Defina el estilo del enlace del menú. En el panel de estilo, haga clic en el botón debajo del panel. En la ventana emergente, seleccione el tercer elemento Usar selector de CSS para Tipo, seleccione la etiqueta a:hover en el cuadro Etiqueta y seleccione Este documento. Solo para Definir, como se muestra en la figura.
Después de hacer clic en Aceptar, en la ventana emergente, complete #ff9933 para Color, no seleccione ninguno para Decoración y haga clic en Aceptar.
Regrese al panel de estilo y haga clic debajo del panel. , en la ventana emergente, seleccione el tercer elemento Usar selector CSS para Tipo, seleccione la etiqueta a:link en el cuadro Etiqueta y seleccione Este documento solo para Definir.
Después de hacer clic en Aceptar, en la ventana emergente, complete #ffffff para Color, no seleccione ninguno para Decoración y haga clic en Aceptar.
Regrese al panel de estilo y haga clic debajo del panel. , en la ventana emergente, seleccione el tercer elemento Usar selector CSS para Tipo, seleccione la etiqueta a:visited en el cuadro Etiqueta y seleccione Este documento solo para Definir.
Después de hacer clic en Aceptar, en la ventana emergente, complete #ffffff para Color, no seleccione ninguno para Decoración y haga clic en Aceptar.
3． Defina el estilo del borde del menú en el panel de estilo, haga clic en el botón debajo del panel, en la ventana emergente, seleccione la etiqueta td en el cuadro Etiqueta, seleccione el segundo elemento Redefinir etiqueta HTML para Tipo y seleccione Este documento solo para Definir , como se muestra en la figura.
Aparece la ventana de configuración, seleccione Borde en la lista de la izquierda, ingrese el ancho de los cuatro lados de la derecha como 1, establezca el color en negro #000000 y seleccione sólido como Estilo.
En este punto lo hemos logrado. Úselo en su página web ahora.