Megamenus

An extension of the Codebase menu, the Codebase megamenu is an all-in-one responsive navigation system. It displays as an offcanvas sidebar on small viewports and as a navbar on medium viewports up.

Example:

Example:

<i id="megamenu-example-1" class="megamenu-navicon fas fa-bars"></i>

<nav id="megamenu-example-1" class="megamenu">
  <i class="megamenu-close fas fa-times"></i>
  <ul class="menu">
    <li class="menu-item"><a href="">Item 1</a></li>
    <li class="menu-item has-submenu mega">
      <a href="">Item 2</a>
      <span class="submenu-toggle fas fa-plus"></span>
      <div class="submenu-content">

        <!-- mega (100%) width submenu panel -->

      </div>
    </li>
    <li class="menu-item has-submenu">
      <a href="">Item 3</a>
      <span class="submenu-toggle fas fa-plus"></span>
      <div class="submenu-content">

        <!-- small “dropdown type” submenu panel -->

      </div>
    </li>
    <li class="menu-item"><a href="">Item 4</a></li>
    <li class="menu-item"><a href="">Item 5</a></li>
  </ul>
</nav>

Megamenu Features

• Offcanvas sidebar mode for small viewports, with JavaScript toggled CSS transform animation to reveal the sidebar and to reveal submenus.
• Navbar mode for large viewports, with CSS hover revealing dropdown and megamenu panels.
• Default LTR and RTL modes, with -right and -left overrides for positioning the offcanvas sidebar, megamenu navicon, and/or navbar submenus.
• Use of icons (e.g. Font Awesome) for offcanvas navicon, offcanvas submenu reveal toggle, and offcanvas close.
• Automatic built-in carets for submenu parents in navbar mode.
• Full-width “mega” submenu panel for complex submenus, capable of containing a multi-column grid, menus, cards, form elements and buttons – whatever you require.
• Offcanvas mode uses JS to add/remove CSS classes to show or hide the navbar content. Navbar mode uses CSS hover for revealing submenus. Parent hyperlinks are followable.
• “Click outside to dismiss” offcanvas sidebar (in addition to the offcanvas close icon).
• Window-resize also dismisses the megamenu in offcanvas mode (e.g. rotating a phone or small tablet between portrait and landscape orientation).

Setting up the Megamenu

Wrap a .megamenu around a .menu, add a few controls (at least .megamenu-navicon and .megamenu-close), and there you have it.

The .megamenu element it must have an ID to identify it for the offcanvas mode activity that is toggled by its respective .megamenu-navicon (see Megamenu in Offcanvas Mode for more information).

<nav id="ex-1" class="megamenu">
  ...
</nav>

<span data-megamenu-id="ex-1" class="megamenu-navicon">MENU</span>

You can position the megamenu and its navicon controller wherever you want in your HTML.

Use the class .megamenu-navicon whether or not you include an “hamburger” icon. (See how example above just has the word MENU.)

Megamenu Mode Breakpoint

The viewport width at which the Codebase megamenu switches between offcanvas mode and navbar mode is controlled by the media query variable $megamenu-mq in codebase/01-basics/__default-variables.scss. By default, this is set at the same lower breakpoint width as is used by the flexbox and grid layouts: $mq-md = 768px.

Megamenu in Offcanvas Mode

On small viewports (below the megamenu media query breakpoint width 768px (default)), the offcanvas panel slides in from the right for LTR mode and from the left for RTL mode.

These presets can be overridden using the modifier classes .megamenu-offcanvas-left or .megamenu-offcanvas-right (examples not shown).

<nav class="megamenu megamenu-offcanvas-left" id="ex-1">
  ...
</nav>

<nav class="megamenu megamenu-offcanvas-right" id="ex-2">
  ...
</nav>

The megamenu navicon (for revealing the offcanvas panel on small viewports) needs to have a data attribute data-megamenu-id that points to the ID of its respective megamenu:

<span data-megamenu-id="ex-1" class="megamenu-navicon">MENU</span>

<nav id="ex-1" class="megamenu">
  ...
</nav>

The megamenu navicon is automatically hidden at and above the megamenu media query breakpoint width (i.e. in navbar mode).

You can style and position the megamenu navicon any way you want. Traditionally, a “navicon” icon has been used (in these docs, this has been supplied by the Font Awesome “bars” icon, ).

There are also some optional modifier classes that can be used to fix the position of the megamenu navicon near the top-right .megamenu-navicon-fixed-right or top-left .megamenu-navicon-fixed-left of the viewport (examples not shown):

<span class="megamenu-navicon megamenu-navicon-fixed-right fas fa-bars" data-megamenu-id="ex-1"></span>

<span class="megamenu-navicon megamenu-navicon-fixed-left fas fa-bars" data-megamenu-id="ex-1"></span>

In offcanvas mode, the revealed megamenu can be dismissed in any of the following four ways:

1. Clicking again the .megamenu-navicon toggle.
2. Clicking the .megamenu-close:

    <span class="megamenu-close fas fa-times"></span>

