PERSONALIZAR EL MENU SPRY GENERADO POR DREAMWEAVER

Aunque el inspector de Propiedades permite hacer ediciones simples en el Menu spry, no soporta tareas de
estilizacin 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 ms 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 tambin contienen informacin til comentada
sobre varios de los estilos que se aplican en el Menu spry.
Aunque puedas editar fcilmente 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 tambin 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 informacin 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

Texto por defecto

ul.MenuBarVertical a, ul.MenuBarHorizontal a

Color de texto cuando el

puntero del ratn se mueve
sobre l

ul.MenuBarVertical a:hover, ul.MenuBarHorizontal

a:hover

Relevant
properties and
default values
color: #333; textdecoration: none;

color: #FFF;

ul.MenuBarVertical a:focus, ul.MenuBarHorizontal

Color de texto cuando se hace
focus
a:focus

color: #FFF;

Color del item del Menu

ul.MenuBarVertical a.MenuBarItemHover,
cuando el puntero del ratn se
ul.MenuBarHorizontal a.MenuBarItemHover
mueve sobre l

color: #FFF;

Color del subitem del Menu

ul.MenuBarVertical a.MenuBarItemSubmenuHover,
color: #FFF;
cuando el puntero del ratn se
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
mueve sobre l

Cambiar el color de fondo de un elemento del menu

El CSS adjunto a la etiqueta <a> contiene la informacin para darle estilo al color de fondo de un elemento del
menu. Tambin 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

Color de fondo por

defecto

CSS rule for vertical or horizontal menu bar

ul.MenuBarVertical a, ul.MenuBarHorizontal a

Color de fondo cuando el ul.MenuBarVertical a:hover, ul.MenuBarHorizontal

puntero del ratn se
a:hover
mueve sobre l

Relevant
properties and
default values
background-color:
#EEE;
background-color:
#33C;

background-color:
Color de fondo cuando se ul.MenuBarVertical a:focus, ul.MenuBarHorizontal a:focus
hace focus
#33C;
Color de fondo del item
del Menu cuando el
puntero del ratn se
mueve sobre l

ul.MenuBarVertical a.MenuBarItemHover,

background-color:

ul.MenuBarHorizontal a.MenuBarItemHover

#33C;

Color de fondo del

ul.MenuBarVertical a.MenuBarItemSubmenuHover,
subitem del Menu cuando
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
el puntero del ratn se
mueve sobre l

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.
2.
3.
4.
5.
6.
7.

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

Darle a la propiedad anchura una anchura deseada (o cambiar la propiedad a automtico para quitar
una anchura fija, y aadir la propiedad y el valor el espacio white-space: nowrap; a la regla).
Localizar la regla del ul. MenuBarVertical ul o ul. MenuBarHorizontal ul.
Darle a la propiedad anchura una anchura deseada (o cambiar la propiedad a automtico para quitar
una anchura fija).
Localizar la regla del ul. MenuBarVertical ul li o ul. MenuBarHorizontal ul li
Aadir las propiedades siguientes a la regla: float: none; y background-color: transparent;.
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.
2.

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

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