HTML:

<div class="menue-wrapper">
	<div id="openclosewrapper" class="open-close-wrapper" title="Open Menue">
		<div class="open-close">
			<div class="before"></div>
			<div class="half"></div>
			<div class="after"></div>
		</div>
	</div>
	<div class="menue">
		Menue
		<ul>
			<li>Hauptpunkt 1</li>
			<li>Hauptpunkt 2</li>
			<li>Hauptpunkt 3</li>
			<li>Hauptpunkt 4</li>
		</ul>
	</div>
</div>




CSS:
.menue-wrapper{
	width:250px;
	height:250px;
	margin:10px auto;
	padding:10px;
	border:1px solid rgba(112,175,4,1);
	overflow:hidden;
}

.menue{
	position:relative;
	right:-247px;
	width:200px;
	height:160px;
	margin:10px auto;
	padding:10px;
	border:1px solid white;	
	transition: right .5s;
}

	.menue-show{
		right:10px;
		transition: right .5s;
	}

.open-close-wrapper{
	position:relative;
	height:19px;
	padding:10px;
	border-bottom:1px solid rgba(112,175,4,1);
	cursor:pointer;
}

.open-close{
    position: relative;
    top: -8px;
    width: 30px;
    height: 24px;
}

.before{
	position:absolute;
	top: 0px;
	left:0;
	width:30px;
	height:2px;
	background-color:white;
	transform: rotate(0deg);
	transition: transform .5s, top .5s;
}
	.before-show{
		top:11px;
		transform: rotate(45deg);
		transition: transform .5s, top .5s;
	}

.half{
	position: absolute;
	top: 11px;
	width:15px;
	height:2px;
	background-color:white;
	transition: width .5s;
}
	.half-show{
		width:0;
		transition: width .5s;
	}

.after{
	position:absolute;
	bottom: 0px;
	left:0;
	width:30px;
	height:2px;
	background-color:white;
	transform: rotate(0deg);
	transition: transform .5s, top .5s;
}
	.after-show{
		bottom:11px;
		transform: rotate(-45deg);
		transition: transform .5s, bottom .5s;
	}




JavaScript:

if( document.querySelector('#openclosewrapper') ){
	
	const myWrapper  = document.querySelector('#openclosewrapper');
	
	// Eventlisterner zuweisen
	myWrapper.addEventListener('click', openClose);
	
	let countClickMenue = 0;
	function openClose(){
		
		/*-------------------------------------------- 
		Alle Elemente einer Constanten 
		zuweisen um den Code kürzer zu halten 
		--------------------------------------------*/	
		const manuetop = document.querySelector('.before');
		const center   = document.querySelector('.half');
		const below    = document.querySelector('.after');
		const menue    = document.querySelector('.menue');
		
		// Menue öffnen
		if(countClickMenue == 0){
			manuetop.classList.add('before-show');
			center.classList.add('half-show');
			below.classList.add('after-show');
			menue.classList.add('menue-show');
			myWrapper.setAttribute('title', 'Close Menue');
			countClickMenue++;
		}else{ // Menue schließen
			manuetop.classList.remove('before-show');
			center.classList.remove('half-show');
			below.classList.remove('after-show');			
			menue.classList.remove('menue-show');	
			myWrapper.setAttribute('title', 'Open Menue');			
			countClickMenue = 0;
		}
	}
}