View on GitHub

Orange megamenu

Boosted mega-menu is use for landing page with many cross-link

Usage

The plugin is initialised via javascript. Make sure to target the element containing the .mega-menu class.

$('#megamenu').megamenu();

HTML markup and especially <ul> menu structure must follow this example:

<header role="banner">
  <nav class="navbar navbar-dark navbar-expand-md" role="navigation">
    <div class="container-lg">
      <a class="navbar-brand" href="#">
        <img src="/docs/4.6/assets/brand/orange_logo.svg" alt="Back to homepage" title="Back to homepage" width="50" height="50"/>
      </a>
      <button class="navbar-toggler d-md-none collapsed" type="button" 
              data-toggle="collapse" data-target="#megamenu" 
              aria-controls="megamenu" aria-expanded="false" aria-label="Toggle navigation">
        <span aria-hidden="true" class="navbar-toggler-icon"></span>
      </button>
      <div class="mega-menu navbar-collapse collapse" id="megamenu">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#mega-level-1-collapse" data-toggle="collapse">Shop</a>
            <div class="mega-menu-panel collapse" id="mega-level-1-collapse">
              <div class="container-lg">
                <a class="nav-link all" href="#">View all shop</a>
                <a class="nav-link close ml-auto" data-toggle="collapse" href="#mega-level-1-collapse" aria-expanded="false" aria-controls="mega-level-1-collapse" title="Close shop menu">
                  <span class="sr-only">Close shop menu</span>
                </a>
              </div>
              <div class="container-lg">
                <ul class="navbar-nav">
                  <li class="nav-item col col-md-4">
                    <a class="nav-link" href="#">Mobile</a>
                    <ul class="navbar-nav">
                      <li class="nav-item"><a class="nav-link back" href="#">Previous</a></li>
                      <li class="nav-item"><span class="nav-heading text-primary">Mobile</span></li>
                      <li class="nav-item">
                        <a class="nav-link" href="#">Phones</a>
                        <ul class="navbar-nav">
                          <li class="nav-item"><a class="nav-link back" href="#">Previous</a></li>
                          <li class="nav-item"><span class="nav-heading text-primary">Phone</span></li>
                          <li class="nav-item"><a class="nav-link" href="#">iPhone</a></li>
                          <li class="nav-item"><a class="nav-link" href="#">FairPhone</a></li>
                          <li class="nav-item"><a class="nav-link" href="#">Samsung</a></li>
                        </ul>
                      </li>
                      <li class="nav-item"><a class="nav-link active" href="#">Plans</a></li>
                      <li class="nav-item"><a class="nav-link" href="#">Accessories</a></li>
                    </ul>
                  </li>
                  <li class="nav-item col col-md-4">
                    <a class="nav-link" href="#">Internet</a>
                    <ul class="navbar-nav">
                      <li class="nav-item"><a class="nav-link back" href="#">Previous</a></li>
                      <li class="nav-item"><span class="nav-heading text-primary">Internet</span></li>
                      <li class="nav-item"><a class="nav-link" href="#">Pay monthly offers</a></li>
                      <li class="nav-item"><a class="nav-link" href="#">Shared plans</a></li>
                      <li class="nav-item"><a class="nav-link" href="#">Orange TV</a></li>
                    </ul>
                  </li>
                  <li class="nav-item col col-md-4">
                    <a class="nav-link" href="#">Link 3</a>
                    <ul class="navbar-nav">
                      <li class="nav-item"><a class="nav-link back" href="#">Previous</a></li>
                      <li class="nav-item"><span class="nav-heading text-primary">Link 3</span></li>
                      <li class="nav-item"><a class="nav-link" href="#">Item 1</a></li>
                      <li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
                      <li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
                      <li class="nav-item"><a class="nav-link" href="#">Item 4</a></li>
                      <li class="nav-item"><a class="nav-link" href="#">Item 5</a></li>
                      <li class="nav-item"><a class="nav-link" href="#">Item 6</a></li>
                      <li class="nav-item"><a class="nav-link" href="#">Item 7</a></li>
                      <li class="nav-item"><a class="nav-link" href="#">Item 8</a></li>
                      <li class="nav-item"><a class="nav-link" href="#">Item 9</a></li>
                      <li class="nav-item"><a class="nav-link" href="#">Item 10</a></li>
                      <li class="nav-item"><a class="nav-link" href="#">Item 11</a></li>
                      <li class="nav-item"><a class="nav-link" href="#">Item 12</a></li>
                      <li class="nav-item"><a class="nav-link" href="#">Item 13</a></li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#mega-level-2-collapse" data-toggle="collapse">Discover</a>
            <div class="mega-menu-panel collapse" id="mega-level-2-collapse">
              <div class="container-lg">
                <a class="nav-link all" href="#">View all discoveries</a>
                <a class="nav-link close ml-auto" data-toggle="collapse" href="#mega-level-2-collapse" aria-expanded="false" aria-controls="mega-level-2-collapse" title="Close discover menu">
                  <span class="sr-only">Close discover menu</span>
                </a>
              </div>
              <div class="container-lg">
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="nav-link" href="#">Test 1</a>
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <li class="nav-item"><a class="nav-link" href="#">My Orange</a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>

Options

Megamenu can be initialised to point to a specific menu item when main menu is opened. Call the init method with wanted item id.

$('#megamenu').megamenu({ target: '#testLink' });

You might as well keep control on focus when page is loaded, thus disabling focus on targeted item.

$('#megamenu').megamenu({ target: '#testLink', noFocus: true });

Default value for parameter noFocus is false.

See a full implementation in the Orange News example template.