3. Clicking anywhere outside the offcanvas panel will dismiss it.
4. Resizing the viewport (or rotating between portrait and landscape orientation) will also dismiss the offcanvas panel.

Megamenu in Navbar Mode

In navbar mode by default, parent menu items are positioned inline left-aligned (LTR mode) or right-aligned (RTL mode).

Add some flexbox classes to control the position of the megamenu parent links (effective in navbar mode only).

Right-aligned navbar (unnecessary in RTL mode):

Maganav example 2  

<nav id="megamenu-example-2" class="megamenu flexbox flexbox-right">
  ...
</nav>

Left-aligned navbar (unnecessary in LTR mode):

Maganav example 3  

<nav id="megamenu-example-3" class="megamenu flexbox flexbox-left">
  ...
</nav>

Centered navbar:

Maganav example 4  

<nav id="megamenu-example-4" class="megamenu flexbox flexbox-center">
  ...
</nav>

Space between navbar parent menu items:

Maganav example 5  

<nav id="megamenu-example-5" class="megamenu">
  ...
  <ul class="menu flexbox flexbox-space-between">
    ...
  </ul>
</nav>

Dual menubars within navbar:

Maganav example 6  

<nav id="megamenu-example-6" class="megamenu flexbox flexbox-space-between">
  ...
  <!-- menu 1 -->
  <ul class="menu">
    ...
  </ul class="menu">
  <!-- menu 2 -->
  <ul>
    ...
  </ul>
</nav>

Adding a Megamenu Wrapper and a Brand Link

If you wrap the whole megamenu in a block element with flexbox classes to control the wrapper content layout, you can set up a traditional navbar with a brand link (you can use your own text and/or a suitable image).

You can set up a megamenu wrapper element by using the CSS class .megamenu-wrapper. It controls its content by flexbox and it puts space between child elements – typically a brand element, the navicon and the megamenu. In offcanvas mode, this will push the navicon to the opposite side of the wrapper from the brand element. In navbar mode, this will similarly push the megamenu away from the brand element.

As the brand, navicon and wrapper elements are not part of the megamenu itself, they will still be on the webpage on small viewports (while the megamenu is in offcanvas mode).

Example 7 (background color added to aid navbar visibility):

<div class="megamenu-wrapper">
  <a class="inline-block p-block bold" href="">Brand</a>
  <span
    data-megamenu-id="megamenu-example-7"
    class="megamenu-navicon p-block">
    Menu &nbsp;<i class="fas fa-bars"></i>
  </span>
  <nav id="megamenu-example-7" class="megamenu">
    ...
  </nav>
</div>

Adding an Internal Container to the Megamenu Wrapper

What if you want to introduce a container within the megamenu wrapper, so that you can constrain the width of the content (while the wrapper itself is goes to the full width of the viewport)?

This would mean that the brand, navicon and menubar are no longer direct children of .megamenu-wrapper, so they will no longer be influenced by its flexbox rules. No problem: your intervening .container will therefore need to have its own flexbox classes –.flexbox.flexbox-space-between so that you can achieve the traditional navbar layout again.

Example 8 (background color added to aid navbar visibility):

(The example above uses .contaner-sm for demonstration purposes, but you will more likely want one of the larger container widths.)

<div class="megamenu-wrapper">
  <div class="container container-lg flexbox flexbox-space-between">
    <a class="inline-block p-block bold" href="">Brand</a>
    <span 
      data-megamenu-id="megamenu-example-8"
      class="megamenu-navicon p-block">
      Menu &nbsp;<i class="fas fa-bars"></i>
    </span>
    <nav id="megamenu-example-8" class="megamenu">
      ...
    </nav>
  </div>
</div>

Fixing the Megamenu to the top of the Viewport

Use .megamenu-wrapper.megamenu-wrapper-fixed-top to fix the megamenu wrapper to the top of the viewport.

<div class="megamenu-wrapper megamenu-wrapper-fixed-top">
  <a class="inline-block p-block bold" href="">Brand</a>
  <span
    data-megamenu-id="megamenu-example-9"
    class="megamenu-navicon p-block">
    Menu &nbsp;<i class="fas fa-bars"></i>
  </span>
  <nav id="megamenu-example-9" class="megamenu">
    ...
  </nav>
</div>

This fixing only affects the megamenu wrapper (and the megamenu in navbar mode). In offvanvas mode the megamenu already has a fixed position.

Adding Form Elements and Buttons to the Navbar

Simply place a <form> with a few form elements (including an input button) within a megamenu parent list item <li>. In Codebase, form elements and buttons are inline elements by default.

Use .small utility classes to make the form elements and buttons fit within the megamenu.

The <form> element will recieve a little padding, so that it is positioned well in both offcanvas mode and navbar mode.

Example 9 (background color added to aid navbar visibility):

Maganav example 9  

<nav id="megamenu-example-9" class="megamenu flexbox flexbox-right">
  <i class="megamenu-close fas fa-times"></i>
  <ul class="menu">
    <li class="menu-item"><a href="">Item 1</a></li>
    <li class="menu-item"><a href="">Item 2</a></li>
    <li class="menu-item">
      <form>
        <input class="small" id="search-example" name="examplename" placeholder="Search..." type="search">
        <button class="btn btn-icon small" type="submit">
          <span class="fas fa-search"></span>
        </button>
      </form>
    </li>
  </ul>
