Unidad 27. Controles Spry Avanzados (II)

27.2. Barra de menús

Ver el videotutorial

Podemos crear menús de forma muy sencilla haciendo clic en Insertar → Spry → Barra de menús de Spry:

El primer cuadro de diálogo que encontraremos será el siguiente:

Aquí podremos seleccionar el diseño para nuestro menú, haz clic en Horizontal o Vertical y pulsa el botón Aceptar.

Se creará automáticamente el menú, que podrás visualizar desde la vista de Diseño de esta forma:

Haciendo clic en la cabecera azul Barra de menús de Spry podremos ver en el panel Propiedades las opciones necesarias para configurar nuestro menú:

La creación de elementos es bastante sencilla. Este menú admite hasta 3 niveles diferentes, así que en principio la primera tarea será definir el primer nivel. Esto lo haremos desde el primer cuadro de listado.

Añadir y quitar elementos es tan fácil como utilizar los botones , y podemos reorganizarlos luego utilizando las flechas . Cada uno de estos elementos puede ser modificado para que muestren el texto que queramos, lo haremos desde las cajas de texto que encontramos a la derecha.

En Texto escribiremos el literal que queremos que se lea en el menú. Si ese elemento debe contener un enlace (a una página o a un correo electrónico) lo haremos escribiendo en la caja de texto Vínculo. Si trabajamos en una página con marcos podremos utilizar el campo Destino para establecer en cuál de ellos se abrirá el enlace.

Por último, Título contendrá una ayuda contextual que se mostrará en forma de etiqueta al colocar el ratón sobre el elemento del menú.

 

Una vez definido el primer nivel, asaremos a crear los hijos de cada elemento. Selecciona uno de los items y crea las opciones que se desplegarán al colocar el ratón sobre ellos. De nuevo utiliza los botones y para gestionar los elementos en el segundo listado.

Selecciona cada uno de los elementos de primer nivel y ves creando sus subelementos uno a uno.

 

Una vez creado un elemento de segundo nivel también seremos capaces de colgar sobre éste otro elemento de tercer nivel para ello utiliza los botones y y rellena el tercer listado de elementos.

 

Al final, dependiendo de lo complejo de nuestro menú, puede resultarnos muy difícil ver su estructura o recorrer sus elementos. Además, puede que hayamos añadido algún estilo CSS que Dreamweaver no interpreta como toca. En estos casos, resulta muy útil la opción Desactivar estilos, que nos mostrará el HTML real del menú: una lista con enlaces.

Pág. 27.2

Atrás  Inicio  Adelante