Team:Leiden/test/javascript/main js

// Navigation bar functionality

// On large screens: use hover as dropdown trigger function MenuToggleHover() {

 $('#navbar_parent').on('mouseenter mouseleave', '.hover', function() {
   $(this).toggleClass('dropdownContentOpen');
 })

};

// On small screens: use click as dropdown trigger function MenuToggleClick() {

 $('#navbar_parent').on('click', '.click', function() {
   if ($(this).hasClass('dropdownContentOpen')) {
     $(this).toggleClass('dropdownContentOpen');
   } else {
     closeAllDropdown();
     $(this).toggleClass('dropdownContentOpen');
   }
 })

};

function closeAllDropdown() {

 $('.dropdownContentOpen').toggleClass('dropdownContentOpen');

}

// Small screens: open and close side menu, with animation // Both triggered in html <onclick='function()'> function openSideMenu() {

 $('#sideBar')
   .css('right', '-300px')
   .css('display', 'block')
   .animate({
     right: '0'
   });
 $('#openSideMenu').hide();
 $('#closeSideMenu').css('display', 'block');
 $('.hasdropdown').removeClass('hover').addClass('click');

};

function closeSideMenu() {

 $('#sideBar')
   .animate({
     right: '-300px'
   });
 $('#openSideMenu').show();
 $('#closeSideMenu').css('display', 'none');
 $('.hasdropdown').removeClass('click').addClass('hover');
 closeAllDropdown();

}

// run all functions when document is loaded... $(document).ready(function() {

 MenuToggleClick();
 MenuToggleHover();

});