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

jQuery( 'div#mobimenu' ).on('click', function() {
	jQuery(this).toggleClass('active');
});

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

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

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

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.

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

Nun sollte zu mindestens der Hover Effekt schon erkennbar sein.

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

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.

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

Durch das anfügen und das entfernen der Klasse active kann ich die Position der span-Elemente anpassen und durch die css Befehle animieren.

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.