To add a navigation menu, insert the following code on your page, and customize it for yourself:
<nav class="navigation navigation-type-1 navigation-fixed">
<div class="inner-wrapper container">
<div class="logo-wrapper">
<a href="index.html">
<img src="assets/img/general/logo.png" alt="Logotype" class="logo">
</a>
</div>
<div class="navigation-side">
<div class="menu-toggle-wrapper">
<div class="menu-toggle">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="search-toggle-wrapper">
<div class="search-toggle">
<i class="icofont-search-1"></i>
</div>
</div>
<div class="button-wrapper navigation-button">
<a href="#" class="button button-medium button-circle button-animation-type-1">Contact Us</a>
</div>
<div class="languages-select">
<div class="language-toggle">
<span class="current">EN</span>
<ul class="sub-menu">
<li>
<span>FR</span>
</li>
<li>
<span>DE</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="search-form">
<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 class="search-form-close">
<i class="icofont-close"></i>
</div>
</div>
</div>
<div class="navigation-panel">
<div class="panel-inner">
<div class="menu-list-wrapper" data-back-link="go back">
<ul class="menu-list">
<li class="menu-item menu-item-has-children" data-menu-image="assets/img/menu/menu-image-2.jpg">
<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 class="menu-image">
</div>
<div class="meta-wrapper menu-panel-close-wrapper">
<span class="meta-text">
Close Menu
</span>
<i class="icofont-close"></i>
</div>
</div>
</div>
</nav>
The navigation panel has 4 main parts:
1.Logo
<div class="logo-wrapper">
<a href="index.html">
<img src="assets/img/general/logo.png" alt="Logotype" class="logo">
</a>
</div>
2. Menu
<div class="menu-list-wrapper" data-back-link="go back">
<ul class="menu-list">
</ul>
</div>
3.Menu Image Wrapper
<div class="menu-image">
</div>
4.Search Form
<div class="search-form">
<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 class="search-form-close">
<i class="icofont-close"></i>
</div>
</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 animItems = (items) => {
TweenMax.staggerTo(items, 0.35, {
transform: 'translateY(0)',
opacity: 1,
pointerEvents: 'auto',
ease: Power3.ease,
}, 0.06);
},
hideItems = (items) => {
TweenMax.staggerTo(items, 0.35, {
transform: 'translateY(-50px)',
opacity: 0,
pointerEvents: 'none',
ease: Power3.ease,
}, 0.06);
};