JSFiddle - React, Tailwind, and code Playground

by Vitaly Volovich

HTML

<a class='menu-button'>Кнопка</a>
<ul id='menu' class='menu'>
<li>Пункт меню 1</li>
<li>Пункт меню 2</li>
<li>Пункт меню 3</li>
<li>Пункт меню 4</li>
</ul>

CSS

.menu {
  background: white;
  color: red;
  display: none;
}
.menu-button {
  cursor: pointer;
  position: fixed;
  background: white;
}
body {
  height: 1000px;
  background: grey;
}

JavaScript

/**
  *
  * jPanelMenu 1.4.1 (http://jpanelmenu.com)
  * By Anthony Colangelo (http://acolangelo.com)
  *
* */

(function($){
	$.jPanelMenu = function(options) {
		if ( typeof(options) == "undefined" || options == null ) { options = {}; };

		var jP = {
			options: $.extend({
				menu: '#menu',
				panel: 'body',
				trigger: '.menu-trigger',
				excludedPanelContent: 'style, script',
				clone: false,
				keepEventHandlers: false,

				direction: 'right',
				openPosition: '250px',
				animated: true,
				closeOnContentClick: true,

				keyboardShortcuts: [
					{
						code: 27,
						open: false,
						close: false 
					},
					{
						code: 37,
						open: false,
						close: false 
					},
					{
						code: 39,
						open: true,
						close: false 
					},
					{
						code: 77,
						open: true,
						close: false 
					}
				],

				duration: 150,
				openDuration: options.duration || 150,
				closeDuration: options.duration || 150,

				easing: 'ease-in-out',
				openEasing: options.easing || 'ease-in-out',
				closeEasing: options.easing || 'ease-in-out',

				before: function(){ },
				beforeOpen: function(){ },
				beforeClose: function(){ },

				after: function(){ },
     // add this   
				afterOpen: function(){
        $('.menu-button').css("margin-left","250px");
        },
				afterClose: function(){$('.menu-button').css("margin-left","0px");
        } ,

				beforeOn: function(){ },
				afterOn: function(){ },

				beforeOff: function(){ },
				afterOff: function(){ }
			},options),

			settings: {
				transitionsSupported:	'WebkitTransition' in document.body.style ||
										'MozTransition' in document.body.style ||
										'msTransition' in document.body.style ||
										'OTransition' in document.body.style ||
										'Transition' in document.body.style
				,
				transformsSupported:	'WebkitTransform' in document.body.style ||
										'MozTransform' in document.body.style ||
										'msTransform' in document.body.style...