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 containinge the .mega-menu class.
$('#collapsing-navbarHead').megamenu();Html markup and espacially <ul> menu hierarchy must absolutely be as follwing example :
<header role="banner">
<nav class="navbar navbar-expand-md navbar-dark bg-dark" role="navigation">
<div class="container">
<a class="navbar-brand" href="#">
<img src="../../../../dist/img/orange_logo.svg" alt="Back to homepage" title="Go to homepage" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsing-navbarHead" aria-controls="collapsing-navbarHead"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="mega-menu navbar-collapse collapse" id="collapsing-navbarHead">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link collapsed" href="#mega-level-1-collapse" data-toggle="collapse">Shop</a>
<div class="mega-menu-panel collapse" id="mega-level-1-collapse">
<div class="container">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="">Mobile</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="">Mobile</a></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="">Phones</a></li>
<li class="nav-item">
<a class="nav-link" href="" id="testLink">Sub link 1</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="">Sub link 1</a></li>
<li class="nav-item"><a class="nav-link" href="">Sub sub link 1</a></li>
<li class="nav-item"><a class="nav-link" href="">Sub sub link 2</a></li>
<li class="nav-item"><a class="nav-link" href="">Sub sub link 3</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="">Sub link 2</a></li>
<li class="nav-item"><a class="nav-link" href="">Sub link 3</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="">Plans</a></li>
<li class="nav-item"><a class="nav-link" href="">Accessories</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="">Internet</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="">Internet</a></li>
<li class="nav-item">
<a class="nav-link" href="">Pay monthly offers</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="">Pay monthly offers</a></li>
<li class="nav-item">
<a class="nav-link" href="">Sub link 1</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="">Sub link 1</a></li>
<li class="nav-item"><a class="nav-link" href="">Sub sub link 1</a></li>
<li class="nav-item"><a class="nav-link" href="">Sub sub link 2</a></li>
<li class="nav-item"><a class="nav-link" href="">Sub sub link 3</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="">Sub link 2</a></li>
<li class="nav-item"><a class="nav-link" href="">Sub link 3</a></li>
</ul>
</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">
<a class="nav-link" href="#">Link 3</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="">Link 3</a></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>
<a data-toggle="collapse" href="#mega-level-1-collapse" aria-expanded="true" aria-controls="mega-level-1-collapse" title="close shop menu"><span class="svg-delete"></span></a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link collapsed" href="#mega-level-2-collapse" data-toggle="collapse">Discover</a>
<div class="mega-menu-panel collapse" id="mega-level-2-collapse">
<div class="container">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="">Test 1</a>
</li>
</ul>
<a data-toggle="collapse" href="#mega-level-2-collapse" aria-expanded="false" aria-controls="mega-level-2-collapse" title="close discover menu"><span class="svg-delete"></span></a>
</div>
</div>
</li>
<li class="nav-item"><a class="nav-link collapsed" href="" data-toggle="collapse">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.
$('#collapsing-navbarHead').megamenu({ target: '#testLink' });You might as well keep control on focus when page is loaded, thus disabling focus on targeted item.
$('#collapsing-navbarHead').megamenu({ target: '#testLink', noFocus: true });Default value for parameter noFocus is false.
See a full implementation in the Orange News example page