Adición y aplicación de estilo a los widgets de menú en Adobe Muse

Con la página maestra abierta para su edición en la vista Diseño, abra la Biblioteca de widgets. Si aún no está abierta, elija Ventana > Biblioteca de widgets.

En el panel Biblioteca de widgets, haga clic en Menús para expandir la lista de widgets de menú. En función del diseño de su sitio y el lugar en el que desea colocar el menú, seleccione una de las siguientes opciones:

• Horizontal para añadir un menú horizontal.
• Vertical para añadir un menú vertical.

Utilice la herramienta Selección para arrastrar el widget y colocarlo en la posición deseada en el diseño. Por ejemplo, puede colocar un widget de menú horizontal en la sección de encabezado.

Tenga en cuenta que el menú muestra automáticamente los nombres de las páginas que ha creado, en el mismo orden en el que aparecen en el mapa del sitio. Las etiquetas de menú están vinculadas automáticamente a las páginas, y son dinámicas. Es decir, si posteriormente decide cambiar o mover las páginas, el menú se actualiza automáticamente. Los enlaces seguirán funcionando de la forma prevista.

Haga clic en el selector de color del Panel de control y ajuste el color para el menú. A continuación, utilice el campo Tamaño de texto para ajustar el tamaño del texto para el texto del menú.

Haga clic en el widget de menú y, a continuación, en la flecha azul situada en la esquina superior derecha del widget. El sistema muestra el panel Opciones.

Configure el widget de menú mediante el panel Opciones. Puede configurar las siguientes opciones:

• Tipo de menú: especifica qué tipo de páginas se incluirán en la navegación del sitio. Seleccione Páginas principales para incluir solo las páginas del primer nivel o páginas principales. Seleccione Todas las páginas para incluir también las páginas secundarias en la navegación. Las páginas secundarias aparecen como submenús. Seleccione Manual para seleccionar manualmente las páginas deseadas que se mostrarán en el widget de menú.
• Dirección: especifique si desea añadir el menú horizontal o verticalmente.
• Editar conjuntamente: seleccione esta casilla de verificación si desea actualizar todos los elementos de menú juntos. De manera predeterminada, esta casilla de verificación está seleccionada. Si no selecciona esta casilla de verificación, las configuraciones que elija solo se aplican al elemento de menú seleccionado.
• Tamaño de elemento: especifique si los elementos de menú deben estar uniformemente distribuidos por ancho o tamaño.
• Mostrar icono a la izquierda: de forma predeterminada, esta casilla de verificación no está seleccionada. Seleccione esta opción si desea añadir un icono en la esquina izquierda de cada elemento de menú.
• Mostrar etiqueta: de forma predeterminada, esta casilla de verificación está seleccionada. Cuando se desactiva esta casilla de verificación, las etiquetas de menú no se muestran.
• Mostrar icono a la derecha: seleccione Desactivado si desea desactivar los iconos situados a la derecha. Seleccione Activado si desea configurar los iconos situados en la esquina derecha de los elementos de menú. El icono situado a la derecha es una opción útil cuando desee añadir flechas para indicar que existen submenús para un elemento de menú. También puede elegir la opción Solo submenús para configurar un icono a la derecha solo para aquellos elementos de menú que tienen submenús.
• Posición de las partes: especifica el punto de inicio para las partes internas de cada ficha.

Haga doble clic y seleccione la etiqueta de menú que desea editar.

Para editar el texto dentro del elemento de menú, abra el panel Texto (Ventana > Texto). Con la etiqueta seleccionada, utilice el panel Texto para dar formato al texto seleccionando estas opciones obligatorias:

• Fuente: seleccione la fuente que desea aplicar a la etiqueta de menú.
• Estilo de fuente: seleccione cursiva o negrita, si es necesario, para la etiqueta de menú.
• Tamaño: seleccione el tamaño de fuente para la etiqueta de menú.
• Color: en el campo desplegable Color, introduzca el código hexadecimal del color que desea aplicar. O bien seleccione el color que desee con el gotero.
  

