En Adobe Muse podemos crear elementos sin necesidad de comprar widgets de terceros. Dentro de Muse está la Biblioteca de Widgets, y lo mejor de todo, podemos combinar esos widgets y crear otros. Esto es lo que vamos a hacer en este tutorial, vamos a utilizar dos widget para crear un Menú móvil con efecto acordeón.

  1. Creamos las páginas necesarias para nuestro sitio web y las renombrados. Este paso podemos modificarlo más tarde si se van a añadir más páginas. Arrastramos el Menú horizontal que vamos a utilizar de la Biblioteca de Widgets. Veremos que automáticamente reconoce las páginas que hemos creado. Le añadimos los colores que queramos, jugamos con los estados y los fijamos a la derecha del navegador, de tal manera que siempre se encontrará en la misma posición aunque el navegador se haga más pequeño.menu-movil-widgets-muse1
  2. Dentro de nuestro espacio de trabajo en Muse, arrastramos la barra de puntos de rotura para identificar dónde crear un nuevo breakpoint. En el momento que el widget menu horizontal choque con otros elementos web, como por ejemplo el logo, debemos crear un punto de rotura y colocar los elementos.menu-movil-widgets-muse2
  3. En este caso, hemos creado un punto de rotura en 710px. Seleccionamos el menú , botón derecho y escondemos el menú ya que a partir de este punto de rotura mostraremos el menú móvil. Arrastramos ahora de la Biblioteca de Widgets el Panel Acordeón. Eliminamos todo el contenido de las tablas dejando solo una y eliminamos todos los colores y trazos para hacerlo transparente. Ajustamos el tamaño a la anchura del navegador.menu-movil-widgets-muse3
  4. Arrastramos de nuevo el widget menu horizontal dentro del panel acordeón y lo ajustamos a la anchura del navegador. No olvides esconder este nuevo widget en los puntos de rotura más grandes.
  5. Cuando esté el menú listo y ajustado, solo nos queda incluir un icono que haga referencia al menú. Utilizaremos Font Awesome.menu-movil-widgets-muse4

Ver tutorial con pasos más detallados.