PlayCards Menü - Website X5 Hilfe - Die 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 Menü, das ohne Imagedateien und auch ohne JavaScript auskommt.
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">.

Hier sind 2 Varianten zur Einbindung erläutert. Sollte dieses Menü 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. Hier muss aber die ausführende Datei die Dateiendung .php aufweisen, um den Code ausführen zu können. Bei Direkteinbindung kann auch eine .html als ausführende Datei genutzt werden.
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.
Download Button
x runter geladen!
Code für den <HEAD> Bereich
<link rel="stylesheet" type="text/css" href="wsX5Obj/Obj140_0/menu_style.css" />
Code für den <BODY> Bereich
<?php include "wsX5Obj/Obj140_0/index.html"; ?>

alternative Einbindung:
<div style="padding-top: 160px">
<ul class="Obj140">
<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="#"><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ü 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ü 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ü 5</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>STARTSEITE</b><i>&#9813;</i></a></li>
</ul>
</div>
Code Datei "menu_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: 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);
}
.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 ""

Kein Kommentar
Vielen Dank für Dein Feedback.
HTML5
Button Spenden

© 2009 - 2019





Besucher Statistik
» 2 Online
» 191 Heute
» 346 Gestern
» 191 Woche
» 8197 Monat
» 111709 Jahr
» 439465 Gesamt
Record: 2382 (29.03.2019)
Gesamt Downloads:
Zurück zum Seiteninhalt