Webdesign - Menü mit Garagentore

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Wie realisiert man Garagentore die sich automatisch öffnen?

29Dez2014

Menü mit Garagentore.


Der Effekt mit einem "öffnenden Garagentor" hatte ich in der Fotogalerie vor ein paar Jahren mit JavaScript (objektorientierte Programmiersprache) realisiert, aber durch die CSS3 (Cascading Style Sheet)-Transitionen geht das nun auch viel einfacher. Wie ich die Technik der auffahrenden Garagentore realisiert habe möchte ich in diesem Artikel kurz aufzeigen.
Im Grunde genommen ist es die gleiche Vorgehensweise wie beim "Überlenden von zwei Bilder". Da ich unter dem Garagentor auch einen Text darstellen möchte, habe ich das Ganze wieder mit einem "div-Container" realisiert. Der Aufbau des HTML5 (HyperText Markup Language)-Gerüsts schaut wie folgt aus.

<div class="tuer" title="Hier geht es zu den Blumenbildern">
    <a href="/fotogalerie-Blumen">
        <img src="/galerien/slides/bg01.jpg" width="200" height="100">
        <img src="/galerien/slides/Blumen.jpg" width="200" height="100">
        <p>26.10.2008<br>Blumen aus Irland
        </p>
    </a>
</div>

Die beiden Bilder, das Hintergrundbild und das Bild des Garagentores, liegen hintereinander und durch die absolute Platzierung wird das zweite Bild, das Bild des Garagentores, angezeigt. Damit dieses Bild nun aber nicht nur nach oben verschoben wird, muss ich dem Container die Eigenschaft "overflow: hidden" geben.
Bei den Bildern wird der absoluten Platzierung von oben der Wert "0" zugeteilt. Das zweite Bild spreche ich wieder mit der Pseudo-Klasse "nth-of-type (2)" an und verschiebe es beim Überfahren mit dem Mauszeiger um 85 Pixel nach oben, aus dem sichtbaren Bereich heraus.
Dem Textfeld wird dann noch als Hintergrund der Rahmen der Garage zugeteilt und entsprechend ausgerichtet.

.tuer {
    position: relative;
    height: 170px;
    width: 200px;
    margin: 1em auto;
    overflow: hidden;
    box-shadow: 0 0 5px -2px rgba(0, 0, 0, .7), 0 0 4px rgba(0, 0, 0, .7);
    background: #eee;
    transition: 2s;
}

.tuer img {
    position: absolute;
    top: 0;
    transition: 2s;
}

.tuer:hover img:nth-of-type(2) {
    top: -85px;
}

.tuer:hover {
    box-shadow: none;
}

.tuer p {
    position: absolute;
    line-height: 1.3em;
    text-align: center;
    height: 65px;
    width: 178px;
    bottom: 0;
    padding: 103px 10px 0;
    border: 1px solid #575757;
    background: url(/galerien/slides/fenster.png) no-repeat;
}

Das war schon alles. Als Beispiel sieht man unten die Garage in Funktion und auf der Seite Übersicht der Fotogalerien ist dieser Effekt mehrfach eingebunden.

Zum Seitenanfang springen Λ