# Creación de Mega Menú

# Introducción

Bienvenido a un tutorial de la serie de entrenamiento de Modyo. Este tutorial se enfoca en Modyo Channels, utilizando los modulos de Navigation, y Plantillas para crear un mega menú en tu sitio.

Navigation es una herramienta que nos ayuda a desarrollar de manera simple y que luego se puede administrar de una mejor manera.

En este tutorial seguiremos usando el sitio de "Dynamic Bank".

Ver Figma del diseño

# Requisitos Previos

Completado los tutoriales:

Conocimientos de:

  • HTML
  • CSS
  • JS
  • La plataforma de Modyo

# Paso 1: Completar el Menú

En los Tutoriales anteriores creaste el sitio de Dynamic Bank, ahora vas a generar un menú complejo usando las herramientas de Navigation, y Plantillas.

Para agregar más elementos al menú, sigue estos pasos:

  1. En el menú lateral, selecciona Channels, haz click en Sitios.
  2. Selecciona tu sitio y haz click en Navegación.
  3. Selecciona el menú Main y lo llenamos con los siguientes campos:
Name Description Classes Link URL Parent
Home Home Layout
Productos megamenu Custom URL #
Planes Custom URL # Productos
Cuenta Corriente Donde quieras con Dynamic cuenta-corriente Custom URL # Planes
Plan Dynamic Nos adaptamos a tus necesidades plan-dynamic Custom URL # Planes
Tarjetas Custom URL # Productos
Tarjetas de Crédito Disfruta todos nuestros beneficios credito Custom URL # Tarjetas
Tarjetas de Débito Realiza compras en comercios debito Custom URL # Tarjetas
Créditos Custom URL # Productos
Crédito Hipotecario El hogar que siempre soñaste hipotecario Custom URL # Créditos
Crédito de Consumo Tus proyectos son los nuestros consumo Custom URL # Créditos
Beneficios Custom URL #
Sucursales Custom URL #

Lo que nos dará una vista así:

  1. Guarda tus cambios y al terminar haz click en Publicar.

# Paso 2: Crear vista en Plantillas

En este paso, todavía no hay lugar para desplegar tu menú. Para visualizar el menú, vas a generarlo utilizando Liquid y Snippets.

Para visualizar tu menú, sigue estos pasos:

  1. En el menú principal, haz click en Plantillas.
  2. Abre Snippets, y selecciona el snippet General menu.
  3. Reemplaza el código por el siguiente:

Este código va a tomar el menú que creaste e iterar sobre los items encontrados, desplegándolos utilizando una combinación de Liquid y HTML. El código aplica diferente lógica si el ítem se encuentra en primer, segundo, o tercer nivel de profundidad.

