DropDown Animated Menü - Website X5 Hilfe - Die Helpsite

Das ist ein animiertes horizontales Menü mit Hintergrund als einfarbige Imagedatei.
Hier sind 2 Varianten zur Einbindung erläutert. Sollte dieses Menü als Gleiches auf mehreren Seiten eingesetzt werden,  empfiehlt sich die Variante 2, um Änderungen nur in einer Datei durchführen zu müssen.
In der Zip-Datei befindet sich ein Verzeichnis "dd_animated-menu", das so übernommen werden kann. Es befindet sich eine kleine einfache einfarbige Image-Datei im IMG-Verzeichnis, die jederzeit ausgetauscht werden kann. Die Anpassung des Menüs erfolgt dann in der Datei "menu_style.css" im Hauptverzeichnis.

Code für den HEAD-Bereich:

<link rel="stylesheet" type="text/css" href="dd_animated-menu/menu_style.css" />

Variante 1

Code für das HTML-Objekt:

<div>
<ul class="nav">
<li><a href="#x">Hauptmenü 1<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul class="sub1">
  <li class="p1"><a href="#">Untermenü 1.1</a></li>
  <li class="p2"><a href="#">Untermenü 1.2</a></li>
  <li class="p3"><a href="#">Untermenü 1.3</a></li>
  <li class="p4"><a href="#">Untermenü 1.4</a></li>
 </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#x">Hauptmenü 2<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul class="sub2">
  <li class="p1"><a href="#">Untermenü 2.1</a></li>
  <li class="p2"><a href="#">Untermenü 2.2</a></li>
  <li class="p3"><a href="#">Untermenü 2.3</a></li>
 </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#x">Hauptmenü 3<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul class="sub3">
  <li class="p1"><a href="#">Untermenü 3.1</a></li>
  <li class="p2"><a href="#">Untermenü 3.2</a></li>
 </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#x">Hauptmenü 4<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul class="sub4">
  <li class="p1"><a href="#">Untermenü 4.1</a></li>
  <li class="p2"><a href="#">Untermenü 4.2</a></li>
  <li class="p3"><a href="#">Untermenü 4.3</a></li>
 </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#x">Hauptmenü 5<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
</li>
</ul>
</div>

Variante 2

Code für das HTML-Objekt:

<? include "dd_animated-menu/index.html"; ?>

Code der CSS-Datei (menu_style.css):

.nav, .nav ul {padding:0; margin:0; list-style:none;}
.nav {position:relative;}

.nav ul {position:absolute; top:37px; left:0; height:0; overflow:hidden;}
.nav li {float:left; position:relative; background:URL(img/style.png);}
.nav li a {display:block; line-height:35px; padding:0 20px; border:1px solid #444; font-family:Arial; border-bottom-color:#000; color: #999; text-bold: 1px -1px 1px #000; text-decoration:none; font-size:12px; font-weight:bold;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
.nav li:hover > a {background:#666; border-color:#888 #777 #444 #555; color:#fff;}
.nav li:hover ul.sub1 {width:180px; height:185px;}
.nav li:hover ul.sub2 {width:150px; height:111px;}
.nav li:hover ul.sub3 {width:130px; height:222px;}
.nav li:hover ul.sub4 {width:150px; height:111px;}
.nav li:hover ul.sub5 {width:160px; height:111px;}
.nav ul li {width:100%; opacity:0;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.nav li ul li.p1 {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
.nav li ul li.p2 {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
.nav li ul li.p3 {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
.nav li ul li.p4 {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
.nav li ul li.p5 {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
.nav li ul li.p6 {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}

.nav li:hover ul li {opacity:1;}

.nav li:hover ul li.p1 {
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.nav li:hover ul li.p2 {
-webkit-transition-delay: 0.6s;
-moz-transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.nav li:hover ul li.p3 {
-webkit-transition-delay: 0.7s;
-moz-transition-delay: 0.7s;
-o-transition-delay: 0.7s;
transition-delay: 0.7s;
}
.nav li:hover ul li.p4 {
-webkit-transition-delay: 0.8s;
-moz-transition-delay: 0.8s;
-o-transition-delay: 0.8s;
transition-delay: 0.8s;
}
.nav li:hover ul li.p5 {
-webkit-transition-delay: 0.9s;
-moz-transition-delay: 0.9s;
-o-transition-delay: 0.9s;
transition-delay: 0.9s;
}
.nav li:hover ul li.p6 {
-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
-o-transition-delay: 1s;
transition-delay: 1s;
}

.nav ul li a {background:#666; border-color:#888 #777 #444 #555; color:#bbb; line-height:1px;
-webkit-transition: 1.5s;
-moz-transition: 1.5s;
-o-transition: 1.5s;
transition: 1.5s;
}
.nav li:hover ul li a {line-height:35px;}
.nav ul li a:hover {background:#09c;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
background-image: -moz-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,25,0));}

/* for IE6 */
.nav table {border-collapse:collapse; margin-bottom:-1px;}
* html .nav a {border-color:#444 #444 #000 #444; height:35px; float:left;}
.nav a:hover {background:#666; border-color:#888 #777 #444 #555; color:#fff;}
.nav a:hover ul.sub1 {width:180px; height:185px;}
.nav a:hover ul.sub2 {width:150px; height:111px;}
.nav a:hover ul.sub3 {width:130px; height:222px;}
.nav a:hover ul.sub4 {width:150px; height:111px;}
.nav a:hover ul.sub5 {width:160px; height:111px;}
.nav a:hover ul li a {line-height:35px; height:35px; float:none;}