Dropline Click Menü - Website X5 Hilfe - Die Helpsite

Direkt zum Seiteninhalt

Hauptmenü:

Dropline Click Menü

Scripte > Menü Navigation


Ein sehr aufwendiges Dropline Menü auf CSS. (UTF-8)

CSS

Das ist ein sehr interessantes und aufwendiges horizontales Menü, das ohne Imagedateien auskommt.
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 "dl_click-menu", das so übernommen werden kann. Zusätzlich befindet sich eine Datei (trigger.htc) im Verzeichnis, damit die Auslösung der Untermenüs auch im Internet Explorer erfolgen.
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="dl_click-menu/menu_style.css" />



Variante 1


Code für das HTML-Objekt:

<div>
<ul id="dropline">
<li><a href="#">Hauptmenü 1</a></li>
<li><a class="down" href="#" tabindex="1">Hauptmenü 2</a>
<ul>
<li><a href="#">Untermenü 2.1</a></li>
<li><a class="down" href="#" tabindex="1">Untermenü 2.2</a>
<ul>
 <li><a href="#">Untermenü 2.2.1</a></li><li><a href="#">Untermenü 2.2.2</a></li><li><a href="#">Untermenü 2.2.3</a></li><li><a class="down" href="#" tabindex="1">Untermenü 2.2.4</a>
 <ul>
   <li><a class="down" href="#" tabindex="1">Untermenü 2.2.4.1</a>
   <ul>
    <li><a href="#">Untermenü 2.2.4.1.1</a></li>
    <li><a href="#">Untermenü 2.2.4.1.2</a></li>
    <li><a href="#">Untermenü 2.2.4.1.3</a></li>
    <li><a class="down" href="#" tabindex="1">Untermenü 2.2.4.1.4</a>
    <ul>
     <li><a href="#">Untermenü 2.2.4.1.4.1</a></li>
     <li><a href="#">Untermenü 2.2.4.1.4.2</a></li>
     <li><a href="#">Untermenü 2.2.4.1.4.3</a></li>
     </ul>
</li>
    <li><a href="#">Untermenü 2.2.4.1.5</a></li>
    </ul>
</li>
   <li><a href="#" tabindex="1">Untermenü 2.2.4.2</a></li>
   <li><a href="#" tabindex="1">Untermenü 2.2.4.3</a></li>
   <li><a href="#" tabindex="1">Untermenü 2.2.4.4</a></li>
   </ul>
</li>
 <li><a href="#">Untermenü 2.2.5</a></li>
 <li><a href="#">Untermenü 2.2.6</a></li>
 </ul>
  </li>
<li><a href="#">Untermenü 2.3</a></li>
<li><a class="down" href="#" tabindex="1">Untermenü 2.4</a>
<ul>
 <li><a href="#">Untermenü 2.4.1</a></li>
 <li><a href="#">Untermenü 2.4.2</a></li>
 <li><a class="down" href="#" tabindex="1">Untermenü 2.4.3</a>
 <ul>
  <li><a href="#">Untermenü 2.4.3.1</a></li>
  <li><a href="#">Untermenü 2.4.3.2</a></li>
  <li><a href="#">Untermenü 2.4.3.3</a></li>
  <li><a href="#">Untermenü 2.4.3.4</a></li>
  </ul>
</li>
 <li><a href="#">Untermenü 2.4.4</a></li>
 </ul>
</li>
<li><a href="#">Untermenü 2.5</a></li>
<li><a href="#">Untermenü 2.6</a></li>
</ul>
</li>
<li><a class="down" href="#" tabindex="1">Hauptmenü 3</a>
<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>
</ul>
</li>
<li><a class="down" href="#" tabindex="1">Hauptmenü 4</a>
<ul>
<li><a class="down" href="#" tabindex="1">Untermenü 4.1</a>
<ul>
 <li><a href="#">Untermenü 4.1.1</a></li>
 <li><a href="#">Untermenü 4.1.2</a></li>
 <li><a href="#">Untermenü 4.1.3</a></li>
 <li><a href="#">Untermenü 4.1.4</a></li>
 <li><a href="#">Untermenü 4.1.5</a></li>
 <li><a href="#">Untermenü 4.1.6</a></li>
 </ul>
</li>
<li><a class="down" href="#" tabindex="1">Untermenü 4.2</a>
<ul>
 <li><a href="#">Untermenü 4.2.1</a></li>
 <li><a href="#">Untermenü 4.2.2</a></li>
 <li><a href="#">Untermenü 4.2.3</a></li>
 <li><a class="down" href="#" tabindex="1">Untermenü 4.2.4</a>
 <ul>
  <li><a href="#">Untermenü 4.2.4.1</a></li>
  <li><a href="#">Untermenü 4.2.4.2</a></li>
  <li><a href="#">Untermenü 4.2.4.3</a></li>
  </ul>
