header js
Thu Feb 08 2024 11:25:49 GMT+0000 (Coordinated Universal Time)
Saved by @divyasoni09 #jquery
import $ from 'jquery'; class Header { constructor(element) { this.$element = $(element); this.$burger = this.$element.find('.header__burger'); this.$Nav = this.$element.find('.nav-main'); this.$hasSub = this.$element.find('.menu-item-has-children'); this.$menuArrow = this.$element.find('i.fa-angle-down'); this.$menuBg = this.$element.find('.header__menu-bg'); this.init(); } dropDown() { let winW = $(window).width(); if (winW < 991) { if ( this.$element.find('.menu-item-has-children .fa-angle-down').length == 0 ) { this.$hasSub.prepend('<i class="fa fa-angle-down"></i>'); } } else { this.$hasSub.children('.fa-angle-down').remove(); } } init() { $(document).ready(() => { this.dropDown(); }); $(document).on( 'click', '.menu-item-has-children .fa-angle-down', function () { $(this).parent().toggleClass('active'); $(this).parent().children('a:first').toggleClass('active'); }, ); $(window).resize(() => { this.dropDown(); }); $(window).scroll(function () { if ($(window).scrollTop() > 50) { $('.header').addClass('sticky'); } else { $('.header').removeClass('sticky'); } }); this.$burger.click((e) => { e.preventDefault(); if ($(e.currentTarget).hasClass('opened')) { $(e.currentTarget).removeClass('opened').attr('aria-expanded', 'false'); this.$Nav.slideUp(300).parent().removeClass('active'); } else { $(e.currentTarget).addClass('opened').attr('aria-expanded', 'true'); this.$Nav.slideDown(300).parent().addClass('active'); } }); this.$menuBg.click((e) => { e.preventDefault(); this.$burger.removeClass('opened').attr('aria-expanded', 'false'); this.$Nav.slideUp(300).parent().removeClass('active'); }); $(document).on('click', '.fa-angle-down', function (e) { e.preventDefault(); if ($(this).hasClass('active')) { $(this).removeClass('active'); $(this).parent('li').children('.sub-menu').removeClass('active'); } else { $(this).addClass('active'); $(this).parent('li').children('.sub-menu').addClass('active'); } }); } } $('[data-header]').each((index, element) => new Header(element));
Comments