Shoutbox am Rand - ohne Javascript

Vor einiger Zeit habe ich ein Tutorial online gestellt in dem ich erkläre, wie eine Shoutbox mithilfe von Javascript am Seitenrand angezeigt werden kann. Daraufhin wurde ich mehrfach darauf hingewiesen, dass das auch einfacher geht - ohne Javascript. Und das ist natürlich völlig richtig ^_^ Aus diesem Grund folgen hier nun weitere Möglichkeiten, um eine Shoutbox in eurer Design zu bzw. eure Website zu integrieren.

Ohne Script - Ganz simpel mit CSS

Ganz simpel, nichts muss eingebunden werden oder geladen werden. Wir erstellen ein div mit der id "slideout". Dieses Div sorgt später dafür, dass die Box "aufgeht" wenn wir mit der Maus darüber fahren. Innerhalb dieses Divs können wir einen Text oder ein Bild (in meinem Beispiel ist es ein Bild) definieren. Dies ist der Bereich, auf den mit der Maus die Shoutbox geöffnet oder geschlossen werden kann. Darunter, immer noch innerhalb des "slideout" divs, erstellen wir nochmal ein Div mit der ID "shoutbox". In dieses Div fügen wir unseren Shoutbox Code rein.

<div id="slideout">
    <img src="shoutbox.png" />
    <div id="shoutbox">
        <!-- Hier kommt dein Shoutbox Code hin !-->
    </div>
</div>

Danach müssen wir per stylesheet noch dafür sorgen, dass die Shoutbox auf und zugeht.

Das sieht so aus:

#slideout {
    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;
}
#shoutbox {
    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:hover {
    left: 250px;
}
#slideout:hover #shoutbox {
    left: 0;
}

Fertig :) 

# Beispiel Ansehen

# Beispiel Dateien downloaden.