megaMenu

Basic code for a MegaMenu. Here I have used Occams razor and made it as simple as possible.

by Per Thykjaer Jensen

HTML

<h1>Megamenu Sample</h1>

<nav>
  <a href="#" id="openMegaMenu">Show Megamenu</a>
</nav>

<section id="megaMenu">

  <div id="hideMega"> X Hide Megamenu </div>

  <article class="row">

    <!-- Delete the divs, and then add your WordPress markup here -->

    <div class="tab">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et saepe, nostrum at quis cumque tempora reprehenderit impedit sit ab quas quaerat ullam eveniet repudiandae ut perspiciatis sint nam amet ratione.</div>
    <div class="tab">2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et saepe, nostrum at quis cumque tempora reprehenderit impedit sit ab quas quaerat ullam eveniet repudiandae ut perspiciatis sint nam amet ratione.</div>
    <div class="tab">3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et saepe, nostrum at quis cumque tempora reprehenderit impedit sit ab quas quaerat ullam eveniet repudiandae ut perspiciatis sint nam amet ratione.</div>
  </article>

</section>

CSS

.row {
  display:flex;
}

#megaMenu {
  display: none;
  background-color: orange;
}
#hideMega {
  min-height: 56px;
  background-color: lime;
  cursor: alias; /* alternative cursor */
}

JavaScript

// show the menu (will also take: click, touch)
openMegaMenu.onmouseover = (event) => {
  megaMenu.style.display = "block"
}

// hide the menu
hideMega.onclick = (event) => {
  megaMenu.style.display = "none"
}