</nav>

Adding Simple Submenus

The Codebase megamenu is capable of handling two kinds of “dropdown” submenus: simple and full-width “mega” submenu panels.

Both kinds of submenu are set up using:

1. .has-submenu on the parent link wrapping <li>.
2. .submenu-toggle is used by a JS toggler in offcanvas mode, to add/remove .submenu-is-revealed from the parent link wrapping <li>. In these examples, this is assigned to a Font Awesome icon that appears adjacent to the parent link.
3. A wrapping .submenu-content around the child menu.

<li class="has-submenu">
  <a href="">Parent menu item</a>
  <span class="submenu-toggle fas fa-plus"></span>
  <div class="submenu-content"> ... </div>
</li>

Example 10 – with simple submenu (under parent item 3):

Maganav example 10  

<button data-megamenu-id="megamenu-example-11" class="megamenu-navicon btn">Maganav example 11 &nbsp;<i class="fas fa-bars"></i></button>

<nav id="megamenu-example-10" class="megamenu megamenu-offcanvas-right mb-3e">
  <i class="megamenu-close fas fa-times"></i>
  <ul class="menu">
    <li class="menu-item"><a href="">Item 1</a></li>
    <li class="menu-item"><a href="">Item 2</a></li>
    <li class="menu-item has-submenu">
      <a href="">Item 3</a>
      <span class="submenu-toggle fas fa-plus"></span>
      <div class="submenu-content">
        <ul class="menu">
          <li class="menu-item"><a href="">Item 3.1</a></li>
          <li class="menu-item"><a href="">Item 3.2</a></li>
          <li class="menu-item"><a href="">Item 3.3 with long text</a></li>
          <li class="menu-item"><a href="">Item 3.4</a></li>
        </ul>
      </div>
    </li>
    <li class="menu-item"><a href="">Item 4</a></li>
    <li class="menu-item"><a href="">Item 5</a></li>
  </ul>
</nav>

Submenu features:

• In offcanvas mode, each submenu is revealed or hidden using a JavaScript toggle. Besides this toggle, submenus are also dismissed by closing the sidebar in offcanvas mode. Within the revealed submenu, all content is laid out in a single column vertically.
• The navbar mode reveal of submenus is controlled entirely by CSS (and the parent link is followable). A “dropdown indicator” triangular caret is automatially added beside the parent link. A semi-transparent background color indicator appears on the parent link, so that that the (sighted) visitor remains aware of what parent the submenu belongs to (essential if the submenu has a lot of content). And a subtle CSS animation occurs during the showing and hiding of the submenu.
• By default, submenus will be left-aligned for LTR mode and right-aligned RTL mode.

Simple submenu dropdown-alignment can also be controlled by adding CSS classes .has-submenu-left or .has-submenu-right to the parent link wrapping <li>.

Maganav example 11  

...
<li class="menu-item has-submenu has-submenu-left">
  <a href="">Item 3 (Left)</a>
  <span class="submenu-toggle fas fa-plus"></span>
  <div class="submenu-content">
    <ul class="menu">
      ...
    </ul>
  </div>
</li>
<li class="menu-item has-submenu has-submenu-right">
  <a href="">Item 4 (Right)</a>
  <span class="submenu-toggle fas fa-plus"></span>
  <div class="submenu-content">
    <ul class="menu">
      ...
    </ul>
  </div>
</li>
...

Adding Full-width “Mega” Submenu Panels

Full width submenu panels are set up in the same way as simple submenus, with the addition of the .mega class on the parent link wrapping <li>.

<li class="menu-item has-submenu mega">
  <a href="">Parent menu item</a>
  <span class="submenu-toggle fas fa-plus"></span>
  <div class="submenu-content"> ... </div>
</li>

This will cause the submenu to be expanded to the full width of the .megamenu block element.

Within the full-width submenu content panel, you can place anything: menus, cards, form elements and buttons – whatever you require.

You may need to set up a columnar multi-column flexbox or grid layout. Be sure to give this layout the same breakpoint width as is set for the megamenu offcanvas/navbar mode switch – this is -md (768px) by default.

Example 12 (background color added to aid navbar visibility):

Meganemu example 12  

Adding Color

The Codebase megamenu offcanvas panel and navbar submenu panels are given the default <body> background color (for both light and dark themes), so that they can be seen over whatever they overlay. But in navbar mode the navbar itself is transparent.

You can add colour using your own CSS or use Codebase color UI or utility classes.

Above, you've seen the utility class .bg-theme-2 being applied to a couple of the megamenus. You won't want to use .bg-theme-3 or above without also adjusting the color of text and hyperlinks to aid readability.

You can, however, use any of the UI color utility classes: primary, secondary, success, warning, or danger. These switch text and hyperlink color to white. These will apply their color to the navbar, submenu panel and offcanvas panel.

Example 13 using .primary:

Megamenu Classes