1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Slide out Panel CSS3

Ein weiteres CSS Tutorial für ein universelles Panel das für verschiedenste Zwecke verwendet werden

  1. Webcp
    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.


    HTML:
    1. <div id="slideout_div"> <img src="Angebot.png" alt="Angebot" />
    2. <div id="slideout_inner_div">
    3. Hier können Sie jeden belieben Code einfügen
    4. </div>
    5. </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.


    Code (CSS):
    1. #slideout_div {
    2. position: fixed;
    3. top: 40px;
    4. left: 0;
    5. -webkit-transition-duration: 0.3s;
    6. -moz-transition-duration: 0.3s;
    7. -o-transition-duration: 0.3s;
    8. transition-duration: 0.3s;
    9. }
    10. #slideout_inner_div {
    11. position: fixed;
    12. top: 40px;
    13. left: -250px;
    14. -webkit-transition-duration: 0.3s;
    15. -moz-transition-duration: 0.3s;
    16. -o-transition-duration: 0.3s;
    17. transition-duration: 0.3s;
    18. }
    19. #slideout_div:hover {
    20. left: 250px;
    21. }
    22. #slideout_div:hover #slideout_inner_div {
    23. left: 0;
    24. }
    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