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 in den meisten Fällen 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.

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

Also habe ich ein 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.

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. Um eine Animation zu erstellen behelfe ich mich bei jQuery. 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.

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.

oliver Ich heisse Oli und komme aus dem wuseligen Berlin. Meine Leidenschaft für Webseiten hält seit mehr 10 Jahren an. Dabei ist es egal ob ich kleinere oder größere Projekte umsetze - ich hänge mich in jedes Projekt mit voller Leidenschaft rein und versuche mich dabei immer wieder neu zu entdecken und neue Ideen umzusetzen.

Hinterlasse ein Kommentar

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.