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
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.
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.
Utilice el
inspector de propiedades (Ventana > Propiedades) para añadir y
eliminar elementos de menú del widget de barra de menús.
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.
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.
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.
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.
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.
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.
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.
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:
Abre la página vinculada en una nueva ventana del navegador.
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.
Carga el documento vinculado en el conjunto de marcos padre inmediato del documento.
Carga la página vinculada en la ventana superior de un conjunto de marcos.
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).
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.
-
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.
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; |
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; |
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;.
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.
