Mobile Menü Icon Animation

Gerade wenn man für Webseiten die Responsive Variante erstellt kommt man relativ schnell an den Punkt, an dem man sich die Frage stellt, wie man das Menü erstellt und designed. Lässt man es von oben nach untern reinrutschen oder von links nach rechts oder lässt man es im Vollbild „aufploppen“? Um diese Animationen erst einmal zu bewerkstelligen benötigt man ein Event – also einen Klick. In den meisten Fällen ist das Menü in der mobilen Variante nicht zu sehen und erscheint erst mit einem Klick auf einen CSS Button oder ein Icon. Und da kommen wir zum Punkt, worum es in diesem kurzen Tutorial geht.

Ziel: solch ein modernes Mobile Menü zu erstellen

  • HTML
  • JS
  • CSS
HTML
									<div id="mobimenu">
	<span></span>
	<span></span>
	<span></span>
	<span></span>
</div>
								
JS
									jQuery( 'div#mobimenu' ).on('click', function() {
	jQuery(this).toggleClass('active');
});
								
CSS
									div#mobimenu {
	width: 50px;
	height: 50px;
	z-index: 999;
	display: block;
	margin: 120px auto 0 auto;
	background-color: rgb(216, 206, 179);
	position: relative;
}
div#mobimenu span {
	background-color: rgb(63, 64, 58);
	width: 80%;
	display: block;
	height: 2px;
	border-radius: 1px;
	-moz-border-radius: 1px;
	-webkit-border-radius: 1px;
	position: absolute;
	left: 10%;
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
}
div#mobimenu.active span {
	background: #1b2527;
}
div#mobimenu span:nth-child(1) {
	top: 12px;
}
div#mobimenu span:nth-child(2) {
	top: 20px;
}
div#mobimenu span:nth-child(3) {
	top: 28px;
}
div#mobimenu span:nth-child(4) {
	top: 36px;
}
div#mobimenu.active span:nth-child(1),
div#mobimenu.active span:nth-child(4) {
	opacity: 0;
}
div#mobimenu.active span:nth-child(2),
div#mobimenu.active:hover span:nth-child(2) {
	-moz-transform: rotate(42deg);
	-ms-transform: rotate(42deg);
	-o-transform: rotate(42deg);
	-webkit-transform: rotate(42deg);
	transform: rotate(42deg);
	top: 25px;
}
div#mobimenu.active span:nth-child(3),
div#mobimenu.active:hover span:nth-child(3) {
	-moz-transform: rotate(-42deg);
	-ms-transform: rotate(-42deg);
	-o-transform: rotate(-42deg);
	-webkit-transform: rotate(-42deg);
	transform: rotate(-42deg);
	top: 25px;
}
div#mobimenu:hover span:nth-child(1) {
	-moz-transform: rotate(6deg);
	-ms-transform: rotate(6deg);
	-o-transform: rotate(6deg);
	-webkit-transform: rotate(6deg);
	transform: rotate(6deg);
}
div#mobimenu:hover span:nth-child(2) {
	-moz-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
	-o-transform: rotate(2deg);
	-webkit-transform: rotate(2deg);
	transform: rotate(2deg);
}
div#mobimenu:hover span:nth-child(3) {
	-moz-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	-o-transform: rotate(-2deg);
	-webkit-transform: rotate(-2deg);
	transform: rotate(-2deg);
}
div#mobimenu:hover span:nth-child(4) {
	-moz-transform: rotate(-6deg);
	-ms-transform: rotate(-6deg);
	-o-transform: rotate(-6deg);
	-webkit-transform: rotate(-6deg);
	transform: rotate(-6deg);
}
								

Modernes Mobile Menu erstellen - So funktioniert's

Da ich ein Freund kleiner Spielereien bin wollte ich den Klick und das Icon schön dezent animieren, aber auch universell einsetzbar machen. Man hätte es sicherlich auch mit Font Awesome lösen können oder Bildern, aber dazu muss man diese stets bei neuen Projekten hochladen.

