Sich drehende Blätter als Menü

Mit CSS sind verschiedene, witzige Effekte möglich. Du kannst bspw. ein Navigationsmenü erzeugen, das aus Blättern besteht die sich um die eigene Achse drehen, wenn man mit der Maus drüber fährt. Das ist sicherlich nicht für den Einsatz auf professionellen Webseiten gedacht, aber einfach als Designbeispiel oder auf privaten Webseiten kann dieser Effekt durchaus witzig sein.

 

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

Die Farben der einzelnen Blätter kannst du beliebig anpassen, genau so natürlich wie die Beschriftungen der Menüpunkte. Du kannst weitere Menüpunkte hinzufügen, oder welche entfernen. Wenn du weitere Menüpunkte hinzufügen möchtest, musst du entsprechend weitere IDs angelegen.

 

Den nachstehenden Code-Schnipsel musst an der Stelle der Website einfügen, wo das Menü erscheinen soll:

 

Beispiel (HTML):

<span class="nav">
 <ul class="top-menu">
 <li><a href=#>Startseite</a><div class="menu-item" id="startseite"></div></li>
 <li><a href=#>Eintrag 1</a><div class="menu-item" id="eintrag1"></div></li>
 <li><a href=#>Eintrag 2</a><div class="menu-item" id="eintrag2"></div></li>
 <li><a href=#>Eintrag 3</a><div class="menu-item" id="eintrag3"></div></li>
 <li><a href=#>Eintrag 4</a><div class="menu-item" id="eintrag4"></div></li>
 </ul>
</span>

 

Dieser Code-Schnipsel gehört ins Stylesheet:

 

Beispiel (CSS):

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-Kompatibilität

Diesen CSS Code habe ich in folgenden Browsern getestet:

  • Google Chrome 19
  • Mozilla Firefox 13
  • Opera 11.64

In allen hier genannten Browsern funktionierte der CSS Code dabei einwandfrei. Leider kann ich jedoch keine Garantie geben, dass das oben genannte Script auch in anderen Browser-Versionen funktioniert.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

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