PlayCards Menü
Scripte > Menü Navigation
Ein außergewöhnliches Menü mit Spielkarten
Hier ein nicht alltägliches Spielkarten Menü. Idealer Weise eignet es sich wegen dem Style fast nur als Intro-Seite, wer es mag auch als Hauptmenü einer Webseite. Auch die Spielkarten werden über die CSS-Datei erzeugt. Da das Untermenü sich nach oben öffnet (Spielkarten schieben sich hoch), muss für das gesamte Menü der Innenabstand in der ersten Zeile im HTML-Code in der Höhe entsprechend angepasst werden:
<div style="padding-top: 160px">
Es sind 2 Varianten zur Einbindung erläutert. Sollte dieses Menü doch auf mehreren Seiten eingesetzt werden, empfiehlt sich die Variante per
<?php include "...."; ?> , um Textänderungen des Menüs nur in einer Datei durchführen zu müssen. Dann muss die ausführende Datei die Dateiendung .php aufweisen.
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HEAD-Code in den HEAD-Bereich <head>.....</head> und HTML-Code in den BODY-Bereich <body>.....</body> der aufrufende Datei einfügen.
Eine demo.html ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.
Aufruf: "http://www.domain.tld/demo.html". Diese kann aber auch durch einen Doppelklick ausgeführt werden.
x runter geladen
- DOWNLOAD ♥ ♥
- Hauptmenü 4 ♠ ♠
- Hauptmenü 3 ♦ ♦
- Hauptmenü 2 ♣ ♣
- Hauptmenü 1 ♥ ♥
- STARTSEITE♕
Code für den <HEAD> Bereich
<link rel="stylesheet" href="wsX5Obj/Obj140_0/style.css" />
Code für den <BODY> Bereich
<?php include "wsX5Obj/Obj140_0/menu_inc.html"; ?>
alternative Einbindung:
<div style="padding-top: 160px">
<ul class="Obj140">
<li><a href="http://com.home-wiekau.de/pj_LinkCounter/click.php?id=X5-Obj140_0"><b>DOWNLOAD</b></a>
<span>♥</span>
<ul>
<li><a href="#">Untermenü 5.1</a></li><li><a href="#">Untermenü 5.2</a></li><li><a href="#">Untermenü 5.3</a></li><li><a href="#">Untermenü 5.4</a></li><li><a href="#">Untermenü 5.5</a></li>
</ul>
<span>♥</span>
</li><li><a href="#"><b>Hauptmenü 4</b></a>
<em>♠</em>
<ul>
<li><a href="#">Untermenü 4.1</a></li><li><a href="#">Untermenü 4.2</a></li><li><a href="#">Untermenü 4.3</a></li><li><a href="#">Untermenü 4.4</a></li>
</ul>
<em>♠</em>
</li><li><a href="#"><b>Hauptmenü 3</b></a>
<span>♦</span>
<ul>
<li><a href="#">Untermenü 3.1</a></li><li><a href="#">Untermenü 3.2</a></li><li><a href="#">Untermenü 3.3</a></li><li><a href="#">Untermenü 3.4</a></li><li><a href="#">Untermenü 3.5</a></li>
</ul>
<span>♦</span>
</li><li><a href="#"><b>Hauptmenü 2</b></a>
<em>♣</em>
<ul>
<li><a href="#">Untermenü 2.1</a></li><li><a href="#">Untermenü 2.2</a></li><li><a href="#">Untermenü 2.3</a></li><li><a href="#">Untermenü 2.4</a></li><li><a href="#">Untermenü 2.5</a></li><li><a href="#">Untermenü 2.6</a></li><li><a href="#">Untermenü 2.7</a></li>
</ul>
<em>♣</em>
</li><li><a href="#"><b>Hauptmenü 1</b></a>
<span>♥</span>
<ul>
<li><a href="#">Untermenü 1.1</a></li><li><a href="#">Untermenü 1.2</a></li><li><a href="#">Untermenü 1.3</a></li><li><a href="#">Untermenü 1.4</a></li><li><a href="#">Untermenü 1.5</a></li><li><a href="#">Untermenü 1.6</a></li>
</ul>
<span>♥</span>
</li><li><a href="http://x5forum.home-wiekau.de"><b>STARTSEITE</b><i>♕</i></a></li>
</ul>
</div>
Code Datei "style.css"
.Obj140 { padding: 0; margin: 50px auto; list-style: none; position: relative; height: 270px; width: 200px; }
.Obj140 > 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;}
.Obj140 > 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: normal 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);}
.Obj140 > li > a:after,
.Obj140 > li > a:before { display: block; width: 75%; height: 75%; content: ""; position: absolute; z-index: -1; }
.Obj140 > 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);}
.Obj140 > 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.Obj140 > 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.Obj140: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.Obj140: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.Obj140: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.Obj140: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.Obj140: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.Obj140: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.Obj140 > 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.Obj140 li ul { padding: 0; margin: 0; list-style: none; position: absolute; top: 25px; left: 30px; }
ul.Obj140 li ul li a { font: bold 12px/18px arial, sans-serif; color: #c00; text-decoration: none; }
ul.Obj140 li ul li a:hover { color: #000; }
ul.Obj140 li span:nth-of-type(1) { font-size: 30px; position: absolute; top: 10px; right: 10px; color: #c00; }
ul.Obj140 li em:nth-of-type(1) { font-size: 30px; position: absolute; top: 10px; right: 10px; color: #000; }
ul.Obj140 li span:nth-of-type(2) { font-size: 30px; position: absolute; top: 220px; left: 10px; color: #c00; }
ul.Obj140 li em:nth-of-type(2) { font-size: 30px; position: absolute; top: 220px; left: 10px; color: #000; }
ul.Obj140 li i {
font: normal 200px/270px arial, sans-serif;color: #c00;position: absolute;left: 0;top: 0;width: 200px;text-align: center;}
» nach oben «