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);
};