DropDown Animated Menü - Website X5 Hilfe - Die Helpsite

Direkt zum Seiteninhalt

Hauptmenü:

DropDown Animated Menü

Scripte > Menü Navigation


Ein schönes animiertes Drop'n'Down Menü auf CSS. (UTF-8)

CSS

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.

Browser


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


Feedbacks zu ""

es gibt insgesamt 0 Kommentar(e)



Name*
Vorname
Kommentar*
Email *
Homepage
Telefon
Sicherheitscode *
 
Logo HTML5
Button Spenden

© 2009 - 2018




  Besucher Statistik
 » 4 Online
 » 109 Heute
 » 1228 Woche
 » 4561 Monat
 » 36632 Jahr
 » 283210 Gesamt
Rekord: 1420 (10.04.2014)
Zurück zum Seiteninhalt | Zurück zum Hauptmenü