Sidebar menu expansível, responsivo com altura total e ações de clique facilitadas para abrir e fechar.

// Simple responsive sibebar menu with clickout-to-close
// by Make Believe for Evolut.com.br
// article: this.is.not.ramen.digital
jQuery(document).ready(function () {
    var $ = jQuery;

    jQuery("#menuSidebar").on('click', "a[href^='#']", function (e) {
		e.preventDefault();
		var anchorSection = jQuery(this).attr('href');
		var position = (jQuery(anchorSection).offset().top) + 50;
		jQuery("body, html").animate({
			scrollTop: position
		}, 500, function(){
			jQuery('#menuSidebar').toggleClass('sidebarHidden');
		});
	});

	jQuery('#header-menu').on('click', function(e) {
		e.preventDefault();
		jQuery('#menuSidebar').toggleClass('sidebarHidden');
		jQuery("body").not('#menuSidebar').on( "click", this, listenBodyClick(true) ); 
	});

	function listenBodyClick(event){
		var isOutSidebar = event;
		var isSidebarHidden = jQuery('#menuSidebar').hasClass('sidebarHidden');

		// Handler for listenBodyClick and sidebar status

		if ( isOutSidebar && !isSidebarHidden ) { 					// true clickbody & false hidden sidebar - close sidebar when user clicked outside sidebar ID, 
			jQuery('#menuSidebar').addClass('sidebarHidden'); 		// add class to hide sidebar
			listenBodyClick(false); 								// callback this function for execute handler checklist

		} else if ( !isOutSidebar && isSidebarHidden ) { 			// false clickbody & true hidden sidebar - when sidebar in hidden, all clicks listen on body are not needed, offloading the requests on browser.  
			
			jQuery("body").not('#menuSidebar').off( "click", this, listenBodyClick(true) ); 	// unbind listenBodyClick (stop all listenner for "on body clicks" of listenBodyClick function.)
		
		} else if ( isOutSidebar && isSidebarHidden ) { 			// true clickbody & true hidden sidebar - Its not supposed to get here. Check if the jquery (.off) listenBodyClick is unbinding the .on click.  

			console.log( 'You are not supposed to get here. There is some data leaking on validations.');
		}
	}


});
// Simple responsive sibebar menu with clickout-to-close
// by Make Believe for Evolut.com.br
// article: this.is.not.ramen.digital
jQuery(document).ready(function () {
    var $ = jQuery;

    jQuery("#menuSidebar").on('click', "a[href^='#']", function (e) {
		e.preventDefault();
		var anchorSection = jQuery(this).attr('href');
		var position = (jQuery(anchorSection).offset().top) + 50;
		jQuery("body, html").animate({
			scrollTop: position
		}, 500, function(){
			jQuery('#menuSidebar').toggleClass('sidebarHidden');
		});
	});

	jQuery('#header-menu').on('click', function(e) {
		e.preventDefault();
		jQuery('#menuSidebar').toggleClass('sidebarHidden');
		jQuery("body").not('#menuSidebar').on( "click", this, listenBodyClick(true) ); 
	});

	function listenBodyClick(event){
		var isOutSidebar = event;
		var isSidebarHidden = jQuery('#menuSidebar').hasClass('sidebarHidden');

		// Handler for listenBodyClick and sidebar status

		if ( isOutSidebar && !isSidebarHidden ) { 					// true clickbody & false hidden sidebar - close sidebar when user clicked outside sidebar ID, 
			jQuery('#menuSidebar').addClass('sidebarHidden'); 		// add class to hide sidebar
			listenBodyClick(false); 								// callback this function for execute handler checklist

		} else if ( !isOutSidebar && isSidebarHidden ) { 			// false clickbody & true hidden sidebar - when sidebar in hidden, all clicks listen on body are not needed, offloading the requests on browser.  
			
			jQuery("body").not('#menuSidebar').off( "click", this, listenBodyClick(true) ); 	// unbind listenBodyClick (stop all listenner for "on body clicks" of listenBodyClick function.)
		
		} else if ( isOutSidebar && isSidebarHidden ) { 			// true clickbody & true hidden sidebar - Its not supposed to get here. Check if the jquery (.off) listenBodyClick is unbinding the .on click.  

			console.log( 'You are not supposed to get here. There is some data leaking on validations.');
		}
	}


});

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *