# Creating a Mega Menu

# Introduction

Welcome to a tutorial of the Modyo training series. This tutorial focuses on Modyo Channels, using the Navigation module, and Templates to create a mega menu on your site.

Navigation is a tool that helps us develop in a simple way and can then be managed in a better way.

In this tutorial we will continue to use the Dynamic Bank site.

See Figma of design

# Prerequisites

Completed the tutorials:

Familiar with:

  • HTML
  • CSS
  • JS
  • Modyo Platform

# Step 1: Complete the Menu

In the previous Tutorials you created the Dynamic Bank site, you are now going to generate a complex menu using the Navigation, and Templates tools.

To add more items to the menu, follow these steps:

  1. In the side menu, select Channels and click Sites.
  2. Select your site and click Navigation.
  3. Select the menu Main and fill it with the following fields:
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 #

Which will give us a view like this:

  1. Save your changes and when finished click Publish.

# Step 2: Create view in Templates

At this point, there is no place to display your menu. To display the menu, you're going to use Liquid and Snippets.

To view your menu, follow these steps:

  1. In the main menu, click Templates.
  2. Open Snippets, and select the General snippet menu.
  3. Replace the code with the following:

This code will take the menu you created and iterate over the items found, displaying them using a combination of Liquid and HTML. The code applies different logic if the item is in the first, second, or third level of depth.

{% 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. Create a new custom Snippet megamenu_css and add the following code:
.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. Open the Style Sheet style, and add 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. Add the images in the Asset Manager and replace the background-image of each class with the Asset URL.
  1. Create a new custom Snippet menu_responsive and add the menu code that will go in the 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>

Modify Snippet code Header where we will add the snippet of menu_responsive that we created previously.

<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>

# Conclusion

Congratulations! You have completed a new course in the Modyo tutorial series.

In this tutorial we focused on creating a menu from Navigation and then deploying the code in Templates.

Last Updated: 6/28/2022,