</li>
 <li><a href="#">Untermenü 4.2.5</a></li>
 <li><a href="#" tabindex="1">Untermenü 4.2.6</a>
 <ul>
  <li><a href="#">Untermenü 4.2.6.1</a></li>
  <li><a href="#">Untermenü 4.2.6.2</a></li>
  </ul>
</li>
   </ul>
  </li>
<li><a href="#">Untermenü 4.3</a></li>
<li><a href="#">Untermenü 4.4</a></li>
<li><a href="#">Untermenü 4.5</a></li>
</ul>
</li>
<li><a class="down" href="#" tabindex="1">Hauptmenü 5</a>
<ul>
<li><a href="index.html">Untermenü 5.1</a></li>
<li><a href="index.html">Untermenü 5.2</a></li>
<li><a href="index.html">Untermenü 5.3</a></li>
</ul>
</li>
<li><a href="
#x">Hauptmenü 6</a></li>
</ul>

</div>


Variante 2

Code für das HTML-Objekt:


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


Code der CSS-Datei (menu_style.css):


/* Dieses ist eine feste CSS-Antwort des Hover-Tilde-Problems in Safari und Chrom */
html {-webkit-animation: safariSelectorFix infinite 1s;}
@-webkit-keyframes safariSelectorFix {
0% {zoom:1;}
100% {zoom:1;}
}
/* Auslöser für IE */
#dropline li a, body {behavior:url(trigger.htc)}

#dropline {position:relative; font-size:12px; height:38px; z-index:100; border-bottom:1px solid #000;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

#dropline, #dropline ul {padding:0; margin:0; list-style:none; width:750px; text-align:center; border-top:1px solid #000;
-o-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8);
-ms-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8);
}

#dropline ul {position:absolute; top:0; left:-9999px; height:0;
-o-border-radius: 0 0 10px 10px;
-ms-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;

-webkit-transition: height 0.6s;
-moz-transition: height 0.6s;
-o-transition: height 0.6s;
transition: height 0.6s;
}
#dropline ul {background:#383838; border-bottom:10px solid #383838;}
#dropline ul ul {background:#404040; border-bottom:10px solid #404040;}
#dropline ul ul ul {background:#484848; border-bottom:10px solid #484848;}
#dropline ul ul ul ul {background:#505050; border-bottom:10px solid #505050;}
#dropline ul ul ul ul ul {background:#585858; border-bottom:10px solid #585858;}

#dropline li {display:inline; height:38px;}
#dropline li a {display:inline-block; height:38px; line-height:38px; padding:0 20px 0 10px; font-family:arial, sans-serif; font-size:11px; color:#aaa; text-shadow: 1px -1px 1px #000; text-decoration:none; font-weight:bold; outline:0; text-transform:uppercase;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
#dropline ul li a {font-size:0;}

#dropline li a.down {color:#c63;}
#dropline li ul li a.down {font-size:11px; color:#c63;}

#dropline li:hover > a {color:#fff;}

#dropline li > a:active {color:#fc6;}
#dropline li > a.down:active {color:#fc6;}

#dropline li > a:focus {color:#fc6;}
#dropline li > a.down:focus {color:#fc6;}

#dropline li:hover > a.down {color:#fc6;}

#dropline li a:active + ul {top:37px; left:0; height:38px;}
#dropline li a:active + ul > li > a {font-size:11px;}

#dropline li a:focus + ul {top:37px; left:0; height:38px;}
#dropline li a:focus + ul > li > a {font-size:11px;}

#dropline li > ul:hover {top:37px; left:0; height:38px;}
#dropline li > ul:hover > li > a {font-size:11px;}


Feedbacks zu ""

es gibt insgesamt 1 Kommentar(e)


  1. maede schreibt am 21.05.2012, 15.25 Uhr

    erst mal Danke für die gute Zusammenstellung. Ich habe heute viel gelernt. Ich habe nun folgendes Problem. Sobald ich unter href="#" an Stelle von # ?site=bla eingebe, sehe ich beim Klick nur kurz das Untermenü, danach ist wieder nur das Hauptmenü zu sehen. Was mache ich falsch? Danke für die Hilfe. Gruss Maede


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

© 2009 - 2018




  Besucher Statistik
 » 7 Online
 » 90 Heute
 » 2061 Woche
 » 4778 Monat
 » 59321 Jahr
 » 305899 Gesamt
Rekord: 1420 (10.04.2014)
Zurück zum Seiteninhalt | Zurück zum Hauptmenü