PlayCards Menü - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Scan QR or Download Android App
Direkt zum Seiteninhalt

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.
Download Button
x runter geladen
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>&#9829;</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>&#9829;</span>
    </li>
    <li><a href="#"><b>Hauptmenü 4</b></a>
    <em>&#9824;</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>&#9824;</em>
    </li>
    <li><a href="#"><b>Hauptmenü 3</b></a>
    <span>&#9830;</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>&#9830;</span>
    </li>
    <li><a href="#"><b>Hauptmenü 2</b></a>
    <em>&#9827;</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>&#9827;</em>
    </li>
    <li><a href="#"><b>Hauptmenü 1</b></a>
    <span>&#9829;</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>&#9829;</span>
    </li>
    <li><a href="http://x5forum.home-wiekau.de"><b>STARTSEITE</b><i>&#9813;</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 «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt