Insertar barra de menu SPRY 5F IE JCM 2016

Acerca del widget de barra de menús

Un widget de barra de menús es un conjunto de botones de menú de navegación que muestran submenús cuando el visitante de un sitio sitúa el puntero del ratón sobre uno de ellos. Las barras de menús permiten visualizar una gran cantidad de información de navegación en un espacio reducido, y ofrecen a los visitantes una idea de lo que está disponible en el sitio sin necesidad de realizar una navegación exhaustiva.
Dreamweaver permite insertar dos tipos de widgets de barra de menús: verticales y horizontales. En el siguiente ejemplo se muestra un widget de barra de menús horizontal, con el tercer elemento del menú ampliado:

Widget de barra de menús (consta de etiquetas

,
• y )

A. El elemento de menú tiene un submenú B. El elemento de submenú tiene un submenú 

El código HTML del widget de barra de menús consta de una etiqueta ul externa que contiene una etiqueta li para cada elemento de menú de nivel superior. Los elementos de menú de nivel superior (etiquetas li) contienen a su vez etiquetas ul y li que definen los submenús para cada uno de los elementos. Asimismo, los submenús pueden contener otros submenús. Los menús y submenús de nivel superior pueden contener tantos elementos de submenú como desee.

Ir al principio

Inserción y edición del widget de barra de menús

Inserción del widget de barra de menús

Seleccione Insertar > Spry > Barra de menús de Spry.
Seleccione Horizontal o Vertical y haga clic en Aceptar.

Nota:

También puede insertar un widget de barra de menús a través de la categoría Spry del panel Insertar.

Nota:

El widget de barra de menús de Spry utiliza capas DHTML para mostrar secciones de HTML sobre otras secciones. Se podría producir un problema si la página incluye contenido creado con Adobe Flash, ya que los archivos SWF se muestran siempre encima del resto de las capas DHTML, por lo que el archivo SWF podría mostrarse encima de los submenús. La solución a este problema está en cambiar los parámetros del archivo SWF para que utilice wmode="transparent". Puede lograrlo fácilmente seleccionando el archivo SWF en la ventana de documento y configurando la opción wmode con el valor transparent en el inspector de propiedades.

Adición o eliminación de menús y submenús

Utilice el inspector de propiedades (Ventana > Propiedades) para añadir y eliminar elementos de menú del widget de barra de menús.

Adición de un elemento de menú principal

Seleccione un widget de barra de menús en la ventana de documento.
En el inspector de propiedades, haga clic en el botón más situado sobre la primera columna.
(Opcional) Para cambiar el nombre del nuevo elemento de menú, modifique el texto predeterminado en la ventana de documento o en el cuadro Texto del inspector de propiedades.

Adición de un elemento de submenú

Seleccione un widget de barra de menús en la ventana de documento.
En el inspector de propiedades, seleccione el nombre del elemento de menú principal que desea añadir al submenú.
Haga clic en el botón más sobre la segunda columna.
(Opcional) Para cambiar el nombre del nuevo elemento de submenú, modifique el texto predeterminado en la ventana de documento o en el cuadro Texto del inspector de propiedades.

Para agregar un submenú a otro submenú, en el inspector de propiedades, seleccione el nombre del elemento de submenú al que desea añadir otro elemento de submenú y, a continuación, haga clic en el botón más situado sobre la tercera columna.

Nota:

Dreamweaver solo admite dos niveles de submenús en la vista Diseño, pero puede añadir todos los submenús que desee en la vista Código.

Eliminación de un elemento de menú principal o submenú

Seleccione un widget de barra de menús en la ventana de documento.
En el inspector de propiedades, seleccione el nombre del elemento de menú principal o submenú que desea eliminar y haga clic en el botón menos.

Cambio del orden de los elementos de menú

Seleccione un widget de barra de menús en la ventana de documento.
En el inspector de propiedades (Ventana > Propiedades), seleccione el nombre del elemento de menú que desea cambiar de orden.
Haga clic en las flechas arriba o abajo para mover el elemento de menú en la dirección deseada.

Cambio del texto de un elemento de menú

Seleccione un widget de barra de menús en la ventana de documento.
En el inspector de propiedades (Ventana > Propiedades), seleccione el nombre del elemento de menú cuyo texto desea cambiar.
Realice los cambios en el cuadro Texto.

Vinculación de un elemento de menú

Seleccione un widget de barra de menús en la ventana de documento.
En el inspector de propiedades (Ventana > Propiedades), seleccione el nombre del elemento de menú al que desea aplicar un vínculo.
Escriba el vínculo en el cuadro de texto Vínculo o haga clic en el icono de carpeta para buscar un archivo.

Creación de información sobre herramientas para un elemento de menú

Seleccione un widget de barra de menús en la ventana de documento.
En el inspector de propiedades (Ventana > Propiedades), seleccione el nombre del elemento de menú para el que desea crear información de herramienta.
Escriba el texto de la información de herramienta en el cuadro de texto Título.

Asignación de un atributo de destino para un elemento de menú

El atributo de destino especifica dónde se debe abrir una página vinculada. Por ejemplo, puede asignar un atributo de destino a un elemento de menú para que la página vinculada se abra en una nueva ventana del navegador cuando el visitante haga clic en el vínculo. Si utiliza conjuntos de marcos, puede especificar también el nombre de un marco en el que desea que se abra la página vinculada.

Seleccione un widget de barra de menús en la ventana de documento.
En el inspector de propiedades (Ventana > Propiedades), seleccione el nombre del elemento de menú al que desea asignar un atributo de destino.
Introduzca uno de los cuatro atributos en el cuadro Destino:
_blank
Abre la página vinculada en una nueva ventana del navegador.
_self
Carga la página vinculada en la misma ventana del navegador. Ésta es la opción predeterminada. Si la página se encuentra en un marco o conjunto de marcos, la página se carga dentro de ese marco.
_parent
Carga el documento vinculado en el conjunto de marcos padre inmediato del documento.
_top
Carga la página vinculada en la ventana superior de un conjunto de marcos.

Desactivación de estilos

Puede desactivar los estilos de un widget de barra de menús para ver mejor la estructura HTML del widget en la vista Diseño. Por ejemplo, al desactivar los estilos, los elementos de la barra de menús se muestran en la página en una lista con viñetas, en lugar de como elementos con estilo de la barra de menús.

Seleccione un widget de barra de menús en la ventana de documento.
Haga clic en el botón Desactivar estilos en el inspector de propiedades (Ventana > Propiedades).

Cambio de la orientación de un widget de barra de menús

Puede cambiar la orientación de un widget de barra de menús de horizontal a vertical y viceversa. Lo único que debe hacer es modificar el código HTML de la barra de menús y asegurarse de que tiene el archivo CSS correcto en la carpeta SpryAssets.
En el siguiente ejemplo se cambia un widget de barra de menús horizontal por uno vertical.

En Dreamweaver, abra la página que contiene un widget de barra de menús horizontal.
Inserte un widget de barra de menús vertical (Insertar > Spry > Barra de menús de Spry) y guarde la página. Este paso garantiza que se incluya en el sitio el archivo CSS correcto para una barra de menús vertical.
Nota:
Si el sitio ya tiene un widget de barra de menús vertical en otro lugar, no es necesario insertar uno nuevo. Puede sencillamente adjuntar el archivo SpryMenuBarVertical.css a la página haciendo clic en el botón Adjuntar hoja de estilos del panel Estilos (Ventana > Estilos CSS).
Elimine la barra de menús vertical.
En vista Código (Ver > Código), localice la clase MenuBarHorizontal y cámbiela por MenuBarVertical. La clase MenuBarHorizontal está definida en la etiqueta ul del contenedor para la barra de menús (
).
Tras el código de la barra de menús, localice el constructor de la barra de menús:
1	var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
Elimine la opción de carga previa imgDown (y la coma) del constructor:
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
Nota: Cuando convierta una barra de menús vertical en una horizontal, añada la opción de carga previa imgDown y la coma.

1	var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
(Opcional) Si la página no tiene ningún widget de barra de menús horizontal, elimine el vínculo al archivo MenuBarHorizontal.css anterior del encabezado del documento.
Guarde la página.

Ir al principio

Personalización del widget de barra de menús

