Gimmicks - Öffne und schließen Menue

Öffnen und schließen eines Menüs sind nicht schwierig, aber ein bisschen Anmut kann nicht schaden :-)

Unser Beispiel kurz erklärt:
Dem übergeordneten Div weise ich über einen addEventListener das Event click zu. Im nächsten Schritt werde ich beim ersten Klick den drei Linien jeweils über classList.add eine neue Klasse zuweisen und beim erneuten Klick über classList.remove wieder entfernen.
Damit die Sache richtig rund wird, ändere ich noch den Title des übergeordneten Div's, welches das Event click zugewiesen bekommen hat. Dies erledige ich über die Methode setAttribute().

Kopiert Euch gerne den Code und probiert es aus: Code

Beispiel

Menue

Hauptpunkt 1
Hauptpunkt 2
Hauptpunkt 3
Hauptpunkt 4

Code


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;
		}
	}
}