PlayCards Menü - Website X5 Hilfe - Die Helpsite

Direkt zum Seiteninhalt

Hauptmenü:

PlayCards Menü

Scripte > Menü Navigation


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

CSS

Hier ein nicht alltägliches Menü, das ohne Imagedateien und auch ohne JavaScript auskommt.
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_playcards-menu", das so übernommen werden kann.
Die Anpassung des Menüs erfolgt dann in der Datei "menu_style.css" im Hauptverzeichnis.

Browser


Code für den HEAD-Bereich:

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



Variante 1


Code für das HTML-Objekt:

<br /><br /><br /><br /><br /><br /><br /><br /><br />
<ul class="cards">
<li><a href="#
x"><b>Hauptmenü 1</b></a>
 <span>&#9829;</span>
 <ul>
  <li><a href="#x">Untermenü 1.1</a></li>
  <li><a href="#x">Untermenü 1.2</a></li>
  <li><a href="#x">Untermenü 1.3</a></li>
  <li><a href="#x">Untermenü 1.4</a></li>
  <li><a href="#x">Untermenü 1.5</a></li>
  <li><a href="#x">Untermenü 1.6</a></li>
 </ul>
 <span>&#9829;</span>
</li>
<li><a href="#
x"><b>Hauptmenü 2</b></a>
 <em>&#9827;</em>
 <ul>
  <li><a href="#x">Untermenü 2.1</a></li>
  <li><a href="#x">Untermenü 2.2</a></li>
  <li><a href="#x">Untermenü 2.3</a></li>
  <li><a href="#x">Untermenü 2.4</a></li>
  <li><a href="#x">Untermenü 2.5</a></li>
  <li><a href="#x">Untermenü 2.6</a></li>
  <li><a href="#x">Untermenü 2.7</a></li>
 </ul>
 <em>&#9827;</em>
</li>
<li><a href="#
x"><b>Hauptmenü 3</b></a>
 <span>&#9830;</span>
 <ul>
  <li><a href="#x">Untermenü 3.1</a></li>
  <li><a href="#x">Untermenü 3.2</a></li>
  <li><a href="#x">Untermenü 3.3</a></li>
  <li><a href="#x">Untermenü 3.4</a></li>
  <li><a href="#x">Untermenü 3.5</a></li>
 </ul>
 <span>&#9830;</span>
</li>
<li><a href="#
x"><b>Hauptmenü 4</b></a>
 <em>&#9824;</em>
 <ul>
  <li><a href="#x">Untermenü 4.1</a></li>
  <li><a href="#x">Untermenü 4.2</a></li>
  <li><a href="#x">Untermenü 4.3</a></li>
  <li><a href="#x">Untermenü 4.4</a></li>
 </ul>
 <em>&#9824;</em>
</li>
<li><a href="#
x"><b>Hauptmenü 5</b></a>
 <span>&#9829;</span>
 <ul>
  <li><a href="#x">Untermenü 5.1</a></li>
  <li><a href="#x">Untermenü 5.2</a></li>
  <li><a href="#x">Untermenü 5.3</a></li>
  <li><a href="#x">Untermenü 5.4</a></li>
  <li><a href="#x">Untermenü 5.5</a></li>
 </ul>
 <span>&#9829;</span>
</li>
<li><a href="#x"><b>MENÜ</b><i>&#9813;</i></a></li>
</ul>



Variante 2

Code für das HTML-Objekt:


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


Code der CSS-Datei (menu_style.css):


.cards {padding:0; margin:50px auto; list-style:none; position:relative; height:270px; width:200px;}
.cards > li {width:200px; height:270px; position:absolute; top:0; left:0; transform-origin: 100px 300px;
-ms-transform-origin: 100px 300px;
-o-transform-origin: 100px 300px;
-moz-transform-origin: 100px 300px;
-webkit-transform-origin: 100px 300px;

-webkit-transition: 0.75s;
-moz-transition: 0.75s;
-o-transition: 0.75s;
transition: 0.75s;
}