{% assign menu = menus['main'] %} 
<ul class="nav navbar-nav d-flex align-items-center" role="menu" aria-label="Main menu {{responsive}}">
	{% assign items_to_show = menu.items | visible_items %}
	{% for item in items_to_show %}
	{% assign active = item.url | active_page: request.url %}
	{% assign second_level = item.child_items | visible_items %}
	{% if second_level.size > 0 %}
	{% if item.classes == 'megamenu'%}
	<!-- -->
	<li class="nav-item nav-item-{{ item.parameterized_label }} dropdown menu-item megamenu {{ active }}">
		<a id="megamneu" href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="{{item.classes}} nav-link dropdown-toggle">{{ item.label }} <span class="sr-only">dropdown</span></a>
		<div aria-labelledby="megamneu" class="megamenu dropdown-menu border-0 p-0 m-0">
			<div class="container p-lg-0">
				<div class="row justify-content-end w-100">
					<div class="col-12 col-xl-8 bg-white rounded m-0 shadow-sm">
						<div class="p-4">
							<div class="row">
								{% for child in second_level %}
								<div class="col-4">
									<p class="megamenu-title small font-weight-bold mb-0 text-uppercase">{{ child.label }}</p>
									<ul class="list-unstyled">
										{% assign third_level = child.child_items | visible_items %}
										{% if third_level.size > 0 %}
										{% for child in third_level %}
										<a target="{{ child.target }}" rel="{{ child.target | item_rel}}" class="{{child.classes}} megamenu-item d-flex" href="{{ child.url }}" {% if child.url == request.url %}aria-current="page"{% endif %}>
											<div class="megamenu_icon icon-{{child.classes}}">

											</div>
											<div>
												<span>{{ child.label }}</span>
												<p class="small text-muted mb-0">{{ child.description }}</p>
											</div>
										</a>
										{% endfor %}
										{% endif %}
									</ul>
								</div>
								{% endfor %}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</li>
	<!-- -->
	{% else %}
	<li class="nav-item nav-item-{{ item.parameterized_label }} dropdown menu-item {{ active }}" role="none">
		<a target="{{ item.target }}" rel="{{ item.target | item_rel}}" class="{{item.classes}} nav-link dropdown-toggle {% for child in second_level %}{% if child.url == request.url  %}active{% endif %}{% endfor %}" href="javascript:void(0)" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown{{ item.label | replace: ' ','' | replace: 'ñ','n' | downcase }}Button{{ responsive }}" role="menuitem">
			{{ item.label }} <span class="sr-only">dropdown</span>
		</a>
		<div class="{{item.classes}} submenu-{{ item.label | replace: ' ','' | replace: 'ñ','n' | downcase }} dropdown-menu" aria-labelledby="dropdown{{ item.label | replace: ' ','' | replace: 'ñ','n' | downcase }}Button{{responsive}}" aria-expanded="false">
			{% for child in second_level %}
			<a target="{{ child.target }}" rel="{{ child.target | item_rel}}" class="dropdown-item" href="{{ child.url }}" {% if child.url == request.url %}aria-current="page"{% endif %}>
				{{ child.label }}
			</a>
			{% assign third_level = child.child_items | visible_items %}
			{% if third_level.size > 0 %}
			{% for child in third_level %}
			<a target="{{ child.target }}" rel="{{ child.target | item_rel}}" class="dropdown-item" href="{{ child.url }}" {% if child.url == request.url %}aria-current="page"{% endif %}>
				<span class="pl-2 small">{{ child.label }}</span>
			</a>
			{% endfor %}
			{% endif %}
			{% endfor %}
		</div>
		{% endif %}
		{% else %}
	<li class="nav-item nav-item-{{ item.parameterized_label }} {{ active }}" role="none">
		<a target="{{ item.target }}" class="{{item.classes}} nav-link" rel="{{ item.target | item_rel}}" href="{{ item.url }}" {% if item.url == request.url %}aria-current="page" {% endif %} role="menuitem" aria-label="{{ item.label }} {{responsive}}">{{ item.label }}</a>
	</li>
	{% endif %}
	{% endfor %}
</ul>
  1. Crea un nuevo Snippet personalizado megamenu_css y agrega el siguiente código:
.megamenu {
	position: static
}
.megamenu .dropdown-menu {
	background: none;
	border: none;
	width: 100%
}
a.megamenu-item {
	color: {{dark}};
	padding: .5rem 0;
	display: block;
	text-decoration: none !important;
}
.megamenu-title {
	color: #A5AECC;
}
.dropdown-toggle::after {
	color: #A5AECC;
}
.megamenu_icon {
	width: 30px;
	height: 30px;
	margin-right: 8px;
	background-repeat: no-repeat;
	background-position: center;
}
.nav-link.btn.btn-primary {
	color: white !important;
	padding: .5rem 1rem !important;
}
.navbar-expand-md .navbar-nav .dropdown-menu.megamenu {
	top: 85%;
}
.megamenu.show .nav-link {
	border-bottom: 0px solid transparent !important;
}
.megamenu_icon.icon-cuenta-corriente {
	background-image: url(Asset URL);
	background-size: 23px;
}
.megamenu_icon.icon-plan-dynamic {
	background-image: url(Asset URL);
	background-size: 22px;
}
.megamenu_icon.icon-debito {
	background-image: url(Asset URL);
	background-size: 22px;
}
.megamenu_icon.icon-credito {
	background-image: url(Asset URL);
	background-size: 22px;
}
.megamenu_icon.icon-hipotecario {
	background-image: url(Asset URL);
	background-size: 23px;
}
.megamenu_icon.icon-consumo {
	background-image: url(Asset URL);
	background-size: 21px;
}
.menu_responsive .nav-item {
	padding: 10px !important;
	margin-bottom: 10px !important;
}
#accordion_menu.navbar-nav .nav-link {
	padding: 1rem .5rem !important;
}
  1. Abre la Hoja de Estilos style, y agrega megamenu_css:
{% snippet "shared/libs/bootstrap_css" %}
{% snippet "shared/libs/materialdesign_icons_css" %}
{% snippet "shared/libs/file_upload_css" %}
{% snippet "shared/libs/select2_css" %}

