DropDown Automatic Menü - Website X5 Hilfe - Die Helpsite

Direkt zum Seiteninhalt

Hauptmenü:

DropDown Automatic Menü

Scripte > Menü Navigation


Ein ganz einfaches Drop'n'Down Menü auf CSS. (UTF-8)

CSS

Das ist ein einfaches horizontales Menü mit Hintergrundbalken als 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_automatic-menu", das so übernommen werden kann. Zusätzlich befindet sich eine Adobe-Photoshop-Datei (menu_background.psd) dabei, mit der Backgroundleiste. 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_automatic-menu/menu_style.css" />



Variante 1


Code für das HTML-Objekt:

<div>
<ul class="menu">
<li class="top"><a href="#" class="top_link"><span>Hauptmenü 1</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Hauptmenü 2 langer Text</span></a>
 <ul class="sub">
  <li><a href="#">Untermenü 1.1 langer Text</a></li>   
  <li><a href="#">Untermenü 1.2</a></li>
           <li><a href="#">Untermenü 1.3</a></li>
           <li><a href="#">Untermenü 1.4</a></li>
           <li><a href="#">Untermenü 1.5</a></li>
 </ul>
</li>
<li class="top"><a href="#" class="top_link"><span>Hauptmenü 3</span></a>
 <ul class="sub">
  <li><a href="#">Untermenü 3.1 langer Text</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 class="top"><a href="#" class="top_link"><span>Hauptmenü 4</span></a></li>
<li class="top"><a href="
#" class="top_link"><span>Hauptmenü 5</span></a></li>
</ul>
</div>



Variante 2

Code für das HTML-Objekt:


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


Code der CSS-Datei (menu_style.css):


.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(img/menu_background.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(img/menu_arrow-down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(img/menu_button-b.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(img/menu_button-b.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(img/menu_button-a.gif) no-repeat right top;}

.menu li:hover > a.top_link {color:#000; background: url(img/menu_button-b.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(img/menu_button-b.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(img/menu_button-a.gif) no-repeat right top;}

.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}

.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #999999; white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(img/menu_arrow-right.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#999999; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#999999 url(img/menu_arrow-over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#999999 url(img/menu_arrow-over.gif) 80px 7px no-repeat; color:#fff;}

.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 999999; white-space:nowrap; width:93px; z-index:200; height:auto;}


Feedbacks zu ""

es gibt insgesamt 3 Kommentar(e)


  1. Conny schreibt am 10.06.2014, 17.12 Uhr

    Hallo, ich möchte gern die Variante 2 nutzen, aber irgendwie funktioniert das einfach nicht. Besteht die Möglichkeit, es nochmal in zwei drei Sätzen zu erklären, was dann wo hin muss, damit es mit html funzt? Vielen lieben Dank für die Hilfe!

  2. Kaus1942 http://www.watersam.de/ws_316.php schreibt am 24.08.2013, 16.13 Uhr

    Warum kann ich in dem Menü nicht sehen, auf welcher Seite ich bin? Das ist doch ein elementarer Punkt.

  3. Jeff http://www.sg-handwerk.de schreibt am 23.10.2012, 10.47 Uhr

    Super Menü! Könnte man auch noch eine dritte Ebene ins Menü einbinden?
    Admin-Antwort: Ja natürlich, ist nur ein wenig aufwändig, da nicht nur eine HTML-Code-Erweiterung reichen würde. Man müsste eine CSS-Klassifizierung hinzufügen. Für Laien etwas schwierig, aber eine Herausforderung.


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

© 2009 - 2018




  Besucher Statistik
 » 4 Online
 » 18 Heute
 » 997 Woche
 » 3784 Monat
 » 53012 Jahr
 » 299590 Gesamt
Rekord: 1420 (10.04.2014)
Zurück zum Seiteninhalt | Zurück zum Hauptmenü