Für einen Kunden sollte ich eine etwas ungewöhnliche Menüführung realisieren: Sowohl am linken Rand als auch am rechten Rand sollte ein horizontales Untermenü erscheinen. Die angewählten Seiten sollten dann als Slides in das Fenster hineingeschoben werden.

Screenshot: Demo: Navigation auf der rechten Seite mit Slides von rechts

Demo: Navigation auf der rechten Seite mit Slides von rechts

Die übliche Vorgehensweise besteht darin, den linken Rand des Slide-Elements mit einem negativen Wert für margin-left aus dem sichtbaren Fenster herauszunehmen. Wird der zugehörige Menüpunkt geklickt, wird dieser margin-left dann der Wert Null zugewiesen und über die CSS-Eigenschaft transition die Animation eingestellt.

Als ich das Ganze nun auch für die rechte Seite umsetzen wollte, erlebte ich eine böse Überraschung: Bevor die Animation genau wie gewollt das Slide-Element von rechts nach links ins Fenster verschob, wurde der Bildausschnitt komplett nach links verschoben. Statt des angewählten Slide-Elements waren nun die eigentlich rechts aus dem Fenster verschobenen Elemente zu sehen!

Screenshot: Demo: Navigation auf der rechten Seite mit Slides von rechts, Fensterinhalt verschoben

Demo: Bei Aktivierung eines Menüpunktes wird der Fensterinhalt nach links verschoben.

Was war passiert?

Anders als bei links aus dem sichtbaren Fenster verschobenen Elementen bekam das nach rechts verschobene Slide-Element durch die Aktivierung den Fokus! Dadurch wurde dann das Bild im Fenster entsprechend verschoben. Nach einigen Tests und Recherchen war klar: dieses Verhalten ist sowohl logisch, als auch gewollt. Schließlich lesen wir von links nach rechts. Der linke Rand ist also gleichsam eine absolute Grenze, weiter Links geht nicht. Der reche Rand hingegen ist im Prinzip offen.

Die Lösung: Elementbreite auf Null setzen

Die Lösung des Problems ist zum Glück sehr einfach: Das Slide-Element wird nicht nur mit einem negativen Wert für margin-right – oder alternativ einer absoluten Positionierung mit left: 100% – nach rechts aus dem sichtbaren Fenster verschoben. Gleichzeitig wird auch die Elemtbreite mit width: 0 auf Null gesetzt. Erhält das Slide-Element jetzt den Fokus, verschiebt sich der Fensterinhalt nicht, denn in diesem Moment hat das Element ja keine Breite!

Die Animation verändert dann gleichzeit Position und Breite, ist also genaugenommen kein reiner Slide mehr, sondern auch ein Stretch. Das fällt aber kaum auf.

CSS-Angaben

Hier die relevanten CSS-Angaben aus der Demo:

.slide-right {
	position: absolute;
        left: 100%;
	width: 0%;
	height: 100%;
	background-color: #000000;
	z-index: 2;
        box-shadow: -5px 0 5px #999999;
	-webkit-transition: all .6s ease-in-out;
	-moz-transition: all .6s ease-in-out;
	-o-transition: all .6s ease-in-out;
	-ms-transition: all .6s ease-in-out;
	transition: all .6s ease-in-out;
        }
.slide-right:target {
        left: 40px;
	width: calc( 100% - 40px );
	background-color: #ffffff;
        }

Demo

Download Sourcecode

 

28. Januar 2014 | Blog, Tutorial | 9.756 views

Tags: , ,