Utilice el panel Texto para configurar los valores de los márgenes para su etiqueta de menú. Si ya tiene un estilo de hipervínculo que desea aplicar a la etiqueta de menú, seleccione el estilo en el campo desplegable situado junto a abc.

Para aplicar un estilo de párrafo, seleccione el estilo en el campo desplegable Estilo de párrafo del panel Texto.

Para aplicar Relleno y Trazo a las etiquetas de menú, haga doble clic y seleccione la etiqueta de menú. En la barra de herramientas situada en la parte superior de la página, seleccione el color de relleno y color del trazo. 

También puede editar el grosor del trazo y habilitar el radio de vértice para las etiquetas de menú desde la barra de herramientas.

Con la herramienta Selección, elija la etiqueta de menú para la que desee crear el estado de rollover. Abra el panel Estados. Observe que los estados predeterminados del botón ya están definidos. Haga clic en la miniatura Rollover del panel Estados para editar ese estado.

Con la etiqueta de menú aún seleccionada, utilice el selector de color de Relleno y elija la opción sin relleno (transparente) haciendo clic en la muestra de color blanco con la línea diagonal roja.

Haga clic en la herramienta Texto y utilice el selector de color en el panel de control para elegir un color blanco hueso para el estado Rollover.

En el panel Estados, seleccione el estado Ratón pulsado. Con la herramienta Texto todavía seleccionada, establezca el texto de Ratón pulsado en un color más oscuro, seleccionando una muestra de color en el selector de color del panel de control.

En el panel Estados, seleccione el estado Activo. Haga clic en el vínculo Relleno del panel de control para abrir el menú Relleno.

En el menú Relleno, haga clic en el selector de color y defina el color de relleno en Ninguno. Haga clic en el icono de la carpeta que está junto a la sección Imagen. En el cuadro de diálogo Importar que aparece a continuación, busque y seleccione el archivo de imagen de fondo denominado top-nav-over.png. Haga clic en Seleccionar para elegirlo. El cuadro de diálogo Importar se cierra automáticamente.

Estando todavía en el menú Relleno, compruebe que la opción Encaje se defina en Tamaño original. A continuación, en la sección Posición, haga clic en el centro de los nueve puntos. Esto provoca que la imagen de fondo se rellene desde la posición central sin color de relleno, a tamaño original. Haga clic en cualquier otra parte para cerrar el menú Relleno.

Como la opción predeterminada Editar conjuntamente está activada en el widget de menú horizontal, todos los cambios realizados en la etiqueta de menú se aplican automáticamente a todos los botones de la barra de navegación.

Seleccione Archivo > Guardar para guardar el trabajo. Haga clic en la X que aparece en la pestaña maestra A para cerrar la página en la vista Diseño y volver a la vista Plan. Tenga en cuenta que todas las miniaturas de la página se actualizan para incluir el contenido añadido a la página maestra.

Supongamos que ya ha creado el mapa del sitio para su sitio: vaya a la vista Plan en Adobe Muse. Para este procedimiento, supongamos que tiene un mapa del sitio con páginas que incluyen Inicio, Portafolio, Mi historia, Contacto y Productos.

Si va a la página maestra y arrastra un widget de menú, verá que todas las páginas están incluidas como parte del menú.

Para excluir una página específica, en la vista Plan, haga clic con el botón derecho en la página que desea excluir. Haga clic en Opciones de menú > Excluir página de menús.

Por ejemplo, si desea excluir la página Productos, haga clic con el botón derecho en Productos. A continuación, seleccione Opciones de menú> Excluir página de menús.

Ahora, cuando regrese a la sección de la página maestra para ver su menú, puede ver que Productos se ha eliminado del widget de menú.

En situaciones en las que desea que aparezca un elemento de menú sin un vínculo, haga clic con el botón derecho en la página específica en la vista Plan. Seleccione Opciones de menú > Incluir página sin hipervínculo.

Esta opción es adecuada en varios casos de uso durante la creación de un sitio web. Por ejemplo, si tiene una página Productos de rollover en la que desea que los visitantes del sitio solo hagan clic en las categorías de productos y no en la etiqueta de Productos principal, puede utilizar esta opción.