jQuery SlideOutPanel

Slide From

Slide From Right Slide From Left Slide From Top Slide From Bottom

							$('#slide-out-panel').SlideOutPanel();

							$('#slide-out-panel').SlideOutPanel({
								   slideFrom: 'left',
							});

              $('#slide-out-panel').SlideOutPanel({
                   slideFrom: 'top',
              });

              $('#slide-out-panel').SlideOutPanel({
                   slideFrom: 'bottom',
              });
            

Body Push

Body Push Right Body Push Left

              $('#slide-out-panel').SlideOutPanel({
                   bodyPush: true,
              });

              $('#slide-out-panel').SlideOutPanel({
                   bodyPush: true,
                   slideFrom: 'left',
              });
            

Escape Key Close

Open Escape Close

              $('#slide-out-panel').SlideOutPanel({
                   enableEscapeKey: true,
              });
            

Screen Close

Screen Close Off

              $('#slide-out-panel').SlideOutPanel({
                   screenClose: false,
              });
            

Show Screen

Do Not Show Screen

              $('#slide-out-panel').SlideOutPanel({
                   showScreen: false,
              });
            

Transitions

Duration Slower

              $('#slide-out-panel').SlideOutPanel({
                   transitionDuration: '5s',
              });
						

Cubic Bezier

              $('#slide-out-panel').SlideOutPanel({
                   transition: 'cubic-bezier(.175, .885, .32, 1.275)',
              });
            

Width

Width 50vw

              $('#slide-out-panel').SlideOutPanel({
                   width: '50vw',
              });
            

Offset Top

Offset Top

              $('#slide-out-panel').SlideOutPanel({
                   offsetTop: '50px',
              });
            

Events

Events

              $('#slide-out-panel').SlideOutPanel({
                   beforeOpen() {
								     alert('Before Panel Opens');
								   },
                   afterOpen() {
								     alert('After Panel Opens');
								   },
                   beforeClosed() {
								     alert('Before Panel Closed');
								   },
                   afterClosed() {
								     alert('After Panel Closed');
								   },
              });
            	

Methods

Open Panel Close Panel Toggle Pannel Destroy Pannel