Flower Menü - Website X5 Hilfe - Die Helpsite

Direkt zum Seiteninhalt

Hauptmenü:

Flower Menü

Scripte > Menü Navigation


Ein außergewöhnliches Blumen-Menü. (UTF-8)

CSS

Ein einfaches nicht alltägliches Menü, welches nur als Hauptmenü einsetzbar wäre.
Hier sind 2 Varianten zur Einbindung erläutert. Sollte dieses Menü als Gleiches auf mehreren Seiten eingesetzt werden,  empfiehlt sich die Variante 2, um Änderungen nur in einer Datei durchführen zu müssen.
In der Zip-Datei befindet sich ein Verzeichnis "
cs_flower-menu", das so übernommen werden kann.
Die Anpassung des Menüs erfolgt dann in der Datei "menu_style.css" im Hauptverzeichnis.

Browser
9


Code für den HEAD-Bereich:

<link rel="stylesheet" type="text/css" href="cs_flower-menu/menu_style.css" />



Variante 1


Code für das HTML-Objekt:

<br /><br />
<ul class="flower">
<li class="p1"><a href="#x"><b>MENÜ 1</b></a></li>
<li class="p2"><a href="#x"><b>MENÜ 2</b></a></li>
<li class="p3"><a href="#x"><b>MENÜ 3</b></a></li>
<li class="p4"><a href="#x"><b>MENÜ 4</b></a></li>
<li class="p5"><a href="#x"><b>MENÜ 5</b></a></li>
<li class="p6"><a href="#x"><b>MENÜ 6</b></a></li>
<li class="center"></li>
</ul>


Variante 2

Code für das HTML-Objekt:


<? include "cs_flower-menu/index.html"; ?>


Code der CSS-Datei (menu_style.css):


ul.flower {padding:0; margin:50px auto; list-style:none; position:relative; height:300px; width:300px;}
ul.flower li a {display:block; width:100px; position:absolute; left:0; top:0; background:#888; line-height:100px;font:bold 13px/100px arial, sans-serif; color:#fff; text-align:center; text-decoration:none;
border-radius:100px 100px 0 100px;
-moz-border-radius:100px 100px 0 100px;
transform-origin: 101px 101px;
-ms-transform-origin: 101px 101px;
-o-transform-origin: 101px 101px;
-moz-transform-origin: 101px 101px;
-webkit-transform-origin: 101px 101px;
}
ul.flower li a b {display:block;
transform:rotate(-40deg);
-ms-transform:rotate(-40deg);
-o-transform:rotate(-40deg);
-moz-transform:rotate(-40deg);
-webkit-transform:rotate(-40deg);
}
ul.flower li a:hover {color:#000; background:#c00;
background-image: -webkit-gradient(linear, 0% 0%, 45% 45%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-60deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(-60deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(-60deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
box-shadow: -4px -4px 8px rgba(0, 0, 0, 0.4);
-moz-box-shadow: -4px -4px 8px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: -4px -4px 8px rgba(0, 0, 0, 0.4);
}
ul.flower li.p1 a {
transform:rotate(60deg)skew(30deg);
-ms-transform:rotate(60deg)skew(30deg);
-o-transform:rotate(60deg)skew(30deg);
-moz-transform:rotate(60deg)skew(30deg);
-webkit-transform:rotate(60deg)skew(30deg);
}
ul.flower li.p2 a {
transform:rotate(120deg)skew(30deg);
-ms-transform:rotate(120deg)skew(30deg);
-o-transform:rotate(120deg)skew(30deg);
-moz-transform:rotate(120deg)skew(30deg);
-webkit-transform:rotate(120deg)skew(30deg);
}
ul.flower li.p3 a {
transform:rotate(180deg)skew(30deg);
-ms-transform:rotate(180deg)skew(30deg);
-o-transform:rotate(180deg)skew(30deg);
-moz-transform:rotate(180deg)skew(30deg);
-webkit-transform:rotate(180deg)skew(30deg);
}
ul.flower li.p4 a {
transform:rotate(240deg)skew(30deg);
-ms-transform:rotate(240deg)skew(30deg);
-o-transform:rotate(240deg)skew(30deg);
-moz-transform:rotate(240deg)skew(30deg);
-webkit-transform:rotate(240deg)skew(30deg);
}
ul.flower li.p5 a {
transform:rotate(300deg)skew(30deg);
-ms-transform:rotate(300deg)skew(30deg);
-o-transform:rotate(300deg)skew(30deg);
-moz-transform:rotate(300deg)skew(30deg);
-webkit-transform:rotate(300deg)skew(30deg);
}
ul.flower li.p6 a {
transform:rotate(360deg)skew(30deg);
-ms-transform:rotate(360deg)skew(30deg);
-o-transform:rotate(360deg)skew(30deg);
-moz-transform:rotate(360deg)skew(30deg);
-webkit-transform:rotate(360deg)skew(30deg);
}
ul.flower li.center {width:54px; height:54px;position:absolute; left:72px; top:72px; z-index:100; background:#ff0;
border-radius:50px;
-moz-border-radius:50px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(0, 0, 0, 0.6);
}


Feedbacks zu ""

es gibt insgesamt 0 Kommentar(e)



Name*
Vorname
Kommentar*
Email *
Homepage
Telefon
Sicherheitscode *
 
Logo HTML5
Button Spenden

© 2009 - 2017




  Besucher Statistik
 » 16 Online
 » 79 Heute
 » 304 Woche
 » 2462 Monat
 » 66452 Jahr
 » 242752 Gesamt
Rekord: 1420 (10.04.2014)
Zurück zum Seiteninhalt | Zurück zum Hauptmenü