Creación de barras de menú con Spry
Cuando el puntero del ratón pasa por encima de una barra de menú, aparece un submenú. Las barras de menúpermiten acceder a muchas opciones de menú desde un menú principal limpio y ordenado. La interactividad que proporcionan cuando un visitante pasa el puntero del ratón por encima de una opción de menú añade un elemento dinámico a una página web.
Los widgets de la barra de menús pueden ser horizontales o verticales:
- Las barras de menú verticales suelen estar alineadas en marcos, columnas de tabla u otros objetos de presentación (como un DIV o un DIV AP) en el lado izquierdo de la página.
- Las barras de menú horizontales suelen estar alineadas en la parte superior de la página y pueden colocarse allí sin insertarse en un objeto de presentación.
El widget Spry para insertar widgets de barra de menús le permite generar barras de menú con dos niveles de submenús. Por lo tanto, un usuario puede hacer clic en una opción de menú, ver un submenú con un nuevo conjunto de opciones, elegir una de esas opciones y elegir un segundo submenú.
Para generar un widget de barra de menús, sigue estos pasos:
- Guarde la página en la que se insertará el widget.
- Elija Insertar > Spry > Barra de menú Spry. Cuando aparezca el cuadro de diálogo de la barra de menús Spry, elija formato horizontal o vertical.
- Después de generar un widget de barra de menús, puede definir algunas propiedades básicas de barras de menús en el inspector de propiedades. Seleccione elementos de menú o elementos de submenú en el lado izquierdo del inspector de propiedades; luego modifíquelos como desee (consulte la figura 4):
- En el cuadro de texto, ingrese el texto que aparecerá en el menú.
- En el cuadro de enlace, ingrese el enlace que se abrirá cuando se haga clic en el elemento.
- En el cuadro Título, introduzca el texto de accesibilidad que aparecerá en la ventana del navegador cuando un usuario pase el puntero del ratón por encima de una opción de menú.
- Deje el cuadro de destino vacío para abrir el enlace en la misma ventana del navegador, o ingrese _blank para abrir el enlace en una nueva ventana del navegador.
- Utilice los botones más (+) y menos (-) sobre las columnas menú o submenú (o submenú subb) para agregar o eliminar nuevos elementos de menú. Utilice los botones Mover elemento hacia arriba y Mover elemento hacia abajo según sea necesario para cambiar el orden de los elementos del menú.
Figura 4 Definición de los niveles de las opciones de la barra de menús en el inspector de propiedades.
Al crear o seleccionar un widget de barra de menús, aparece un botón Desactivar estilos en el inspector de propiedades. Desactivar los estilos no afecta a cómo se representa el estilo en un navegador, sino que desactiva el formato en la ventana del documento. Puede ajustar el formato de varias propiedades de barra de menús de una barra de menús seleccionada mediante el panel Estilos CSS.
Cada barra de menús genera al menos una docena de estilos CSS. La mayoría de estos estilos de CSS definen el posicionamiento y el tamaño de los menús y submenús que aparecen cuando auser pasa el puntero del ratón sobre una opción de menú. El posicionamiento predeterminado de estos menús suele estar bien y no es necesario ajustarlo. Puede crear una barra de menú personalizada definiendo sus propios enlaces y texto, y darle un formato distintivo personalizando el texto y los colores de fondo.
Algunas de las opciones de estilo CSS controlan elementos relativamente discretos de la barra de menús, pero todos ellos se pueden editar en el panel Estilos CSS. Para editar los estilos asociados con un widget de barra de menús, expanda SpryMenuBarHorizontal para mostrar una lista de estilos de clase asociados con esta hoja de estilos. Seleccionar uno de estos estilos de clase en la parte superior del panel Estilos CSS le permite editar propiedades para ese estilo en la mitad inferior del panel Estilos CSS.
Para cambiar el color de fondo o de texto de la barra de menús, seleccione styleul.MenuBarHorizontal a (para una barra de menú vertical, ul.MenuBarVertical a). Con el estilo seleccionado en el panel Estilos CSS, utilice el cuadro de muestras de color de fondo en la mitad inferior del panel Estilos CSS para elegir un nuevo color de fondo y utilice la muestra de color para cambiar el color de fuente (consulte la Figura 5).
Figura 5 Cambiar el color del texto por una barra de menús.
Otra opción es cambiar el color de fondo y de texto de una opción de menú flotante, utilizando estos elementos:
- ul.MenuBarHorizontal a. MenuBarItemHover
- ul.MenuBarHorizontal a. MenuBarItemSubmenuHover
- ul.MenuBarHorizontal a. MenuBarSubmenuVisible
El estilo para barras de menú verticales es similar, pero con Vertical en lugar de Horizontal en el nombre del estilo.
Como está empezando a ver, las barras de menú Spry ofrecen muchos elementos personalizables. Para obtener los mejores resultados, experimente. Esencialmente, edita el contenido de las barras de menú en el inspector de propiedades o seleccionando uno de los múltiples estilos CSS generados y editándolo en el panel de estilos CSS.
¡Bien, ahora estás por tu cuenta! Diviértete con estos y otros Sprywidgets. Y recuerde mantenerse en contacto y hacerme saber cómo están funcionando en sus sitios.