Kategorie :

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="Angebot.png" alt="Angebot" />
<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 Angebotformular (Angebot.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.

Das 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

Tags :

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.