Primary Navigation looks like a fixed bar at the top of page:
Navigation Menu has several main elements:
- Menu Panel Toggle
- Search Form Toggle
- Social List
- Search Form
- Logo
- Menu Panel
- Copyright
The structural code of the navigation menu looks like this:
<nav class="navigation navigation-type-1">
<div class="inner-wrapper">
<div class="left-side">
<div class="logotype-wrapper">
<a href="index.html">
<img src="assets/img/logo/logo-dark.png"
alt="Logo">
</a>
</div>
</div>
<div class="navigation-panel-wrapper">
<ul class="social-list">
<li>
<a href="https://themeforest.net/user/jd-themes">
<i class="fab fa-facebook-f show-icon"></i>
<i class="fab fa-facebook-f hide-icon"
style="color: #3B5999;"></i>
</a>
</li>
</ul>
<div class="search-form-toggle">
<i class="fa fa-search"></i>
</div>
<div class="menu-toggle-wrapper">
<div class="menu-toggle">
<span></span>
<span></span>
<span></span>
</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="far fa-times-circle"></i>
</div>
</div>
</div>
</div>
<div class="menu-list-panel">
<div class="menu-toggle-close">
<i class="far fa-times-circle"></i>
</div>
<div class="menu-list-wrapper" data-back-link="go back">
<ul class="menu-list">
<li class="menu-item menu-item-has-children">
<a>Home</a>
</li>
</ul>
</div>
<div class="copyright-wrapper">
<p class="copyright">
© 2022 All rights Reserved Enardo.
</p>
</div>
</div>
</nav>
You can change all animation settings. Find the main class of the navigation menu in your main.js and change any values of speed, type and easing for animation:
const NAVIGATION_TYPE_1 = new NAV_TYPE_1();
_searchForm() {
let searchFormAnim = TweenMax.to(this.searchForm, 0.7, {
transform: 'translateY(0)',
ease: Power3.ease
}, 0.15).reverse();
this.searchToggle.on('click', function () {
searchFormAnim.play();
});
this.closeSearchToggle.on('click', function () {
searchFormAnim.reverse();
});
$(COMMON.doc).keyup((e) => {
if (e.key === "Escape") {
searchFormAnim.reverse();
}
});
}
_subMenu() {
this.itemsHasChildren.children('a').addClass('menu-item-has-children-link');
this.subMenus.prepend(`<li class="menu-item-back"><a class="post"><i class="fas fa-long-arrow-alt-left"></i><span>${this.navigation.find('.menu-list-wrapper').data('back-link')}</span></a></li>`);
this.menuList.addClass('active-list');
let navigation = this.navigation,
menuItemBack = navigation.find('.menu-item-back'),
animItems = (items) => {
TweenMax.staggerTo(items, 0.55, {
transform: 'translateY(0)',
opacity: 1,
pointerEvents: 'auto',
ease: Power3.easeInOut
}, 0.04);
},
hideItems = (items) => {
TweenMax.staggerTo(items, 0.55, {
transform: 'translateY(-15px)',
opacity: 0,
pointerEvents: 'none',
ease: Power3.easeInOut
}, 0.04);
},
animPanel = TweenMax.to(this.menuPanel, 0.5, {
transform: 'translateX(0)',
ease: Expo.easeInOut,
}).reverse();
this.toggle.on('click', () => {
$(this.toggle).addClass('active-toggle');
animPanel.play();
TweenMax.to(COMMON.body, 0, {
delay: 0.5,
onComplete: () => {
if (navigation.find('.active-list').hasClass('category-sub-menu')) {
animItems(navigation.find('.active-list').find('.post'));
} else {
animItems(navigation.find('.active-list').children().children('a'));
}
}
});
});
this.toggleClose.on('click', () => {
$(this.toggle).removeClass('active-toggle');
TweenMax.to(COMMON.body, 0, {
delay: 0.3,
onComplete: () => {
animPanel.reverse();
}
});
if (navigation.find('.active-list').hasClass('category-sub-menu')) {
hideItems(navigation.find('.active-list').find('.post'));
} else {
hideItems(navigation.find('.active-list').children().children('a'));
}
});
$(COMMON.doc).keyup((e) => {
if (e.key === "Escape") {
$(this.toggle).removeClass('active-toggle');
TweenMax.to(COMMON.body, 0, {
delay: 0.3,
onComplete: () => {
animPanel.reverse();
}
});
hideItems(navigation.find('.active-list').children().children('a'));
}
});
this.itemsHasChildren.children('a').on('click', function (e) {
e.preventDefault();
let $this = $(this);
hideItems(navigation.find('.active-list').children().children('a'));
navigation.find('.active-list').removeClass('active-list');
$(this).parent().children('.sub-menu').addClass('active-list');
TweenMax.to(COMMON.body, 0, {
delay: 0.3,
onComplete: () => {
if ($this.parent().hasClass('menu-item-has-children')) {
animItems(navigation.find('.active-list').children().children('a'));
} else if ($this.parent().hasClass('menu-item-object-category')) {
animItems(navigation.find('.active-list').find('.post'));
}
}
});
});
menuItemBack.children('a').on('click', function (e) {
e.preventDefault();
let $this = $(this);
if ($this.parent().parent().hasClass('category-sub-menu')) {
hideItems(navigation.find('.active-list').find('.post'));
} else {
hideItems(navigation.find('.active-list').children().children('a'));
}
navigation.find('.active-list').removeClass('active-list');
$(this).closest('.sub-menu').parent().parent().addClass('active-list');
TweenMax.to(COMMON.body, 0, {
delay: 0.5,
onComplete: () => {
animItems(navigation.find('.active-list').children().children('a'));
}
});
});
}