Mobil / Responsive Webseite erstellen - Tipps & Tricks – revilodesign.de

Mobile Menü Icon Animation

Oliver Götze — Wed, 13 Sep 2017 07:53:26 +0000

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

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

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

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

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

Der Beitrag Mobile Menü Icon Animation erschien zuerst auf revilodesign.

Responsive Webdesign – die richtigen Breaking Points und Meta Queries

Oliver Götze — Tue, 24 Mar 2015 14:37:04 +0000

Responsive Webdesign ist die einfachste Form Webseiten für den Desktop, Tablets und Smartphones. Doch was sind die besten Breaking Points und welche Meta Queries verwendet man dafür?

Was bedeuten Breaking Points beim responsive Webdesign?

Der Breaking Point beim Responsive Webdesign gibt an, ab wie vielen Pixel die Ansicht umbricht, sprich sich verändern soll. Wer beispielsweise das Browserfenster meiner Seite langsam zusammenschiebt, der wird sehen, dass es einige unterschiedliche Breaking Points gibt. Jeder Breaking Point soll die Elemente meiner Webseite am optimal darstellen. Dabei soll es egal sein ob der Besucher mit einem riesigen Bildschirm meine Seite besucht oder mit einem Smartphone. Durch Breaking Points versuche ich meinen Inhalt den Besuchern immer optimal zugänglich zu machen. Das ist das Prinzip hinter Breaking Points.

Welche sind die besten Breaking Points?

Man kann nicht sagen welches die besten Breaking Points sind, denn wenn man damit anfängt für jede Breite eine neue Ansicht zu machen, dann wird man damit nie fertig. Es gibt einfach zu viele unterschiedliche Auflösungen. Es gibt aber einige Breaking Points die sich mit der Zeit ein wenig durchgesetzt haben.

Breaking Point für Laptop

css

				@media (max-width: 1200px) {
}

css

				@media (max-width: 1024px) {
}

css

				@media (max-width: 768px) {
}

css

				@media (max-width: 480px) {
}

css

				@media (max-width: 320px) {
}

Nun kann man sich die Mühe machen und für jeden einzelnen Breaking Point die Ansicht anders darstellen oder man versucht ab einen gewissen Punkt alle Größen gleichzeitig zu gestalten. Beispielsweise ab der @media (max-width: 768px) {}. Ab diesem Breaking Point bietet es sich an die darunterliegenden Auflösungen gleich mit einem Abwasch zu stylen.

Wer sich dennoch die Mühe machen möchte, der findet bei StatCounter eine Liste der gängigsten Displayauflösungen.

Statistik: die häufigsten Bildschirmauflösungen Weltweit – Dez‘ 17

Zoom von Smartphones verhindern – Breaking Points aktivieren

Standardmäßig zeigt das Smartphone die geöffnete Webseite in voller Größe und reagiert nicht auf die definierten Breaking Points. Das ist natürlich nicht benutzerfreundlich, denn der Besucher muss erst in die Seite manuell zoomen um hin und her zu navigieren. Um dies zu verhindern kommt der folgende Meta-Tag in den head. Damit reagiert das Smartphone auf die Breaking Points.

html

Der Beitrag Responsive Webdesign – die richtigen Breaking Points und Meta Queries erschien zuerst auf revilodesign.

Mobil / Responsive Webseite erstellen - Tipps & Tricks – revilodesign.de

Mobile Menü Icon Animation

Ziel: solch ein modernes Mobile Menü zu erstellen

Modernes Mobile Menu erstellen - So funktioniert's

1. Erstelle ein div

2. stylet das div in deiner Stylesheet

3. Animation des Mobile Menu erstellen

Responsive Webdesign – die richtigen Breaking Points und Meta Queries

Was bedeuten Breaking Points beim responsive Webdesign?

Welche sind die besten Breaking Points?

Breaking Point für Laptop

Breaking Point für iPad Quer

Breaking Point für iPad Hoch

Breaking Point für iPhone Quer

Breaking Point für iPhone Hoch

Statistik: die häufigsten Bildschirmauflösungen Weltweit – Dez‘ 17

Zoom von Smartphones verhindern – Breaking Points aktivieren