.cards > li > a {display:block; width:200px; height:270px; border:1px solid #ccc; position:absolute; background:#fff; top:0; left:0; color:#000; text-decoration:none; font:bold 12px/18px arial, sans-serif;
border-radius:10px;
-moz-border-radius:10px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.cards > li > a:after,
.cards > li > a:before {display:block; width:75%; height:75%; content: ""; position:absolute; z-index:-1;}

.cards > li > a:after {right: 5px; bottom:5px;
transform-origin: bottom right;
-o-transform-origin: bottom right;
-moz-transform-origin: bottom right;
-webkit-transform-origin: bottom right;
-ms-transform-origin: bottom right;
transform: rotate(5deg) skew(12deg);
-o-transform: rotate(5deg) skew(12deg);
-moz-transform: rotate(5deg) skew(12deg);
-webkit-transform: rotate(5deg) skew(12deg);
-ms-transform: rotate(5deg) skew(12deg);
box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.3);
}

.cards > li > a:before {left:5px; bottom:5px;
transform-origin: bottom left;
-o-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform: rotate(-5deg) skew(-12deg);
-o-transform: rotate(-5deg) skew(-12deg);
-moz-transform: rotate(-5deg) skew(-12deg);
-webkit-transform: rotate(-5deg) skew(-12deg);
-ms-transform: rotate(-5deg) skew(-12deg);
box-shadow: -4px 8px 12px rgba(0, 0, 0, 0.3);
-moz-box-shadow: -4px 8px 12px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: -4px 8px 12px rgba(0, 0, 0, 0.3);
}

ul.cards > li a b {
display:block; width:100px; height:20px; margin-left:-40px; text-align:right; margin-top:50px;
transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}

ul.cards:hover > li:nth-of-type(1) {
transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
}
ul.cards:hover > li:nth-of-type(2) {
transform: rotate(-18deg);
-ms-transform: rotate(-18deg);
-o-transform: rotate(-18deg);
-moz-transform: rotate(-18deg);
-webkit-transform: rotate(-18deg);
}
ul.cards:hover > li:nth-of-type(3) {
transform: rotate(-6deg);
-ms-transform: rotate(-6deg);
-o-transform: rotate(-6deg);
-moz-transform: rotate(-6deg);
-webkit-transform: rotate(-6deg);
}
ul.cards:hover > li:nth-of-type(4) {
transform: rotate(6deg);
-ms-transform: rotate(6deg);
-o-transform: rotate(6deg);
-moz-transform: rotate(6deg);
-webkit-transform: rotate(6deg);
}
ul.cards:hover > li:nth-of-type(5) {
transform: rotate(180deg);
-ms-transform: rotate(18deg);
-o-transform: rotate(18deg);
-moz-transform: rotate(18deg);
-webkit-transform: rotate(18deg);
}
ul.cards:hover > li:nth-of-type(6) {
transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}

ul.cards > li:nth-of-type(-n+5):hover {height:480px; top:-200px;
transform-origin: 100px 470px;
-ms-transform-origin: 100px 470px;
-o-transform-origin: 100px 470px;
-moz-transform-origin: 100px 470px;
-webkit-transform-origin: 100px 470px;
}

ul.cards li ul {padding:0; margin:0; list-style:none; position:absolute; top:25px; left:30px;}
ul.cards li ul li a {font:bold 12px/18px arial, sans-serif; color:#c00; text-decoration:none;}
ul.cards li ul li a:hover {color:#000;}
ul.cards li span:nth-of-type(1) {font-size:30px; position:absolute; top:10px; right:10px; color:#c00;}
ul.cards li em:nth-of-type(1) {font-size:30px; position:absolute; top:10px; right:10px; color:#000;}
ul.cards li span:nth-of-type(2) {font-size:30px; position:absolute; top:220px; left:10px; color:#c00;}
ul.cards li em:nth-of-type(2) {font-size:30px; position:absolute; top:220px; left:10px; color:#000;}

ul.cards li i {font:normal 200px/270px arial, sans-serif; color:#c00; position:absolute; left:0; top:0; width:200px; text-align:center;}


Feedbacks zu ""

es gibt insgesamt 0 Kommentar(e)



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

© 2009 - 2018




  Besucher Statistik
 » 5 Online
 » 16 Heute
 » 1091 Woche
 » 3303 Monat
 » 47064 Jahr
 » 293642 Gesamt
Rekord: 1420 (10.04.2014)
Zurück zum Seiteninhalt | Zurück zum Hauptmenü