To add a navigation menu type 2, insert the following code on your page, and customize it for yourself:
<nav class="navigation navigation-type-3 navigation-fixed"> <div class="container"> <div class="inner-wrapper"> <div class="menu-toggle-wrapper meta-wrapper"> <span class="meta-text"> Menu </span> <div class="menu-toggle"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div> <div class="search-toggle-wrapper meta-wrapper"> <span class="meta-text"> Search </span> <div class="search-toggle"> <i class="icofont-search-1"></i> </div> </div> </div> </div> <div class="navigation-panel"> <div class="container-fluid panel-inner"> <div class="meta-wrapper menu-panel-close-wrapper"> <span class="meta-text"> Close Menu </span> <i class="icofont-close-circled"></i> </div> <div class="menu-list-wrapper" data-back-link="go back"> <ul class="menu-list"> <li class="menu-item menu-item-has-children" data-menu-subtitle="Strategy"> <a> Pages </a> <ul class="sub-menu"> <li class="menu-item"> <a href="about.html"> About <span class="menu-item-label" style="background-color: #F30E48;"> Hot </span> </a> </li> <li class="menu-item"> <a href="services.html"> Services </a> </li> <li class="menu-item"> <a href="team.html"> Team </a> </li> <li class="menu-item"> <a href="contact.html"> Contact </a> </li> <li class="menu-item"> <a href="pricing.html"> Pricing </a> </li> <li class="menu-item"> <a href="faq.html"> FAQ </a> </li> <li class="menu-item"> <a href="404.html"> 404 Error Page </a> </li> </ul> </li> </ul> </div> </div> </div> <div class="search-form"> <div class="meta-wrapper form-close-wrapper"> <span class="meta-text"> Close Form </span> <i class="icofont-close-circled"></i> </div> <div class="form-wrapper container"> <form role="search"> <input class="search-field" placeholder="Enter some keywords..." title="Enter some keywords..."> <button type="submit" class="search-submit"> <i class="icofont-search-1"></i> </button> </form> <span class="subtitle-text"> Hit enter to search or ESC to close </span> </div> </div> </nav>
The navigation panel has 2 main parts:
1.Menu
<div class="menu-list-wrapper" data-back-link="go back"> <ul class="menu-list"> </ul> </div>
2.Search Form
<div class="search-form"> <div class="meta-wrapper form-close-wrapper"> <span class="meta-text"> Close Form </span> <i class="icofont-close-circled"></i> </div> <div class="form-wrapper container"> <form role="search"> <input class="search-field" placeholder="Enter some keywords..." title="Enter some keywords..."> <button type="submit" class="search-submit"> <i class="icofont-search-1"></i> </button> </form> <span class="subtitle-text"> Hit enter to search or ESC to close </span> </div> </div>
You can also configure the animation, animation speed and other parameters using the desired class in javascript, for this, go to main.js and change the following values:
let navigation = this.navigation, animItems = (items) => { TweenMax.staggerTo(items, 0.45, { transform: 'translateY(0)', opacity: 1, pointerEvents: 'auto', ease: Power3.easeInOut }, 0.06); }, hideItems = (items) => { TweenMax.staggerTo(items, 0.45, { transform: 'translateY(-30px)', opacity: 0, pointerEvents: 'none', ease: Power3.easeInOut }, 0.06); };