Also habe ich ein DIV mit der ID Menu erstellt und in diesem habe ich vier span-Elemente gepackt. Dies kopiert Ihr einfach in den header oder an die Stelle, in der Ihr das Icon anzeigen lassen wollt.

1. Erstelle ein div

html
				<div id="menu">
	<span></span>
	<span></span>
	<span></span>
	<span></span>
</div>
			
Mehr anzeigen

2. stylet das div in deiner Stylesheet

Damit das Div auch angezeigt werden kann muss man die folgenden Styles in die eingebundene .css Datei kopieren.

php
				div#menu {
	position: fixed;
	right: 40px;
	top: 40px;
	width: 50px;
	height: 50px;
	z-index: 999;
}
div#menu span {
	background: #737373;
	width: 100%;
	display: block;
	height: 2px;
	border-radius: 1px;
	-moz-border-radius: 1px;
	-webkit-border-radius: 1px;
	position: absolute;
	left: 0;
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
}
div#menu.active span {
	background: #1b2527;
}
div#menu span:nth-child(1) {
	top: 0;
}
div#menu span:nth-child(2) {
	top: 7px;
}
div#menu span:nth-child(3) {
	top: 14px;
}
div#menu span:nth-child(4) {
	top: 21px;
}
div#menu.active span:nth-child(1),
div#menu.active span:nth-child(4) {
	opacity: 0;
}
div#menu.active span:nth-child(2),
div#menu.active:hover span:nth-child(2) {
	-moz-transform: rotate(42deg);
	-ms-transform: rotate(42deg);
	-o-transform: rotate(42deg);
	-webkit-transform: rotate(42deg);
	transform: rotate(42deg);
	top: 10px;
}
div#menu.active span:nth-child(3),
div#menu.active:hover span:nth-child(3) {
	-moz-transform: rotate(-42deg);
	-ms-transform: rotate(-42deg);
	-o-transform: rotate(-42deg);
	-webkit-transform: rotate(-42deg);
	transform: rotate(-42deg);
	top: 10px;
}
div#menu:hover span:nth-child(1) {
	-moz-transform: rotate(6deg);
	-ms-transform: rotate(6deg);
	-o-transform: rotate(6deg);
	-webkit-transform: rotate(6deg);
	transform: rotate(6deg);
}
div#menu:hover span:nth-child(2) {
	-moz-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
	-o-transform: rotate(2deg);
	-webkit-transform: rotate(2deg);
	transform: rotate(2deg);
}
div#menu:hover span:nth-child(3) {
	-moz-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	-o-transform: rotate(-2deg);
	-webkit-transform: rotate(-2deg);
	transform: rotate(-2deg);
}
div#menu:hover span:nth-child(4) {
	-moz-transform: rotate(-6deg);
	-ms-transform: rotate(-6deg);
	-o-transform: rotate(-6deg);
	-webkit-transform: rotate(-6deg);
	transform: rotate(-6deg);
}
			
Mehr anzeigen

Nun sollte zu mindestens der Hover Effekt schon erkennbar sein.

3. Animation des Mobile Menu erstellen

Ich nutze jQuery um die Animation des Mobile Menüs zu erstellen. Die folgende Funktion sagt nicht mehr aus, als dass beim Klick auf das DIV mit der ID Menu dem Div und in meinem Fall noch dem nav-Element eine Klasse mit active angehängt wird. Beim erneuten Klick wird die Klasse active wieder entfernt.

javascript
				jQuery( 'div#menu' ).on('click', function() {
	jQuery(this).toggleClass('active');
	jQuery('nav').toggleClass('active');
});
			
Mehr anzeigen

Hinterlasse doch ein Kommentar

Schreibe ein Kommentar zu Mobile Menü Icon Animation

Wenn dir der Beitrag Mobile Menü Icon Animation gefallen hat oder du Kritik bzw. Verbesserungsvorschläge hast, dann würde ich mich freuen, wenn Du ein Kommentar hinterlassen würdest.

Hinterlasse ein Kommentar zum Beitrag "Mobile Menü Icon Animation"

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Deine Website soll rocken? Ich pack mit an!