{% snippet "shared/libs/modyo_base_css" %}
{% snippet "shared/libs/theme_css" %}
{% snippet "megamenu_css" %}
  1. Agrega las imágenes en el Asset Manager y remplaza el background-image de cada clase por el Asset URL.
  1. Crea un nuevo Snippet personalizado menu_responsive y agrega el código del menú que va a ir en el panel:
{% assign menu = menus['main'] %} 
<div id="accordion_menu" class="navbar-light navbar-nav">
	{% assign items_to_show = menu.items | visible_items %}
	{% for item in items_to_show %}
	{% assign active = item.url | active_page: request.url %}
	{% assign second_level = item.child_items | visible_items %}
	{% if second_level.size > 0 %}
	{% if item.classes == 'megamenu'%}
	<!-- -->
	<div>
		<div id="heading-{{ item.parameterized_label }}">
			<a class="nav-link dropdown-toggle" href="#collapse-{{ item.parameterized_label }}" data-toggle="collapse" data-target="#collapse-{{ item.parameterized_label }}" aria-expanded="false" aria-controls="collapse-{{ item.parameterized_label }}">
				{{ item.label }}
			</a>
		</div>
		<div id="collapse-{{ item.parameterized_label }}" class="collapse p-3" aria-labelledby="heading-{{ item.parameterized_label }}" data-parent="#accordion_menu">
			{% for child in second_level %}
			<div class="">
				<p class="megamenu-title small font-weight-bold mb-0 text-uppercase">{{ child.label }}</p>
				<ul class="list-unstyled">
					{% assign third_level = child.child_items | visible_items %}
					{% if third_level.size > 0 %}
					{% for child in third_level %}
					<a target="{{ child.target }}" rel="{{ child.target | item_rel}}" class="{{child.classes}} megamenu-item d-flex" href="{{ child.url }}" {% if child.url == request.url %}aria-current="page"{% endif %}>
						<div class="megamenu_icon icon-{{child.classes}}">
						</div>
						<div>
							<span>{{ child.label }}</span>
							<p class="small text-muted mb-0">{{ child.description }}</p>
						</div>
					</a>
					{% endfor %}
					{% endif %}
				</ul>
			</div>
			{% endfor %}
		</div>
	</div>
	<!-- -->
	{% else%}
	<!-- -->
	<div>
		<div id="heading-{{ item.parameterized_label }}">
			<a class="nav-link dropdown-toggle" href="#collapse-{{ item.parameterized_label }}" data-toggle="collapse p-3" data-target="#collapse-{{ item.parameterized_label }}" aria-expanded="false" aria-controls="collapse-{{ item.parameterized_label }}">
				{{ item.label }} - <!-- -->
				<div>
					<div id="heading-{{ item.parameterized_label }}">
						<a class="" href="#collapse-{{ item.parameterized_label }}" data-toggle="collapse" data-target="#collapse-{{ item.parameterized_label }}" aria-expanded="false" aria-controls="collapse-{{ item.parameterized_label }}">
							{{ item.label }} - 
						</a>
					</div>
					<div id="collapse-{{ item.parameterized_label }}" class="collapse" aria-labelledby="heading-{{ item.parameterized_label }}" data-parent="#accordion_menu">
						{% for child in second_level %}
						<div class="">
							<p class="megamenu-title small font-weight-bold mb-0 text-uppercase">{{ child.label }}</p>
							<ul class="list-unstyled">
								{% assign third_level = child.child_items | visible_items %}
								{% if third_level.size > 0 %}
								{% for child in third_level %}
								<a target="{{ child.target }}" rel="{{ child.target | item_rel}}" class="{{child.classes}} megamenu-item d-flex" href="{{ child.url }}" {% if child.url == request.url %}aria-current="page"{% endif %}>
									<span>{{ child.label }}</span>
								</a>
								{% endfor %}
								{% endif %}
							</ul>
						</div>
						{% endfor %}
					</div>
				</div>
				<!-- -->
			</a>
		</div>
		<div id="collapse-{{ item.parameterized_label }}" class="collapse" aria-labelledby="heading-{{ item.parameterized_label }}" data-parent="#accordion_menu">
			{% for child in second_level %}
			<div class="">
				<p class="megamenu-title small font-weight-bold mb-0 text-uppercase">{{ child.label }}</p>
				<ul class="list-unstyled">
					{% assign third_level = child.child_items | visible_items %}
					{% if third_level.size > 0 %}
					{% for child in third_level %}
					<a target="{{ child.target }}" rel="{{ child.target | item_rel}}" class="{{child.classes}} megamenu-item d-flex" href="{{ child.url }}" {% if child.url == request.url %}aria-current="page"{% endif %}>
						<div>
							<span>{{ child.label }}</span>
							<p class="small text-muted mb-0">{{ child.description }}</p>
						</div>
					</a>
					{% endfor %}
					{% endif %}
				</ul>
			</div>
			{% endfor %}
		</div>
	</div>
	<!-- -->
	{% endif %}
	{% else %}
	<div>
		<div id="heading-{{ item.parameterized_label }}">
			<a target="{{ item.target }}" class="{{item.classes}} nav-link" rel="{{ item.target | item_rel}}" href="{{ item.url }}" {% if item.url == request.url %}aria-current="page" {% endif %} role="menuitem" aria-label="{{ item.label }} {{responsive}}">{{ item.label }}</a>
		</div>
	</div>
	{% endif %}
	{% endfor %}
