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.

x runter geladen

Code für den <HEAD> Bereich

Vor dem </HEAD> Tag

Code für den <BODY> Bereich

<?php include "wsX5Obj/Obj138_0/menu_inc.html"; ?>

alternative Einbindung:

<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>

Nach dem <BODY> Tag

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);
}

» nach oben «