Crear menú desplegable Spry

Dreamweaver CS6 incorpora múltiples utilidades para crear páginas web sin
necesidad de programar. Estas herramientas permiten, entre otras cosas, insertar
tablas, formularios, textos, widgets, contenidos multimedia o transiciones css de
manera rápida y sencilla.

En esta ocasión vamos a ver cómo diseñar una barra de menú desplegable Spry
en tan sólo unos pocos minutos, la cual puede ser tanto vertical como horizontal.

En primer lugar debemos situar el cursor en la zona donde queramos insertar

nuestro menú Spry, lo más habitual es ajustarlo en la parte superior, junto al
logotipo de la web. Aunque, la barra lateral izquierda también puede ser una
buena opción.

€ (Alt + 0128)

Menú desplegable horizontal

Con la zona seleccionada accedemos al panel insertar de Dreamweaver, si no

está visible, lo podemos encontrar en la opción Ventana -> Insertar. Dentro del
panel insertar, seleccionamos Spry-> Barra de menús Spry. A continuación
elegimos la estructura que nos interese: horizontal o vertical, en este caso
horizontal.

Ya tenemos nuestro menú desplegable en pantalla. Ahora tenemos que configurar

el número de elementos que mostrará y sus vínculos correspondientes. Para ello,
situamos el ratón sobre el menú y pinchamos en el recuadro azul superior.

De este modo, descubrimos el panel propiedades de Dreamweaver, donde

podemos añadir o eliminar elementos mediante los símbolos + -. También tenemos
el campo texto, que permite escribir los títulos de cada opción, y el
campo vínculos, que como su nombre indica, nos permite crear enlaces entre
las diferentes páginas de nuestro sitio.

Asignando color a un menú Spry

Expandir el menú CSS de lado superior derecho de la ventana de Dreamweaver.
Si no aparece, lo puedes ver haciendo clic en el menú Window/CSS
Styles(Ventana/Estilos CSS). La ventana es esta:

Es aquí donde podemos alterar la apariencia de cualquier elemento CSS (en

nuestro caso, solo aplica al menú). Antes que nada, voy a cambiar el ancho del
menú. Para esto, busco el estilo ul.MenuBarHorizontal porque esta regla define el
estilo de todo el menú. Abajito de este, está ul.MenuBarHorizontal li como puedes
observar en la figura. Esta regla solo afecta a los botones en el primer nivel (es
decir que cambiar el ancho aquí no afecta el tamaño de los submenus).
Si le doy doble clic sobre ul.MenuBarHorizontal li, aparece la siguiente ventana
que me deja modificar el formato:

Como puedes ver, puedo modificar el tipo de letra (en la propiedad Font), pero
primero voy a cambiar el tamaño de la barra. Para esto, hago clic sobre la opción
Box y la ventana se ve así:
Aquí hay trabajo de prueba y error para dejar el menú del ancho deseado.
Cambia la propiedad Width (se hace más fácil cambiar también la unidad de
medida a Pixels) hasta que quede como quieras. En este caso, como solo son
dos opciones, no le cambió mucho: cada opción tenía ancho de 150 pixeles.

Ahora vamos a cambiar las reglas ul.MenuBarHorizontal ul (cambia la li por ul) y

la ul.MenuBarHorizontal ul li para cambiar el ancho de los submenus. La
ventana es casi igual (cambio la propiedad width dentro de la pestaña Box). Con
esto ya se cambió el ancho de todos los menús y submenús habidos y por haber
en el Spry Menu. Ahora la página Web se ve así en la vista diseño (nótese que
también se cambió la propiedad Font como se dijo anteriormente):

Si observas bien, verás que se ve bien el menú, si lo previsualizas en un

navegador verás que funciona de maravilla. Sin embargo, tiene un color gris
horroroso que no combina con el resto de la página. Así que es hora de
cambiarlo. Para hacer esto, se debe modificar varias reglas para cambiarlos todos
al mismo color de fondo y del color que va a tener cuando pasa el mouse por
encima. Básicamente las reglas que hay que cambiar son estos:

 ul.MenuBarHorizontal a – cambiando este color Background, cambia el

color en todos los niveles de submenús.

 ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal

a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal
a.MenuBarSubmenuVisible – controla como se ve cuando el mouse pasa
por encima. Hay que cambiar la propiedad Background color de la pestaña
Background como se ve en la siguiente figura. Se le puso un azul más
oscuro, pero puedes elegir el que quieras. Modificando la propiedad
Background image puedes sustituir el color por alguna imagen (solo ten en
cuenta el tamaño del botón cuando hagas la imagen).
¿Y cómo se ve esto? Así se ve la página en la vista diseño y posteriormente en
Firefox cuando se está seleccionando una opción del submenú más alejado.