Mobile navigation is a bar that appears on mobile devices and tablets, it includes a logo, a button to open the menu, as well as a menu. To add a mobile menu, insert this code on your page:
<nav class="navigation-mobile">
<div class="inner-wrapper">
<!-- Logotype -->
<div class="logotype-wrapper">
<a href="index.html">
<img src="assets/img/general/logo.png" alt="Logotype" class="logo">
</a>
</div>
<div class="navigation-side">
<div class="search-form-toggle toggle-button">
<i class="fa fa-search"></i>
</div>
<div class="menu-toggle-wrapper">
<div class="menu-toggle toggle-button">
<i class="fa fa-bars"></i>
</div>
</div>
</div>
</div>
<div class="search-form-wrapper">
<div class="search-form">
<div class="form-wrapper">
<form role="search">
<input type="search" class="search-field"
placeholder="Enter some keywords..."
title="Enter some keywords...">
<button type="submit" class="search-submit">
<i class="icofont-search"></i>
</button>
</form>
<div class="search-form-close">
<i class="icofont-close-circled"></i>
</div>
</div>
</div>
</div>
<div class="menu-list-wrapper" data-back-link="go back">
<div class="menu-toggle-close">
<i class="icofont-close-circled"></i>
</div>
<ul class="menu-list">
<li class="menu-item menu-item-has-children">
<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>
</nav>
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,
menuItemBack = navigation.find('.menu-item-back'),
animItems = (items) => {
TweenMax.staggerTo(items, 0.4, {
transform: 'translateX(0)',
opacity: 1,
pointerEvents: 'auto',
ease: Power3.ease
}, 0.08);
},
hideItems = (items) => {
TweenMax.staggerTo(items, 0.4, {
transform: 'translateX(-50px)',
opacity: 0,
pointerEvents: 'none',
ease: Power3.ease,
}, 0.08);
},
animPanel = TweenMax.to(this.menuPanel, 0.8, {
scale: 1,
opacity: 1,
pointerEvents: 'auto',
ease: Expo.easeInOut,
}).reverse();