PlayCards Menü - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
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
Downloads:
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;
}
Feedbacks zu ""

Keine Kommentare gefunden.

Bitte Dein Feedback

Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.

Login | Registrierung


            CAPTCHA
            Vielen Dank für Dein Feedback.
            Logo Host Europe
            Button Spenden

            © 2009 - 2020




            
            Besucher Statistik
            » 1 Online
            » 18 Heute
            » 76 Gestern
            » 582 Woche
            » 2790 Monat
            » 49751 Jahr
            » 273957 Gesamt
            Record: 1144 (01.02.2020)
            Gesamt Downloads:
            Hosting by
            Zurück zum Seiteninhalt