</div>

Modificar código del Snippet Header donde agregaremos el snippet de menu_responsive que creamos previamente.

<header role="banner" id="header">
  <div
    class="navbar navbar-expand-md  navbar-light py-4"
    role="navigation"
    aria-label="Navbar"
  >
    <div
      class="navbar-inner container d-flex justify-content-between align-items-center text-right"
    >
      <div class="d-flex flex-column">
        <a
          class="navbar-brand"
          href="{{ site.url }}"
          title="Logo {{site.name}}"
          rel="home"
        >
          <img
            src="{{ site.logo | asset_url | replace: 'R360x50', 'original'}}"
            alt="Logo {{site.name}}"
          />
        </a>
        <a class="sr-only sr-only-focusable btn btn-dark p-2" href="#content"
          >Skip to main content</a
        >
      </div>
      <div
        class="d-flex justify-content-end align-items-center"
        id="navbar-menu"
      >
        <nav class="d-none d-md-flex align-items-center">
          <h2 class="sr-only">Main Menu</h2>
          {% snippet 'shared/general/menu' %}
        </nav>
        <button
          type="button"
          class="py-2 px-3 bg-transparent border-0 text-dark position-relative d-block d-md-none"
          data-toggle="modal"
          data-target="#menu_panel"
        >
          <h2 id="mainmenulabel" class="sr-only">Open Menu</h2>
          <svg viewBox="0 0 100 60" width="30" height="30" style="fill:#384470">
						<rect width="100" height="5"></rect>
						<rect y="30" width="100" height="5"></rect>
						<rect y="60" width="100" height="5"></rect>
					</svg>
        </button>
      </div>
    </div>
    <!-- Menu Panel -->
    <div
      class="modal right fade"
      id="menu_panel"
      tabindex="-1"
      aria-labelledby="notificationsLabel"
      aria-modal="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header bg-white">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&#10005;</span>
            </button>
          </div>
          <div
            class="modal-body p-4 align-items-start"
          >
            {% snippet "menu_responsive" %}
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

# Conclusiones

¡Felicidades! Haz finalizado un nuevo curso de la serie de tutoriales de Modyo.

En este tutorial nos enfocamos en la creación de un menú desde Navigation y luego hacer el despliegue del código en Plantillas.

Last Updated: 8/6/2022,