Aunque el inspector de propiedades permite realizar cambios simples a un widget de barra de menús, no admite tareas de estilo personalizadas. Puede modificar las reglas CSS de un widget de barra de menús y crear una barra de menús con el estilo que desee.
Todas las reglas CSS de los siguientes temas se refieren a las reglas predeterminadas que se encuentran en el archivo SpryMenuBarHorizontal.css o SpryMenuBarVertical.css (en función de la opción elegida). Dreamweaver guarda los archivos CSS en la carpeta SpryAssets del sitio cuando se crea un widget de barra de menús. Estos archivos también contienen información comentada de utilidad sobre los distintos estilos que se pueden aplicar al widget.

Aunque es fácil editar las reglas para el widget de barra de menús directamente en el archivo CSS, también puede utilizar el panel Estilos CSS para editar el código CSS de la barra de menús. El panel Estilos CSS resulta útil para ubicar las clases CSS asignadas a partes distintas del widget, en especial si utiliza el modo Actual del panel.

Cambio del estilo del texto de un elemento de menú

El código CSS adjunto a la etiqueta contiene la información del estilo del texto. Asimismo, hay varios valores de clase de estilo de texto adjuntos a la etiqueta que pertenecen a estados de menú distintos.

Para cambiar el estilo del texto de un elemento de menú, utilice la siguiente tabla para localizar la regla CSS correspondiente y, a continuación, modifique el valor predeterminado:

Estilo que se va a cambiar	Regla CSS para la barra de menús vertical u horizontal	Propiedades y valores predeterminados correspondientes
Texto predeterminado	ul.MenuBarVertical a, ul.MenuBarHorizontal a	color: #333; text-decoration: none;
Color del texto al pasar el puntero del ratón	ul.MenuBarVertical a:hover, ul.MenuBarHorizontal a:hover	color: #FFF;
Color del texto cuando está seleccionado	ul.MenuBarVertical a:focus, ul.MenuBarHorizontal a:focus	color: #FFF;
Color del elemento de la barra de menús al pasar el puntero del ratón	ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemHover	color: #FFF;
Color del elemento de submenú al pasar el puntero del ratón	ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover	color: #FFF;

Cambio del color de fondo de un elemento de menú

El código CSS adjunto a la etiqueta contiene la información del color de fondo del elemento de menú. Asimismo, hay varios valores de clase de color de fondo adjuntos a la etiqueta que pertenecen a estados de menú distintos.

Para cambiar el color de fondo de un elemento de menú, utilice la siguiente tabla para localizar la regla CSS correspondiente y, a continuación, modifique el valor predeterminado:

Color que se va a cambiar	Regla CSS para la barra de menús vertical u horizontal	Propiedades y valores predeterminados correspondientes
Fondo predeterminado	ul.MenuBarVertical a, ul.MenuBarHorizontal a	background-color: #EEE;
Color del fondo al pasar el puntero del ratón	ul.MenuBarVertical a:hover, ul.MenuBarHorizontal a:hover	background-color: #33C;
Color del fondo cuando está seleccionado	ul.MenuBarVertical a:focus, ul.MenuBarHorizontal a:focus	background-color: #33C;
Color del elemento de la barra de menús al pasar el puntero del ratón	ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemHover	background-color: #33C;
Color del elemento de submenú al pasar el puntero del ratón	ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover	background-color: #33C;

Cambio de las dimensiones de los elementos de menú

Para cambiar las dimensiones de los elementos de menú, modifique las propiedades width de las etiquetas li y ul del elemento de menú.

Localice la regla ul.MenuBarVertical li o ul.MenuBarHorizontal li.
Cambie la propiedad width al ancho deseado (o cambie la propiedad a auto para eliminar un ancho fijo y, a continuación, añada la propiedad y el valor white-space: nowrap; a la regla).
Localice la regla ul.MenuBarVertical ul o ul.MenuBarHorizontal ul.
Cambie la propiedad width al ancho deseado (o cambie la propiedad a auto para eliminar un ancho fijo).
Localice la regla ul.MenuBarVertical ul li o ul.MenuBarHorizontal ul li:
Añada las siguientes propiedades a la regla: float: none; y background-color: transparent;.
Elimine la propiedad y el valor width: 8.2em;.

Colocación de submenús

La posición de los submenús de barra de menús de Spry se controla mediante la propiedad margin de las etiquetas ul del submenú.

Localice la regla ul.MenuBarVertical ul o ul.MenuBarHorizontal ul.
Cambie los valores predeterminados de margin: -5% 0 0 95%; por los valores deseados.