Javascripts


Close all nested submenus on closing.

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 nested submenus on closing.
    $('.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 BS4 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.
    $('.navbar .dropdown-menu').on('show.bs.collapse shown.bs.collapse', function (event) {
      event.stopPropagation();
      $(this).parent().siblings().children('.dropdown-menu.show').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 ....