Flipdown 3D Menü - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
Scan QR or Download Android App

Direkt zum Seiteninhalt

Flipdown 3D Menü

Scripte > Menü Navigation
Ein 3D animiertes Drop'n'Down Menü auf CSS-Basis
Das ist ein 3D animiertes aufwendig gestaltetes und sehr schönes horizontales Klapp-Menü. Die Untermenüs werden Blockweise dargestellt. Für das Menü werden keine Image-Dateien benötigt, da das gesamte Menü über die CSS-Datei "menu_style.css" gesteuert wird, wo auch die Anpassungen an die Homepage erfolgen.
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/Obj138_0/style.css" />
Code für den <BODY> Bereich
<?php include "wsX5Obj/Obj138_0/menu_inc.html"; ?>

alternative Einbindung:
<div class="Obj138">
<ul class="nav">
<li><a class="top-a" href="#"><b>Hauptmenü 1</b></a></li>
<li><a class="top-a" href="#"><b>Hauptmenü 2</b></a>
<div class="col3">
<ul class="colLeft">
<li><a href="#">Untermenü 2.1a</a></li>
<li><a href="#">Untermenü 2.2a</a></li>
<li><a href="#">Untermenü 2.3a</a></li>
<li><a href="#">Untermenü 2.4a</a></li>
<li><a href="#">Untermenü 2.5a</a></li>
</ul>
<ul class="col">
<li><a href="#">Untermenü 2.1b</a></li>
<li><a href="#">Untermenü 2.2b</a></li>
<li><a href="#">Untermenü 2.3b</a></li>
<li><a href="#">Untermenü 2.4b</a></li>
</ul>
<ul class="colRight">
<li><a href="#">Untermenü 2.1c</a></li>
<li><a href="#">Untermenü 2.2c</a></li>
<li><a href="#">Untermenü 2.3c</a></li>
<li><a href="#">Untermenü 2.4c</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#"><b>Hauptmenü 3</b></a>
<div class="col2">
<ul class="colLeft">
<li><a href="#">Untermenü 3.1a</a></li>
<li><a href="#">Untermenü 3.2a</a></li>
<li><a href="#">Untermenü 3.3a</a></li>
<li><a href="#">Untermenü 3.4a</a></li>
<li><a href="#">Untermenü 3.5a</a></li>
</ul>
<ul class="colRight">
<li><a href="#">Untermenü 3.1b</a></li>
<li><a href="#">Untermenü 3.2b</a></li>
<li><a href="#">Untermenü 3.3b</a></li>
<li><a href="#">Untermenü 3.4b</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#"><b>Hauptmenü 4</b></a>
<div class="col1">
<ul class="colSingle">
<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>
</div>
</li>
<li><a class="top-a" href="#"><b>Hauptmenü 5</b></a></li>
<li><a class="top-a" href="#"><b>Hauptmenü 6</b></a>
<div class="col2 left">
<ul class="colLeft">
<li><a href="#">Untermenü 6.1a</a></li>
<li><a href="#">Untermenü 6.2a</a></li>
<li><a href="#">Untermenü 6.3a</a></li>
<li><a href="#">Untermenü 6.4a</a></li>
</ul>
<ul class="colRight">
<li><a href="#">Untermenü 6.1b</a></li>
<li><a href="#">Untermenü 6.2b</a></li>
<li><a href="#">Untermenü 6.3b</a></li>
<li><a href="#">Untermenü 6.4b</a></li>
</ul>
</div>
</li>
</ul>
</div>
Code Datei "style.css"
.Obj138 {
margin: 25px 0 100px 0;
text-align: center;
position: relative;
height: 40px;
z-index: 20;
background: #069;
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
border-radius:8px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-moz-perspective: 100px;
-webkit-perspective: 100px;
-o-perspective: 100px;
perspective: 100px;
}
.Obj138 ul.nav li { display: inline-block; display: inline; }
.Obj138 ul.nav {
padding: 0;
margin: 0;
list-style: none;
display: inline-block;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.Obj138 ul.nav li { float: left; display: block; padding: 0 4px; }
.Obj138 ul.nav > li { -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; }
.Obj138 ul.nav li a.top-a { display: block; text-decoration: none; margin-top: 4px; float: left; height: 36px; }
.Obj138 ul.nav li a.top-a b {
display: block;
padding: 0 20px;
font: normal 14px/30px arial, sans-serif;
color: #fff;
}
.Obj138 ul.nav li:hover a.top-a {
background: #09c;
border-radius: 8px 8px 0 0;
-moz-box-shadow: inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow: inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow: inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.Obj138 ul.nav div {
position: absolute;
top: 40px;
left: 4px;
background: #09c;
padding: 5px 0 10px 0;
border-radius: 0 0 15px 15px;
box-shadow: 0 15px 10px -8px rgba(0,0,0,0.4);
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-moz-transform-origin: 0px 0px;
-moz-transform: rotateX(-90deg);
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotateX(-90deg);
-o-transform-origin: 0px 0px;
-o-transform: rotateX(-90deg);
transform-origin: 0px 0px;
transform: rotateX(-90deg);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.Obj138 ul.nav div.left { left: auto; right: 4px; }
.Obj138 ul.nav div ul {
padding: 10px 0;
list-style: none;
width: 140px;
margin: 10px 5px 0 5px;
float: left;
display: inline;
text-align: left;
background: #fff;
border-radius: 6px;
-moz-box-shadow: inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow: inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow: inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.Obj138 ul.nav div ul.colLeft { margin-left: 10px; }
.Obj138 ul.nav div ul.colRight { margin-right: 10px; }
.Obj138 ul.nav div ul.colSingle { margin-left: 10px; margin-right: 10px; }
.Obj138 ul.nav div ul li { float:left; border-bottom: 1px dotted #09c; margin: 0 5px 0 5px; display: inline; }
.Obj138 ul.nav div ul li:last-child { border:0; }
.Obj138 ul.nav div ul li a {
display: block;
width: 105px;
text-decoration: none;
font: 13px/16px arial, sans-serif;
color: #069;
margin: 0;
padding: 4px 0 4px 15px;
}
.Obj138 ul.nav div ul li a:hover { color: #09c; }
.Obj138 ul.nav div.col1 { width: 160px; }
.Obj138 ul.nav div.col2 { width: 310px; }
.Obj138 ul.nav div.col3 { width: 460px; }
.Obj138 ul.nav li:hover div {
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
Feedbacks zu ""

Alfons Baumgarten

18.11.2014, 12:38

+0 -0  

Hallo,mir ist nicht klar, wo ich die einzelnen Dingen einfügen/speichern muss.

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
            » 61 Heute
            » 93 Gestern
            » 154 Woche
            » 1217 Monat
            » 42431 Jahr
            » 266637 Gesamt
            Record: 1144 (01.02.2020)
            Gesamt Downloads:
            Hosting by
            Zurück zum Seiteninhalt