Menu desplegable en dreamweaver

[hernanmiguel]

hola soy nuevo

esto lo saque de una pagina llamada aulaclic espero te sirva

Ejercicio paso a paso. Unidad 16. Crear un menú emergente

Objetivo

Practicar las operaciones para crear un menú emergente

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.
2 Crea una nueva carpeta llamada libreria en tu carpeta de ejercicios y defínela como un nuevo sitio (Sitio → Nuevo Sitio).
3 Crea una nueva plantilla PHP (Archivo → Nuevo → Página de plantilla → Plantilla PHP).
4 Guárdala como libreria (Archivo → Guardar).
5 En la primera línea y sin insertar un párrafo escribe Mostrar Ofertas Catálogo Críticas Buscar:.
6 Selecciona el texto Mostrar y en Vínculo escribe #.
7 Selecciona el texto Ofertas y en Vínculo escribe ../ofertas.php.
8 Selecciona el texto Catálogo y en Vínculo escribe ../catalogo.php. Selecciona el texto Críticas y en Vínculo escribe ../criticas.php.
9 Selecciona el texto Buscar y en Vínculo escribe ../buscar.php.
Más adelante rellenaremos los enlaces con nuevas páginas que crearemos.
10 Selecciona el enlace Mostrar, vamos a asociarle un menú emergente.
11 Abre el panel Comportamientos (Mayus+F4).
12 Haz clic en el botón y selecciona la opción Mostrar menú emergente.
Se mostrará el siguiente cuadro de diálogo:



13 En Texto escribe Nuevos.
14 En Destino selecciona _self para que se abra en la misma ventana.
15 En Vínculo escribe nuevos.php, lo modificaremos más adelante.
16 Pulsa el botón para añadir un nuevo elemento al menú.
17 En Texto escribe Usados.
18 En Destino selecciona _self para que se abra en la misma ventana.
19 En Vínculo escribe usados.php, lo modificaremos más adelante.
20 Haz clic en la pestaña Aspecto para seguir configurando el menú.
Verás las siguientes opciones:



21 Aquí podremos seleccionar entre menú vertical u horizontal. Dejaremos el Vertical para que los elementos se coloquen en un listado vertical.
22 En Fuente selecciona el tipo de fuente de la familia Verdana.
23 En Tamaño selecciona 12.
24 Los colores de las celdas que debes aplicar son los siguientes:
Estado Arriba
Texto: #33333
Celda: #E35331
Estado Sobre
Texto: #33333
Celda: #C2FCF3
25 Haz clic sobre la pestaña Avanzado para seguir configurando el menú.
Verás estas opciones:



Aquí estableceremos el aspecto de las celdas.
26 En Ancho de celda selecciona Píxeles y escribe 76.
27 En Relleno de celda escribe 5.
28 En Espacio entre celdas escribe 5.
29 Demora de menú es el tiempo que tardará el menú en esconderse una vez hayamos dejado de mantener el ratón sobre él, escribe 200 milisegundos.
30 Marca la casilla Bordes de ventana emergente para mostrar los bordes.
31 Dale el valor 1 al Ancho del borde.
32 Los colores que deberás aplicar en el resto de opciones son los siguientes:
Color del borde: #E35331
Sombra: #E35331
Resaltado: #E35331
33 Haz clic en la pestaña Posición para terminar de configurar el menú.
Verás las siguientes opciones:



Aquí podremos seleccionar una posición inicial para el menú predeterminada haciendo clic en los 4 botones en la parte superior, o escribir una posición personalizada en los cuadros siguientes.
34 En X escribiremos -12, es la distancia horizontal desde el borde izquierdo del elemento que muestra el menú (en nuestro caso el enlace).
35 En Y escribe 26, es la distancia vertical desde el borde inferior del elemento que muestra el menú.
No te preocupes porque el menú parezca ahora un poco desplazado hacia la izquierda y hacia abajo. En el tema siguiente verás cómo aplicándole unos cambios cogerá forma
36 No olvides marcar la opción Ocultar menú con evento onMouseOut para que cuando se retire el ratón del enlace el menú desaparezca.
37 Pulsa Aceptar y el menú estará terminado.
38 Guarda los cambios.
espero sea de utilidad, me faltan las imagenes pero visita esa pagina aulaclic esta en el unidad 16 del curso del dreamweaver