Javascripts


Correct display of active and open arrows.

Use this script if you use the active and open arrow, and it is necessary for correct display of the arrows.


<script>
  $( document ).ready(function() {
    //Correct display of active and open arrows.
    $('navbar .dropdown-menu').on('show.bs.collapse  hidden.bs.collapse', function (event) {
      event.stopPropagation();
      (event.type=='show')?$(this).parent().addClass('show'):$(this).parent().removeClass('show');
    });
  });
</script>

Close all submenus if the parent menu is closed.

We recommend using this script if you are using a multilevel menu, and it is necessary to close all nested submenus when closing the parent menu.


<script>
  $( document ).ready(function() {
    //Close all submenus if the parent menu is closed.
    $('.navbar .dropdown-menu').on('hidden.bs.collapse', function (event) {
      event.stopPropagation();
      $(this).find('.collapse.show').each(function () {$(this).collapse('hide');});
    });
  });
</script>

Open menu on hover.

Use this Javascript to open menu on hover.

 



Hover on the menu will open it, and it will stay opened while hovered. On collapsed state menu open by the mouse click.


<script>
  $( document ).ready(function() {
    //Check if not collapsed
    var CheckHover = function(e) {
      var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      return (e.is('.navbar-expand')) ||
        (e.is('.navbar-expand-xl') && w >= 1200) || (e.is('.navbar-expand-lg') && w >= 992) ||
        (e.is('.navbar-expand-md') && w >= 768) ||  (e.is('.navbar-expand-sm') && w >= 576);
    }

    //Prevent click if hover
    $('.navbar [data-toggle="collapse"]').on( "click", function(e) {if (CheckHover($(this.closest('.navbar')))) {e.preventDefault(); e.stopPropagation();}}

    $('.navbar [class*="drop"]').hover(
      function() {
        if (!CheckHover($(this.closest('.navbar')))) return;
        $(this).children('.dropdown-menu').collapse('show').on('shown.bs.collapse.hover', function (e) {
          if (!$(this).parent(':hover').length) {$(this).collapse('hide').parent().removeClass('show');}
          $(this).off('shown.bs.collapse.hover');
        }).parent().addClass('show');
      },
      function() {
        if (!CheckHover($(this.closest('.navbar')))) return;
        $(this).children('.dropdown-menu').collapse('hide').on('hidden.bs.collapse.hover', function (e) {
          if ($(this).parent(':hover').length) {$(this).collapse('show').parent().addClass('show');}
          $(this).off('hidden.bs.collapse.hover');
        }).parent().removeClass('show');
      }
    );
  });
</script>

How to fix MegaNavbar menu when scrolling page

Use this Javascript to stop moving MegaNavbar B4 vertically upward once the vertical scroll has reached the target position. Once the page has been scrolled back down past the target position, the element will be restored to its original position on the page.

 


<script>
  $( document ).ready(function() {
    var target=$('.navbar'), offset = target.offset().top;
    $(window).scroll(function() {
      if ($(window).scrollTop()-target.height() >= offset) {
        target.addClass('fixed-top'); $('body').css({'margin-top': target.height()+'px'});
      }
      else {target.removeClass('fixed-top'); $('body').css({'margin-top': ''});}
    });
  });
</script>

Close a menu by clicking on other menu item.

Use this Javascript to hide the menu when clicking on other menu item.

 


<script>
  $( document ).ready(function() {
    //Close a menu if opening siblings menu.
    $('#main_navbar .dropdown-menu').on('show.bs.collapse shown.bs.collapse', function (event) {
      event.stopPropagation();
      $(this).parent().siblings('.show').children('.dropdown-menu').collapse('hide');
    });
  });
</script>

Close a menu by clicking anywhere on the document.

Use this Javascript to hide the menu when clicking anywhere else in the document.

 


<script>
  $( document ).ready(function() {
    $(document).on('click', function (e) {
      if (!$(e.target).closest('.dropdown-menu').length)  {
        $('.navbar .dropdown-menu.collapse.show, .navbar .dropdown-menu.collapsing').collapse('hide');
      }
    });
  });
</script>

Responsive collapsing at the certain screen size or device.

Coming soon ....