Este wikiHow te enseñará cómo usar Adobe Dreamweaver para crear un cuadro desplegable para una página web. Los cuadros desplegables son menús que se "despliegan" cuando se hace clic en un elemento de su página web, presentando más opciones en el proceso.
Pasos
Paso 1. Abra un proyecto de Dreamweaver
Haga doble clic en el archivo del proyecto para hacerlo. Si desea crear un nuevo proyecto de Dreamweaver, en su lugar, abrirá Dreamweaver, haga clic en Expediente, haga clic en Nuevoy siga las instrucciones en pantalla.
Paso 2. Cree una lista ordenada
Para crear un menú desplegable, debe tener al menos un elemento con viñetas. Puede crear una viñeta desactivando CSS (haga clic en el Vista elemento de menú, seleccione Representación de estiloy haga clic en Estilos de visualización si está marcado), haga clic en la ubicación donde desea agregar el punto, haga clic en el icono de viñeta en la parte inferior de la ventana y escriba el nombre del punto. Luego, debe volver a activar CSS antes de continuar.
- El nombre del punto aquí servirá como activador de su menú desplegable (por ejemplo, el botón sobre el que se desplaza o toca para abrir el menú desplegable).
- Omita este paso si ya tiene un elemento de la lista que desea convertir en un menú desplegable.
Paso 3. Determine el nombre de su lista
Haga clic en el Código pestaña y asegúrese de estar en la Código fuente configuración, luego desplácese hacia abajo hasta el código de la lista ordenada (estará entre un"
"etiqueta y una"
"etiqueta) y busque la" "etiqueta en la parte superior"
etiqueta. La palabra entre comillas es el nombre de su lista.
-
Si no ve un nombre, inserte la etiqueta (donde nombre se refiere a su nombre preferido de la lista) directamente encima de la
etiqueta.
Paso 4. Elimine las viñetas
Asegúrese de estar en el lugar correcto haciendo clic en el Diseño pestaña y luego haciendo clic en el Diseñador CSS pestaña en la esquina superior derecha de la ventana, luego haga lo siguiente:
- Hacer clic + a la derecha del encabezado "Selectores".
- Escriba #name ul donde "nombre" es el nombre de su lista.
- Presiona ↵ Enter dos veces.
- Desplácese hacia abajo y haga clic tipo de estilo de lista en el panel en la parte inferior de la Diseñador CSS pestaña.
- Hacer clic ninguno en el menú emergente resultante.
Paso 5. Cambie su lista ordenada para que se muestre horizontalmente
Para hacerlo:
- Hacer clic + a la derecha del encabezado "Selectores".
- Escriba #name li donde "nombre" es el nombre de su lista.
- Busque el encabezado "flotante" en el panel en la parte inferior de la Diseñador CSS pestaña.
- Haga clic en el Izquierda botón inmediatamente a la derecha del título "flotante".
Paso 6. Agregue una etiqueta activa a su lista
Haga clic en el + a la derecha de "Selectores", luego escribe #name a (donde "name" es el nombre de tu lista) y presiona ↵ Enter dos veces.
Paso 7. Agrega un color de fondo
Selecciona el #nombra un elemento si es necesario, luego haga clic en la pestaña "Color de fondo" en forma de cuadro en la parte superior de la Diseñador CSS panel, seleccione el color de fondo opción y seleccione un color de fondo para usar.
Este es el color que usarán los elementos de su lista desplegable
Paso 8. Haga que los elementos de su lista utilicen el formato "bloque"
Este formato garantiza que cuando alguien haga clic o toque en un elemento de la lista, pueda abrirlo seleccionando un poco por encima o por debajo de él en lugar de tener que seleccionar con precisión el texto:
- Asegúrese de que su #nombra un se selecciona el elemento en el Diseñador CSS pestaña.
- Desplácese hacia abajo hasta el encabezado "pantalla" en el panel.
- Haga clic en el extremo derecho del encabezado "pantalla" y, a continuación, haga clic en cuadra en el menú resultante.
Paso 9. Agregue relleno si es necesario
Si nota que los elementos de su lista están atascados entre sí, puede colocar algo de espacio entre ellos haciendo lo siguiente:
- Asegúrese de que su #nombra un se selecciona el elemento en el Diseñador CSS pestaña.
- Desplácese hacia abajo hasta el encabezado "relleno" en el panel.
- Cambie los campos de texto "px" superior e inferior para leer al menos 5.
- Cambie los campos de texto "px" izquierdo y derecho para leer al menos 10.
Paso 10. Crea un color de desplazamiento
Este es el color que aparecerá cuando pase el cursor del mouse sobre un elemento en el menú desplegable:
- Hacer clic + a la derecha del encabezado "Selectores".
- Escribe #nave a: hover (donde "nombre" es el nombre de tu lista) y presiona ↵ Enter dos veces.
- Haga clic en la pestaña "Color de fondo".
- Seleccione color de fondo y luego seleccione un color más claro que el que utilizó para el color de fondo.
Paso 11. Desactive CSS
Haga clic en el Vista elemento de menú, seleccione Representación de estiloy haga clic en el Estilos de visualización opción en la ventana emergente.
Si el Estilos de visualización La opción está atenuada, haga clic en cualquier parte del documento de Dreamweaver y vuelva a intentarlo.
Paso 12. Cree el contenido del menú desplegable
Puede hacer esto agregando subpuntos debajo de la viñeta que desea usar como botón del menú desplegable:
- Haz clic a la derecha del elemento de la lista que deseas convertir en un menú desplegable, luego presiona ↵ Enter.
- Presiona Tab ↹.
- Escribe el nombre de tu primer elemento del menú desplegable y luego presiona ↵ Enter.
- Escribe el nombre del siguiente menú desplegable, luego presiona ↵ Enter y repite según sea necesario.
Paso 13. Ate el contenido del menú desplegable a un elemento de viñeta
Para hacerlo:
- Hacer clic + junto a "Selectores", escribe #name ul ul y presiona ↵ Enter dos veces.
- Desplácese hacia abajo y haga clic monitor, luego haga clic en ninguno en el menú emergente.
- Busque y haga clic posición, luego haga clic en absoluto en el menú emergente.
Paso 14. Cree el menú desplegable en sí
Tendrá que agregar otro selector para hacer esto:
- Hacer clic + junto a "Selectores", escribe #name ul li: hover> ul y presiona ↵ Enter dos veces.
- Busque y haga clic monitor, luego haga clic en cuadra en el menú emergente resultante.
Paso 15. Haga que el contenido del menú desplegable se muestre verticalmente
De forma predeterminada, el contenido del menú desplegable se mostrará en una barra horizontal, pero puede forzarlos a que se coloquen en una columna vertical haciendo lo siguiente:
- Hacer clic + junto a "Selectores", escribe #name ul ul li y presiona ↵ Enter dos veces.
- Busque el encabezado "flotador".
- Haga clic en "ninguno" () a la derecha del encabezado "flotante".
Paso 16. Guarde su proyecto
Presiona Ctrl + S (Windows) o Comando + S (Mac) para hacerlo.
