Cómo diseñar un menú personalizado

Aquí aprenderás a diseñar un menú personalizado.

Así es como se construye:

Ver

• Selecciona una «Tabla» y colócala en el lienzo; desde la paleta Propiedades, edita el número de columnas y archivos a un archivo y cuatro columnas, además, ajusta la altura de la tabla para simular una cabecera.

• Selecciona cada celda una a una y en la paleta Propiedades cambia la disposición a «Horizontal».

• Coloca cuatro textos centrados en el lienzo y escribe «Inicio», «Productos», «Servicios» y «Acerca de», mantén pulsado comando (Mac) o control (Windows), y arrastra los elementos dentro de las celdas, verás un tinte azul.

• Desde la biblioteca «Componentes web», introduce un icono «Chevron hacia abajo» junto a «Productos», «Servicios» y «Acerca de». Al haber dado a cada celda una disposición horizontal, el icono se colocará horizontalmente al texto. En la paleta Propiedades, puedes ajustar el espacio entre el texto y el icono.

• Para las opciones de menú, coloca una nueva «Tabla» y desde la paleta Propiedades edita las columnas a una y las filas a tres.

• Mantén pulsado comando (Mac) o control (Windows) y coloca 3 textos dentro de cada celda para «Elemento 1», «Elemento 2» y «Elemento3».

• Con la «Tabla» seleccionada ve a la paleta Propiedades y cambia el color de todas las opciones de borde a gris claro y desmarca el borde interior que separa las celdas.

• Con la «Tabla» que hemos creado seleccionada, mantén pulsada la tecla alt y arrastra para duplicarla, colócala debajo de «Servicios» y duplícala una vez más para «Acerca de». Con la «Tabla» bajo «Acerca de» seleccionada, ve a la paleta Propiedades y edita el número de filas a dos.

• Selecciona una a una las tablas de Elementos, haz clic con el botón derecho del ratón sobre ellas y selecciona la opción «Agrupar en Panel Dinámico».

• Asegúrate de que cada «Panel dinámico» sobresale del borde de la tabla que contiene para que los eventos que creemos a continuación funcionen correctamente.
• Selecciona los tres paneles Dinámicos que funcionan como desplegables, ve a la paleta Propiedades y haz clic en el icono «Oculto en simulación». Los desplegables no serán visibles en simulación por defecto.

  

Eventos

Con la celda «Productos» seleccionada, ve a la paleta Eventos y haz clic en «Añadir evento».

1. En el cuadro de diálogo, haz clic en «Elegir activador», pasa el ratón por encima de la sección «Ratón» y selecciona «Al entrar el ratón».
2. En «Elegir acción», selecciona «Mostrar elemento oculto» y selecciona el «Panel dinámico» que actúa como desplegable de la opción «Productos». Haz clic en «Aceptar» para terminar de crear el evento.

Con la celda «Productos» aún seleccionada, ve a la paleta Eventos y haz clic en el signo «+» para añadir un evento.

1. En el cuadro de diálogo, haz clic en «Elegir activador», pasa el ratón por encima de la sección «Ratón» y selecciona «Al entrar el ratón».
2. En «Elegir acción», selecciona «Ocultar elemento» y selecciona los dos «Paneles dinámicos» que actúan como desplegables para las opciones «Servicios» y «Acerca de». Haz clic en «Aceptar» para terminar de crear el evento.

En la paleta Eventos, entre las dos opciones, haz clic en la flecha, y cámbiala a la opción «CON anterior», para que ambas acciones se realicen a la vez.

Repite los eventos para cada opción del menú superior, y su correspondiente desplegable. En cada caso, debemos seleccionar el «Panel dinámico» que queremos mostrar y los que queremos ocultar.

Selecciona la celda «Inicio» y ve a la paleta Eventos, haz clic en «Añadir evento».

1. En el cuadro de diálogo, haz clic en «Elegir activador», pasa el ratón por encima de la sección «Ratón» y selecciona «Al entrar el ratón».
2. En «Elegir acción», selecciona «Ocultar elemento» y selecciona los tres «Paneles dinámicos» de las opciones. Haz clic en «Aceptar» para terminar de crear el evento.

Selecciona los «Paneles dinámicos» de la opción «Productos» y ve a la paleta Eventos, haz clic en «Añadir evento».

1. En el cuadro de diálogo, haz clic en «Elegir activador», pasa el ratón por encima de la sección «Ratón» y selecciona«al salir del ratón«.
2. En «Elegir Acción», selecciona «Ocultar elemento» y selecciona el mismo «Panel dinámico», De esta forma, al salir del «Panel dinámico», éste ya no se mostrará. Haz clic en «Aceptar» para terminar de crear el evento.

Repite el mismo proceso para cada uno de los «Paneles dinámicos».

Selecciona la primera celda (Elemento 1) de la columna en el «Panel dinámico» de la opción «Productos», ve a la paleta Eventos y haz clic en «Añadir evento».

1. En el cuadro de diálogo, haz clic en «Elegir activador», pasa el ratón por encima de la sección «Ratón» y selecciona«al pasar el ratón«.
2. En «Elegir acción», selecciona «Cambiar estilo» y en el menú desplegable «Seleccionar estilo a cambiar» elige fondo y edita el color. De esta forma, al pasar el ratón por encima del «Elemento 1», conseguiremos un efecto de retroalimentación. Haz clic en «Aceptar» para terminar de crear el evento.

Con la celda (Elemento 1) aún seleccionada, ve a la Paleta de Eventos y haz clic en el botón «Copiar todos los eventos». A continuación, selecciona cada una de las celdas y haz clic en la opción «Pegar todos los eventos». El objetivo se cambiará automáticamente.

Simula tu prototipo.