Slide out Panel nur mit CSS3
Ein weiteres CSS Tutorial für ein universelles Panel das für verschiedenste Zwecke verwendet werden kann. Ohne Javascript, nur mit CSS3.
CSS3 Slide out Panel
Das Panel kann für die verschiedensten Zwecke verwendet werden wie zum Beispiel eine fixe Menüleiste, Social Media Bar, Kontaktformulare oder Feedbackformulare und vieles mehr.
Es werden wie immer alle gängigen Browser unterstützt. Hier gehts zum DEMO.
Das Markup
Als erstes benötigen wir ein simples Markup in unserem html Dokument. In unserem Beispiel wird kein weiterer Code eingefügt.
<div id="slideout_div"> <img src="kontakt.png" alt="Kontakt" /> <div id="slideout_inner_div"> Hier können Sie jeden belieben Code einfügen </div> </div>
Hierbei haben wir zwei div´s. Einen “slideout_div” Div welches der Parent ist. Dieser hat in dem Beispiel ein kleines Label für ein Kontaktformular (kontakt.png). Bewegt man den Mauszeiger auf das Label, erweitert sich dieses mit dem Formular.
Selbstverständlich kann man den Text auf dem .Png Bild ebenfalls mit CSS3 erstellen. Man muss also nicht unbedingt ein Bild nehmen.
Als zweiten Div haben wir nun den “slideout_inner_div”. Das ist unser Container für das Formular.
CSS
Jetzt kommt das Wichtige:
Wir benutzen zwei pseudo Klassen und die CSS3 transition-duration Einstellung damit das Slideout funktioniert. Hier wieder nur der wesentliche Code. Background Color usw. wurden hier wieder weggelassen.
#slideout_div {
position: fixed;
top: 40px;
left: 0;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
#slideout_inner_div {
position: fixed;
top: 40px;
left: -250px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
#slideout_div:hover {
left: 250px;
}
#slideout_div:hover #slideout_inner_div {
left: 0;
}
Die transition-duration Einstellung gibt an wie lange die Bewegung dauern soll. Das erzeugt einen flüssigen Bewegungsablauf beim fade out.
DEMO
Für weiter Fragen stehen wir gerne zur Verfügung. Kontakt
