https://shirsendu.com/template/sdteam/blog-asset/js/fullpageSlideMenu-v2.js

1/**
2 * A jQuery Full Page Slider Menu plugin..
3 * Author: Shirsendu & Team
4 * Version: 1.0
5 */
6 ;(function($){
7	$.fn.fullPageSliderMenu = function(options){
8		"use strict"; /* Catches common coding errors and throws exceptions.
9		Prevents access to “unsafe” actions, such as gaining access to a global object.
10		Disables poor or confusing features.*/
11
12		var settings = $.extend({
13			textColor: "var(--secondary-text-color)",
14			backgroundColor: "var(--heading-dark)",
15			backButton: false,
16			pagination: true,
17			backTitle: 'Back',
18			closeTitle: 'Close',
19			rootTitle: 'Main Menu',
20			visible:0,	//possible values 0 (will be decided autometicbassed on slider width),1,2
21		}, options);
22		
23		if (this.length > 1){
24			this.each(function() { $(this).myPlugin(options) });
25			return this;
26		}
27		
28		//(VAR :: Private Variable)
29		var $slider = $(this); //Cache Slider selector 
30		var menu;		
31		var pagination;		
32		var left;
33		var right;
34		var backBtn;
35		
36
37		 // private methods
38		var chaangeBackButton= function(){
39			//console.log('PL::'+pagination.children().length);
40			if(pagination.children().length>2){
41				backBtn.text(settings.backTitle);
42			}else{
43				backBtn.text(settings.closeTitle);
44			}
45		};
46			
47		 // public methods
48		this.init = function(){
49			$slider = $(this);
50			//console.log('slider init.....');
51			settings.visible = ((settings.visible==0)?((this.width()<1000)?1:2):settings.visible); //Set the number of pan that will be visible
52			$slider.css({'color':settings.textColor,'background-color':settings.backgroundColor});
53
54			menu=this.find('ul');
55			menu.css({'display':'none'});//hiding original ULs(all parent and child)
56			
57			this.append("<button class='backButton' "+((settings.backButton==true)?"":"style='display:none;'")+"></button>");
58			backBtn=this.find('.backButton');
59			
60			this.append("<div class='pagination' "+((settings.pagination==true)?"":"style='display:none;'")+"><ul></ul></div>");
61			pagination=this.find('.pagination ul');
62			
63			if(settings.visible ==1){//display single pan 		
64				pagination.append('<li><a>Close Menu</a><ul></ul></li>');
65				
66				this.append("<div class='left'style='display:none'></div>");
67				left=this.find('.left');
68				pagination.append('<li class="emptyLeft" ><a>'+settings.rootTitle+'</a><ul style="display:none">'+menu.html()+'</ul></li>');
69			
70			//=====================
71			
72				this.append("<div class='right' ><ul>"+menu.html()+"</ul></div>");
73				right=this.find('.right');
74				
75				
76				//console.log( "visible ==1" );
77			}else{//display double pan
78				this.append("<div class='left'><ul>"+menu.html()+"</ul></div>");
79				left=this.find('.left');
80				
81				pagination.append('<li><a>'+settings.closeTitle+'</a><ul style="display:none">'+menu.html()+'</ul></li>');
82									
83				this.append("<div class='right'style='width:40%;'></div>");
84				right=this.find('.right');
85				
86				pagination.append('<li class="emptyRight" style="display:none"><a>emptyRight</a><ul style="display:none"></ul></li>');
87				//console.log( "visible ==2" );
88			}
89			chaangeBackButton();
90			
91			backBtn.on('click',function(){
92				//console.log("back clicked..!");		
93				pagination.children(':last-child').prev().click();
94			});
95			
96			$slider.on('click','.pagination li', function(){
97				//console.log("Pagination clicked..!");
98				if($(this).prev().length){
99					$(this).nextAll().fadeOut(300, function(){ $(this).remove();});
100					right.html('<ul>'+$(this).find('ul').html()+'</ul>').fadeIn("slow");
101					left.html('<ul>'+$(this).prev().find('ul').html()+'</ul>').fadeIn("slow");
102				}else{
103					// $slider.hide("slow");
104					$(".filter").removeClass('right0');
105					$('body').removeClass('noScroll');
106					$(".menupart").removeClass('open');
107					$('body').removeClass('shift')
108				}
109				chaangeBackButton();
110			});
111			
112			right.on('click', 'li', function(){
113				//console.log('CLICK RIGHT::'+index +' < '+ endIndex);
114				if($(this).find('ul').length){					
115					pagination.append('<li>'+$(this).html()+'</li>').fadeIn("slow");
116					left.html(right.html()).fadeIn("slow");
117					right.html('<ul>'+$(this).find('ul').html()+'</ul>').fadeIn("slow");
118				}
119				chaangeBackButton();
120			});
121			
122			left.on('click', 'li', function(){
123				//console.log('CLICK LEFT::'+index +' < '+ endIndex);
124				if($(this).find('ul').length){
125					right.html('<ul>'+$(this).find('ul').html()+'</ul>').fadeIn("slow");
126					pagination.children(':last-child').fadeOut(300, function(){ $(this).remove();});
127					pagination.append('<li>'+$(this).html()+'</li>').fadeIn("slow");
128				}
129				chaangeBackButton();
130			});
131			//console.log('Init done...');
132			return this;
133		};
134		
135		this.show= function(){
136			$slider.show("slow");
137		};
138		return this.init();
139	}
140})(jQuery);