Sich drehende Blätter als Menü

Mit CSS sind diverse und zudem witzige Effekte möglich. Du kannst bspw. ein Menü erzeugen, das aus Blättern besteht die sich um die eigene Achse drehen. Der Effekt startet, wenn du mit der Maus darüber fährst. Für den Einsatz auf professionellen Websites ist das jedoch sicher nicht gedacht. Als Designbeispiel oder auf privaten Websites kann dieser Effekt aber durchaus witzig sein.

im Folgenden zeige ich dir, wie du einen solchen Effekt auch auf deiner Website einbauen kannst.

 

CSS Code für das Navigationsmenü aus sich drehenden Blättern

Die Farben der einzelnen Blätter kannst du im Grunde genommen beliebig anpassen. Ferner lässt sich auch die Beschriftung der Blätter ändern. Du kannst des Weiteren neue Menüpunkte erstellen, oder sie löschen. Für jeden neuen Menüpunkt musst du aber auch eine weitere div class id anlegen. Dazu kannst du das Beispiel unten einfach nach Belieben erweitern.

Im Folgenden zeige ich dir nun das HTML- und das CSS Snippet, welches du in deine Website einfügen kannst.

 

Beispiel (HTML):

Das folgende Snippet musst du an der Stelle der Website einfügen, wo du schließlich das Menü haben möchtest:

<span class="nav">
 <ul class="top-menu">
 <li><a href=#>Startseite</a><div class="menu-item" id="startseite"></div></li>
 <li><a href=#>Erster Eintrag</a><div class="menu-item" id="eintrag1"></div></li>
 <li><a href=#>Zweiter Eintrag</a><div class="menu-item" id="eintrag2"></div></li>
 <li><a href=#>Dritter Eintrag</a><div class="menu-item" id="eintrag3"></div></li>
 <li><a href=#>Vierter Eintrag</a><div class="menu-item" id="eintrag4"></div></li>
 </ul>
</span>

 

Beispiel (CSS):

Das folgende Snippet gehört hingegen ins Stylesheet deiner Website.

nav {
 width: 960px;
 height: 100px;
 margin: 120px auto;
 text-align: center;
}
.top-menu li {
 display: inline-block;
 text-align: center;
 margin: 30px 5px;
 position: relative;
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
}
.top-menu li:hover {
 margin: 30px 20px;
}
.top-menu li:active {
 margin: 30px 33px;
}
.top-menu li a {
 width: 100px;
 height: 100px;
 z-index: 9999;
 position: absolute;
 top: 35px;
 font-weight: bold;
 display: block;
 text-decoration: none;
 font-size: 20px;
 color: #fff;
 text-shadow: 0px 1px 1px rgba(0,0,0,0.4), 0px 4px 6px rgba(0,0,0,0.1), 0px 9px 11px rgba(0,0,0,0.1);
 -webkit-transition: all 0.1s linear;
 -moz-transition: all 0.1s linear;
 -o-transition: all 0.1s linear;
}
.top-menu li:active a {
 font-size: 26px;
 top: 30px;
 text-shadow: none;
}
.top-menu li div.menu-item {
 width: 100px;
 height: 100px;
 display: block;
 -webkit-transition: all 0.2s ease;
 -moz-transition: all 0.2s ease;
 -o-transition: all 0.2s ease;
 -webkit-border-top-left-radius: 100px;
 -webkit-border-bottom-right-radius: 100px;
 -moz-border-radius-topleft: 100px;
 -moz-border-radius-bottomright: 100px;
 border-top-left-radius: 100px;
 border-bottom-right-radius: 100px;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -o-transform: rotate(45deg);
}
.top-menu li:hover div.menu-item{
 -webkit-border-top-left-radius: 80px;
 -webkit-border-bottom-right-radius: 80px;
 -moz-border-radius-topleft: 80px;
 -moz-border-radius-bottomright: 80px;
 border-top-left-radius: 80px;
 border-bottom-right-radius: 80px;
 -webkit-transform: rotate(225deg);
 -moz-transform: rotate(225deg);
 -o-transform: rotate(225deg);
}
.top-menu li:active div.menu-item{
 -webkit-border-top-left-radius: 50px;
 -webkit-border-bottom-right-radius: 50px;
 -moz-border-radius-topleft: 50px;
 -moz-border-radius-bottomright: 50px;
 border-top-left-radius: 50px;
 border-bottom-right-radius: 50px;
 }
#startseite { background: #41D05F; }
#eintrag1 { background: #E42B2B; }
#eintrag2 { background: #ff8400; }
#eintrag3 { background: #a800ff; }
#eintrag4 { background: #49a7f3; }

 

Anzeigebeispiel ansehen

 

Browser-Test

Das obige CSS Snippet habe ich dazu in diesen Browsern getestet:

  • Google Chrome 19
  • Mozilla Firefox 13
  • Opera 11.64

In allen hier genannten Browsern klappte das Snippet dabei einwandfrei. Ich kann darüber hinaus jedoch nicht versichern, dass dieses Beispiel auch in anderen oder hier nicht genannten Browsern funktioniert.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.