PERSONALIZAR EL MENU SPRY GENERADO POR DREAMWEAVER

Aunque el inspector de Propiedades permite hacer ediciones simples en el Menu spry, no soporta tareas de

estilización personalizadas. Usted puede cambiar las reglas de CSS para el Menu spry y crear una barra de

menú que tenga el estilo que deseas. Para una lista más avanzada de formas de darle estilo ir a

www.adobe.com/go/learn_dw_sprymenubar_custom.

Todas las reglas de CSS mostrados en los apartados de abajo se refieren a las reglas por defecto localizadas en

el archivo SpryMenuBarHorizontal.css o en el SpryMenuBarVertical.css (dependiendo de si has decidido

crear un menu horizontal o uno vertical). Dreamweaver guarda estos archivos CSS en la carpeta SpryAssets de

su sitio siempre que usted cree un Menu spry. Estos archivos también contienen información útil comentada

sobre varios de los estilos que se aplican en el Menu spry.

Aunque puedas editar fácilmente reglas para el Menú spry directamente en el archivo CSS obtenido, puedes

usar el panel de estilos CSS de Dreamweaver para editar el menu de Css. Usted también puede usar el panel de

Estilos CSS para corregir CSS de la barra de menú. El panel de estilos CSS de Dreamweaver es bueno para

localizar las clases CSS asignadas a las diferentes partes del menu, sobre todo si usted usa el modo Current

mode del panel.

Cambiar el estilo de texto de un elemento del menu

El CSS adjunto a la etiqueta <a> contiene la información para darle estilo al texto. Hay varios valores de clase

para dar estilos de texto conectados a la etiqueta <a> que pertenece a diferentes estados de menú.

Para darle estilo a un elemento del menu usaremos la siguiente tabla para localizar la regla CSS apropiada y

entonces cambiaremos el valor por defecto.

Style to change CSS rule for vertical or horizontal menu bar

Relevant

properties and

default values

Texto por defecto ul.MenuBarVertical a, ul.MenuBarHorizontal a color: #333; text-

decoration: none;

Color de texto cuando el

puntero del ratón se mueve

sobre él

ul.MenuBarVertical a:hover, ul.MenuBarHorizontal

a:hover color: #FFF;

Color de texto cuando se hace

focus

ul.MenuBarVertical a:focus, ul.MenuBarHorizontal

a:focus color: #FFF;

Color del item del Menu

cuando el puntero del ratón se

mueve sobre él

ul.MenuBarVertical a.MenuBarItemHover,

ul.MenuBarHorizontal a.MenuBarItemHover color: #FFF;

Color del subitem del Menu

cuando el puntero del ratón se

mueve sobre él

ul.MenuBarVertical a.MenuBarItemSubmenuHover,

ul.MenuBarHorizontal a.MenuBarItemSubmenuHover color: #FFF;

Cambiar el color de fondo de un elemento del menu

El CSS adjunto a la etiqueta <a> contiene la información para darle estilo al color de fondo de un elemento del

menu. También hay otros valores de clase que afectan al color de fondo conectados a la etiqueta <a>, los cuales

pertenecen a diferentes estados de menu.

Para cambiar el color de fondo de un elemento del menu usaremos la siguiente tabla para localizar la regla CSS

apropiada y entonces cambiaremos el valor por defecto.

Color to change CSS rule for vertical or horizontal menu bar

Relevant

properties and

default values

Color de fondo por

defecto ul.MenuBarVertical a, ul.MenuBarHorizontal a

background-color:

#EEE;

Color de fondo cuando el

puntero del ratón se

mueve sobre él

ul.MenuBarVertical a:hover, ul.MenuBarHorizontal

a:hover

background-color:

#33C;

Color de fondo cuando se

hace focus ul.MenuBarVertical a:focus, ul.MenuBarHorizontal a:focus

background-color:

#33C;

Color de fondo del item

del Menu cuando el

puntero del ratón se

mueve sobre él

ul.MenuBarVertical a.MenuBarItemHover,

ul.MenuBarHorizontal a.MenuBarItemHover

background-color:

#33C;

Color de fondo del

subitem del Menu cuando

el puntero del ratón se

mueve sobre él

ul.MenuBarVertical a.MenuBarItemSubmenuHover,

ul.MenuBarHorizontal a.MenuBarItemSubmenuHover

background-color:

#33C;

Para cambiar la dimension de los elementos del menu hay que cambiar la

propiedad width de las etiquetas ul y li de los elementos del menu

1. Localizar la regla del ul. MenuBarVertical li o ul. MenuBarHorizontal li.

2. Darle a la propiedad anchura una anchura deseada (o cambiar la propiedad a automático para quitar

una anchura fija, y añadir la propiedad y el valor el espacio white-space: nowrap; a la regla).

3. Localizar la regla del ul. MenuBarVertical ul o ul. MenuBarHorizontal ul.

4. Darle a la propiedad anchura una anchura deseada (o cambiar la propiedad a automático para quitar

una anchura fija).

5. Localizar la regla del ul. MenuBarVertical ul li o ul. MenuBarHorizontal ul li

6. Añadir las propiedades siguientes a la regla: float: none; y background-color: transparent;.

7. Suprimir la anchura y su valor width: 8.2em;

La posicion de los submenus del menu spry es controlada por la propiedad

margin de las etiquetas ul del submenu.

1. Localizar la regla del ul. MenuBarVertical ul o ul. MenuBarHorizontal ul

2. Cambiar el margin: -5% 0 0 95%; valores por defecto a los valores deseados