Dropdownmenü

Demo

Autor: Ich

www.friedels-home.de

IE 4 IE 5 IE 6
Opa 5 Opa 6 Opa 7 Opa 8
NN 3 NN 4 NN 6 NN 7
Moz 1 FF 0 FF 1

So ein Dropdownmenü ist ein geeignetes Navigationsmenü für Sites, die aus mehr als ein paar Seiten bestehen und die andererseits nicht aus hundert(en) oder noch mehr Seiten bestehen. Wenn die Site nur aus wenigen Seiten besteht, ist so ein Dropdownmenü überflüssig. Wenn die Site aus sehr vielen Seiten besteht, reicht ein Dropdownmenü nicht aus, um wirklich Übersicht zu schaffen.

Damit du das Menü möglichst weit an deine Bedürfnisse anpassen kannst, werden wir es in dieser Anleitung gemeinsam entwickeln. Dadurch weißt du bei jedem Teil des Quellcodes wozu er da ist und was er bewirkt. Dann kannst du auch leicht erkennen welche Änderungen möglich sind und was du verändern musst.

Normalerweise ist es nicht sinnvoll, so ein Menü in einem Frameset ein zu setzen. Die aufklappenden Untermenüs können nicht in den Nachbarframe hineinragen. In einem Frameset müsste der Navigationsframe also so groß sein, dass für die aufklappenden Menüs genug Platz ist. Bei zugeklappten Untermenüs wäre der Platz frei. Ich gehe also davon aus, dass das Menü auf allen Seiten in gleicher (oder ähnlicher) Form eingesetzt wird.

Die Seite

Am Anfang der Entwicklung hast du also logischerweise eine Htmlseite ohne Navigationsmenü. Am besten nimmst du dazu eine leere Seite, in die du erst später deine Inhalte kopierst. Dadurch besteht nicht die Gefahr, dass du versehentlich etwas an deiner Seite veränderst.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Seitentitel</title>
<style type="text/css">
<!--
-->
</style>
<script type="text/javascript">
<!--
//-->
</script>
</head>
<body>
Hier kommt dein Seiteninhalt hin.
</body>
</html>

Oben siehst du so eine leere Seite. Wenn du dich mit Html gut genug auskennst, dass dir die Funktion dieses Quelltextes klar ist, kannst du die folgenden kleingeschriebenen Absätze überspringen.

Die erste Zeile des Quelltextes enthält das Doctypetag. Hier wird festgelgt, um was für einen Dokumenttyp es sich handelt. Es handelt sich um ein Htmldokument das in Html 4.01 geschrieben ist. Das ist die zur Zeit aktuelle Fassung von Html. Man könnte hier auch festlegen, dass es sich um eine ältere Fassung der Html-"norm" oder um ein Xhtmldokument handelt. Außerdem wird hier mit festgelegt, dass die Variante "Transitional" verwendet wird. In dieser Variante darf man einiges machen, was man in der Variante "Strict" nicht mehr darf. So darf man in der Variante Strict einige ältere Elemente und Attribute nicht mehr verwenden. Für Anfänger empfielt sich die Variante Transitional, das Menü funktioniert aber auch in der Variante Strict. Diese erste Zeile bezieht sich auf das gesamte Dokument.

In der 2. Zeile begintt die eigentliche Htmlseite. Ab hier ist die Dokumentsprache "Html". Der Bereich in dem das gilt endet in der letzten Zeile wieder.

In der 3. Zeile beginnt der Head. Er endet in der 14. Zeile wieder. Jede Htmlseite (außer Framesets) besteht aus (genau) einem Head und (genau) einem Body. Im Head werden Einstellungen für die Seite festgelgt, im Body ist der Seiteninhalt.

In der 4. Zeile, also innerhalb des Head, wird der Zeichensatz für die Seite festgelegt. Dank dieser Festlegung bist du in deinem Text nicht auf die Zeichen des ASCII beschränkt, sondern darfst z.B. auch die im Deutschen gebräuchlichen Sonderzeichen und Umlaute verwenden, ohne sie zu maskieren. Diese Zeile ist nicht unbedingt notwendig, aber recht praktisch.

5. Zeile: Der Seitentitel ist das, was z.B. in der Taskleiste anzeigt wird, wenn die Seite im Browser dargestellt wird. Das ist also nicht der Dateiname. Wenn du keinen Titel festlegen willst, darfst du <title> und </title> trotzdem nicht weglassen.

In der 6. Zeile beginnt ein Bereich in dem Formatierungen für Bereiche oder Elemente deiner Seite festgelegt werden. In der 9. Zeile endet dieser Bereich wieder. Der Bereich ist bisher leer.

Nicht alle Browser können mit CSS umgehen. Sehr alte Browser kennen das Tag aus Zeile 6 nicht und interpretieren es deshalb auch nicht. Diese Browser würden die Formatierungen, die hier noch eingetragen werden, als Text interpretieren, was natürlich zu Fehlern führen würde. Für diese Browser kennzeichnet man die Formatierungen als Kommentar, der nicht Interpretiert werden soll. CSS-fähige Browser ignorieren dieses Kommentarzeichen, weil für diese Browser ja in der vorherigen Zeile festgelegt wurde, dass jetzt CSS-Syntax gilt. Und das ist ein Kommentarzeichen nach Html-Syntax. In Zeile 7 wird also nach Html-Syntax ein Kommentar angefangen. In Zeile 8 endet der Kommentar wieder.

In Zeile 10 beginnt ein Scriptbereich. Er ist für JavaScript vorgesehen. Hierhin kommen also die Anweisungen, die z.B. das dynamische Auf- und Zuklappen der Untermenüs bewirken. In Zeile 13 endet dieser Bereich wieder.

In Zeile 11 beginnt für die Browser, die kein JavaScript beherrschen, ein Kommentar. Das entspricht dem Kommentar für Browser, die kein CSS beherschen aus Zeile 7 bis 8. Nur geht es diesmal um Browser, die kein JavaScript beherrschen. In Zeile 12 endet der Kommentar.


Bild 1

In Zeile 15 beginnt der Body. In den Body kommen die eigentlichen Inhalte.Der Body endet in der vorletzten Zeile.

Du solltest diesen Quellcode in einem Texteditor mitentwickeln. Nach jedem Schritt solltest du die Seite abspeichern. Der Dateiname sollte keine Sonderzeichen und keine Umlaute enthalten. Er sollte nur aus Kleinbuchstaben, Ziffern und Binde- und Unterstrichen bestehen und mit einem Buchstaben anfangen. Er muss mit ".htm" oder ".html" enden. Die abgespeicherte Datei solltest du dann im Browser öffnen um das Ergebnis zu begutachten. Vergesse nicht, das Browserfenster immer wieder zu aktualisieren. Jetzt sieht deine Seite im Browser aus wie Bild 1.

Das Hauptmenü

Zuerst bauen wir das Hauptmenü. Im Beispiel soll es am oberen Seitenrand sein und aus 4 Buttons bestehen, die nebeneinander angeordnet sind. Natürlich kannst du auch mehr oder weniger Buttons machen und sie anordnen wo du willst. Und die Links müssen nicht unbedingt wie Buttons aussehen. Das bleibt dir überlassen. Fangen wir mit dem ersten Button an.

Der erste Button des Hauptmenüs.

<div>
  <p>Diverses</p></div>

Der Button (egal ob er wie ein Button aussieht) ist ein Bereich, der besondere Eigenschaften und Funktionen hat, die wir später festlegen. Dieser Bereich ist das erste, was auf der Seite dargestellt werden soll. Er kommt also als erstes in den Body. So ein Bereich wird in Html mit <div> begonnen und mit </div> wieder beendet. In diesen Bereich kommt ein Textabsatz, der den Text enthält, der auf dem Button stehen soll. Ein Textabsatz wird in Html mit <p> begonnen und mit </p> beendet. Du fügst also den Quellcode, den du hier oben siehst in deine Seite direkt unterhalb von <body> ein.

Dieser Bereich soll jetzt unseren Anforderungen entsprechend formatiert werden. Die meisten Formatierungen gelten auch für die anderen Buttons, die später erstellt werden. Deshalb definieren wir, dass dieser Button zu einer sogenannten Klasse gehört. Die Klasse bekommt den Namen "meto". Das me steht für Menü und das to steht für top. Das ist also die Klasse, die die obersten Menübereiche formatiert. Du kannst die Klasse auch anders nennen, wenn du willst. Wichtig ist, dass keine andere Klasse so heißen darf. Die Namen dürfen also nicht doppelt vergeben werden. Ich nenne die Klasse jedenfalls meto. Dazu erweitern wir das <div> zu <div class="meto">.

Natürlich reicht es nicht, dass man festlegt, dass der Bereich zu dieser Klasse gehört. Die Klasse muss erst mal definiert werden. Diese Definition gilt in der ganze Seite. Alle Objekte die zur Klasse "meto" gehören, sollen ja diese Formatierungen bekommen. Die Definition der Klasse gehört deshalb in den Head. Dort haben wir in Zeile 6 bis 9 schon einen Bereich für Formatierungen. Da kommt jetzt eine Zeile mit .meto {} rein. Der Punkt am Anfang zeigt dem Browser, dass ein Klassenname folgt. Es geht also um die Klasse "meto". Auf diese Klasse werden alle Formatierungen angewendet, die in der geschweiften Klammer folgen. Bisher also noch keine, aber das ändern wir gleich.


Bild 2

Als erstes legen wir mal fest, dass unser Button die Hintergrundfarbe #ccc haben soll. Natürlich kannst du auch eine andere Farbe festlegen. Du kannst auch 6-stellige Hexadezimalzahlen, rgb-Werte oder die festgelegten Farbnamen für die Farbangabe verwenden. Wenn du dich mit mit den Farbcodes nicht auskennst, kannst du dir meine Erklärung zum hexadezimalen Farbcodecode durchlesen. Wir schreiben in die geschweifte Klammer hinter .meto also background-color:#ccc; . Nach dem Doppelpunkt kannst du ein Leerzeichen einfügen, musst du aber nicht. Jetzt sieht deine Seite etwa wie Bild 2 aus.

Als nächstes fügen wir padding:0; ein. Im Head im Definitionsbereich für CSS steht jetzt also meto {background-color:#ccc; padding:0; } . Der Sinn dieser Angabe ist etwas schwerer zu erklären. Mit Padding stellt man eigentlich den Innenabstand ein. Damit gibt man also (eogentlich) an, wie weit der enthaltene Text von den Rändern des Div entfernt sein soll. In der Praxis muss man diesen Wert aber immer auf 0 festlegen. Das liegt an einem Programmierfehler im Internet Explorer 6, dem sogenannten Boxmodelbug. Durch diesen Fehler werden alle Boxelemente bei denen das Padding einen anderen Wert als 0 hat, im Internet Explorer nicht korrekt angezeigt. Wenn deine Seite auch im Internet Explorer 6 richtigt angezeigt werden soll, darfst du das also nicht ändern.

Als nächstes legen wir die Höhe des Div fest. Das machen wir mit height:45px; . Natürlich sollen alle Buttons gleich hoch werden, also kommt auch diese Angabe zu den anderen Angaben der Klasse ".meto". Dadurch werden alle Buttons 45 Pixel hoch. Natürlich kannst du deine Buttons auch mehr oder weniger hoch machen. Und atürlich musst du die Größe so groß festlegen, dass der enthaltene Text und/oder das enthaltene Bild auch drauf passt.

Weiter geht es mit der Breite des Buttons. Das machen wir mit width:150px; .

Dann kommt der Rahmen des Buttons. Wenn du willst kannst du deine Buttons natürlich ohne Rahmen machen. Oder du kannst sie mit breiten, bunten Rahmen versehen. Ich mache schmale, unauffällige Rahmen, die dem Button ein dreidimensionales Aussehen geben. Das dreidimensionale Aussehen eines leicht vorstehenden Druckknopfes erreicht man, indem man dem Button oben und links einen schmalen Rahmen gibt, dessen Farbe etwas heller als der Button selbst ist. Unten und rechts macht man den Rahmen etwas dunkler als den Button. Einen eingedrückten Button erzeugt man, indem man oben und links den Rahmen dunkel macht, und unten und rechts hell. Für den oberen Rahmen schreibe ich also border-top:1px solid #ddd;. border-top: ist eine Angabe, die mehrere Angaben zusammenfassen kann. Man kann in ihr die Angabe für border-top-width (Rahmendicke), border-top-color (Rahmenfarbe) und border-top-style (Rahmentyp) zusammenfassen.Die Reihenfolge spielt keine Rolle. Die einzelnen Angaben werden durch Leerzeichen von einander getrennt. Du kannst statt border-top:1px solid #ddd; also auch border-top-width:1px; border-top-type: solid; border-top-color: #ddd; schreiben. Bei border-top-width: musst du die Rahmendicke angeben. Dazu kannst du eine Angabe in Pixel machen, wie ich es im Beispiel mache. Es sind auch noch andere Einheiten als px möglich (pt, pc, in, mm, cm, em ex und %), die hier aber normalerweise nicht sinnvoll sind. Du kannst auch die Angaben thin für dünn, medium für mittelstark oder thick für dick verwenden. Am besten probierst du aus, was dir am besten gefällt. border-top-type: legt den Rahmentyp fest. Es sind none für kein Rahmen, hidden für unsichtbaren Rahmen, dotted für gepunkteten Rahmen, dashed für gestrichelt, solid für durchgezogen, double für doppelt durchgezogen möglich oder groove, ridge, inset, outset für verschiedene 3D-Effekte. Die Angabe hidden ist nicht für das gedacht, was wir hier machen. Probier die anderen Möglichkeiten am besten aus. Für einen dreidimensionalen Druckknopf braucht man durchgezogene Rahmenlinien. border-top-color: legt die Farbe des Rahmens fest. Hier hast du die gleichen Möglichkeiten, wie du bei der Hintergrundfarbe des Div hattest. Nach dem oberen Rahmen legen wir auf gleiche Weise mit border-left: den linken, mit border-right: den rechten und mit border-bottom: den unteren Rahmen fest. In meinem Beispiel schreibe ich also border-left:1px solid #ddd; border-right:1px solid #aaa; border-bottom:1px solid #aaa;. Wenn du oben, unten, links und rechts gleiche Rahmen verwenden willst, kannst alle Rahmenangaben mit border: zusammenfassen.


Bild 3

Die Seite sieht jetzt wie Bild 3 aus. Der Button ist schon fast wie er sein soll, aber der enthaltene Text sieht da oben links nicht gut aus.

Der Text im Button

Natürlich sollen die Textabsätze in allen Buttons gleich formatiert werden. Also definieren wir eine neue Klasse für sie. Ich nenne sie metop. Leicht zu merken, weil es der Absatz (<p>) im Div der Klasse meto ist. Wir schreiben also unter den Definitionen für "․meto" eine neue Zeile mit dem Inhalt .metop {} und ergänzen das Absatztag im Button zu <p class="metop">.

Als erstes legen wir für den Textabsatz eine Hintergrundfarbe fest. Und zwar die selbe Farbe, wie auch der Button hat. Dazu fügen wir, wie bei der Kasse ․meto, background-color:#ccc; in die geschweifte Klammer bei .metop ein. Dadurch verändert sich das Aussehen der Buttons nicht, denn der Hintergrund des Buttons hat ja die gleiche Farbe. Aber der Hintergrund des Absatzes soll sich später änden, wenn man mit der Maus über diesem Button ist. Und das geht einfacher, wenn die Fearbe vorher explizit festgelegt war.

Mit color:#000; legen wir fest, dass die Schrift schwarz sein soll. Natürlich kannst du auch eine andere Farbe bestimmen. Jedenfalls musst du auch hier eine Farbe festlegen, auch wenn der Text ohne Festlegung schon diese Farbe hat. Die Textfarbe soll sich ja auch ändern, wenn man mit der Maus über dem Button ist.

line-height:43px; sorgt dafür, dass die Textzeile 43 Pixel hoch ist. In meinem Beispiel ist der Button 45 Pixel hoch. Ich habe oben und unten je 1 Pixel Rahmen. Also bleiben 43 Pixel für den Text. Wenn ich die Zeilenhöhe genau so hoch mache, ist es möglich den Text vertikal in die Mitte zu machen. Wenn du für die Hohe des Div oder für die Dicke des Rahmens andere Werte genommen hast, musst du diesen Wert natütlich anpassen.


Bild 4

vertical-align:middle; bewirkt, dass der Text innerhalb der Textzeile vertikal in der Mitte steht.

Mit text-align:center; sorgst du dafür, dass der Text horizontal vermittelt wird.

Einige Browser lassen um einen Textabsatz normalerweise einen Rand frei. Dafür ist hier natürlich kein Platz. Mit margin:0; sorgst du dafür, dass kein Rand um den Absatz ist.

Ergebniskontrolle

Jetzt vergleichen wir mal, was wir bisher gebaut haben. Falls du irgend wo einen Fehler gemacht hast, oder etwas nicht vestanden hast, kannst du deine Seite dadurch wieder korrigieren.

Die Seite sieht jetzt aus wie Bild 4 und hier folgt der Quellcode dazu:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Seitentitel</title>
<style type="text/css">
<!--
.meto {background-color:#ccc; padding:0; width:150px; height:45px;
          border-top:1px solid #ddd; border-left:1px solid #ddd;
          border-right:1px solid #aaa; border-bottom:1px solid #aaa;}
.metop {background-color:#ccc; color:#000; line-height:43px; vertical-align:middle; text-align:center; margin:0;}
-->
</style>
<script type="text/javascript">
<!--
//-->
</script>
</head>
<body>
<div class="meto" >
  <p class="metop" >Diverses</p></div>
Hier kommt dein Seiteninhalt hin.
</body>
</html>

Die weiteren Buttons

Jetzt kannst du erst mal die weiteren Buttons einfügen. Sie werden genau wie der erste Button erzeugt. Das sind also Divs mit Textabsätzen, die jeweils zu den selben Klassen gehören wie die entsprechenden Elemente im ersten Button. Du fügst also folgenden Quellcode vor der Stelle ein, an der in meinem Beispiel-Quellcode Hier kommt dein Seiteninhalt hin. steht:

<div class="meto" >
  <p class="metop" >Verschiedenes</p></div>
<div class="meto" >
  <p class="metop" >Allgemeines</p></div>
<div class="meto" >
  <p class="metop" >Sonstiges</p></div>


Bild 5

Das Ergebnis sollte aussehen wie Bild 5.

Positionierung der Button und des Seiteninhalts.

Die Buttons sind noch nicht da, wo sie sein sollen. Sie sollen nebeneinander am oberen Seitenrand sein. Natürlich kannst du sie auch anders anordnen. Jedenfalls erfährst du jetzt, wie die Buttons positioniert werden können


Bild 6

Zuerst geben wir der Klasse ․meto die Eigenschaft position:absolute;. Jetzt solltest du nachsehen, wie die Seite aussieht. Sie hat sich drastisch verändert und sieht jetzt aus wie Bild 6. Alle Buttons sind jetzt absolut positioniert. Eine absolute Positionierung bewirkt, dass das Element keine Rücksicht auf die Position anderer Elemente nimmt. Umgekehrt nehmen die anderen Elemente keine Rücksicht aus die absolut positionierten. Der erste Button wird also an den Anfang des Fensters gesetzt. Der zweite Button nimmt auf den ersten keine Rücksicht und wird auch wieder an den Anfang des Fensters gesetzt. Genauso geht es mit dem dritten und dem vierten Button. Der Seiteninhalt nimmt auf all die Buttons auch keine Rücksicht und setzt sich da hin, wo er ohne die Buttons auch wäre. Natürlich verdecken sich die Elemente dabei gegenseitig.

Jetzt schieben wir die Buttons ganz nach oben an den Rand des Fensters. Dazu geben wir der Klasse ․meto die Eigenschaft top:0;. Mit dieser Eigenschaft wird der Abstand von oben festgelegt. Der Wert sollte normalerweise in Pixel angegeben werden. Dann ist eine ganze Zahl mit der Einheit px einzutragen. Es sind auch negative Werte erlaubt. Das ist hier aber nicht sinnvoll, denn dann wären die Buttons ja oberhalb des sichtbaren Bereiches des Fensters. Wenn der Wert Null ist, kann die Einheit weg gelassen werden. Wenn du jetzt deine Seite kontrollierst, wirst du feststellen, dass alle Buttons unmittelbar am oberen Fensterrand kleben.

Jetzt müssen die Buttons horizontal positioniert werden. Beim ersten Button machen wir das mit left:0;. Dadurch wird die Entfernung des Buttons von links auf Null festgelegt. Diese Eigenschaft soll aber nur für den ersten Button gelten, nicht für die Klasse ․meto. Dazu müssen wir die Styleeigenschaft dem Button direkt zuweisen. Wir ergänzen den Button, der bisher durch <div class="meto"> <p class="metop">Diverses</p></div> erzeugt wurde, zu <div class="meto" style="left:0;"> <p class="metop">Diverses</p></div>. Auf die gleiche Weise positionieren wir auch die anderen Buttons. Da der erste Button 150 px breit ist, bekommt der zweite Button natürlich die Position left:150px;. Der dritte bekommt dann left:300px; und der vierte left:450px;. Wenn du die Buttons lieber untereinander am linken Seitenrand haben willst, gibst du der Klasse statt top:0; einfach die Eigenschaft left:0;. Den einzelnen Buttons gibst du dann die Eigenschaft top:xxx;, wobei du xxx durch den gewünschten Abstand von oben ersetzt.

Jetzt verdecken die Buttons den Seiteninhalt. Das änden wir indem wir der Seite einfach einen Rand geben, der so groß ist, dass der Seiteninhalt erst unter (bzw. neben, wenn du die Buttons untereinander am linken Rand hast) den Buttons kommt. Dazu geben wir dem Body die Eigenschaft margin-top: 70px;. Wir ergänzen <body> also zu <body style="margin-top:70px;">. Damit legen wir fest, das der Body, der ja den Seiteninhalt enthält, nach oben 70 Pixel Abstand hält. Du kannst natürlich auch einen anderen Wert verwenden. Probier einfach aus mit welchem Wert dir deine Seite am besten gefällt- Mit margin-left: kannst einen Abstand von links festlegen, mit margin-right: einen Abstand von rechts und mit margin-bottom: einen Abstand von unten.


Bild 7

Jetzt sieht die Seite aus wie Bild 7. So soll es auch aussehen, wenn alles fertig ist, aber noch funktioniert nichts. Damit die Untermenüs aufklappen können, müssen wir sie erst mal bauen.

Die Untermenüs

Zuerst kennzeichnen wir den Quellcode für das Hauptmenü mit Kommentaren, damit wir in dem wachsenden Quellcode nicht die Orientierung verlieren. Dazu fügen wir über dem ersten Button, also direkt unter der Zeile <body style="margin-top:70px;">, die Zeile <!-- Hauptmenü --> ein. Und unter den Buttons, also über dem eigentlichen Seiteninhalt, fügen wir <!-- Ende Hauptmenü --> ein. Darunter kommen gleich die Kommentarzeilen für die Untermenüs. Wenn das Hauptmenü 4 Buttons hat, fügen wir also untereinander <!-- Untermenü 1 -->, <!-- Ende Untermenü 1 -->, <!-- Untermenü 2 -->, <!-- Ende Untermenü 2 -->, <!-- Untermenü 3 -->, <!-- Ende Untermenü 3 -->, <!-- Untermenü 4 --> und <!-- Ende Untermenü 4 --> ein. Solche Kommentarzeilen fangen immer mit <!-- an und hören mit --> auf. Was dazwischen steht wird vom Browser nicht verarbeitet.

Das erste Untermenü

Auch die Untermenüs bestehen aus Divs. Wir fügen also für das erste Untermenü <div></div> nach <!-- Untermenü 1 --> ein. Viele Browser stellen leere Htmlelemente nicht oder fehlerhaft dar. Deshalb machst du am besten einfach einen Buchstaben in das Div. Da die Untermenüs viele Eigenschaften gemeinsam haben, definieren wir wieder eine Klasse dafür. Ich habe die Klasse meu1 genannt. Wir erweitern <div></div> also zu <div class="meu1">a</div> und fügen unter .metop {background-color:#ccc; color:#000; line-height:43px; vertical-align:middle; text-align:center;} die Zeile .meu1 {} ein.

Die Untermenüs sollen die selbe Hintergrundfarbe wie das Hauptmenü bekommen. Die Klasse meu1 bekommt also die Eigenschaft background-color:#ccc;.

Auch die Untermenüs müssen, wie alle Divs, die Eigenschaft padding:0; bekommen.

Die Divs für die Untermenüs müssen auch absolut postitoniert werden. Das wird, wie bei den Hauptmenüs, mit position:absolute; gemacht.

Auch die Breite können wir in der Klasse meu1 festlegen wenn die Untermenüs alle gleich breit werden sollen. Ich mache sie alle genau so breit wie die Buttons des Hauptmenüs. Wir fügen also width:150px; ein.

Wie beim Hauptmenü mache ich wieder einen Rahmen, der rings herum 1 Pixel breit ist und aus einer durchgezogenen Linie besteht. Oben und links bekommt er wieder die Farbe #ddd, rechts und unten bekommt er die Farbe #aaa. Wir fügen also border-top:1px solid #ddd; border-left:1px solid #ddd; border-right:1px solid #aaa; border-bottom:1px solid #aaa; ein.

Auch der Abstand von oben ist bei allen Untermenüs gleich. Ich lege ihn mit top:40px; fest. Da das Hauptmenü 45 Pixel hoch ist, überlappen die beiden Divs etwas. Es ist wichtig, dass die Divs für das Untermenü und für das Hauptmenü überlappen, damit man mit der Maus zuerst das Untermenü erreicht und dann erst das das Hauptmenü verlässt. Sonst würde beim Verlassen des Hauptmenübuttons das Untermenü zuklappen. Dabei soll das Untermenü immer vor dem Hauptmenü liegen. Es gibt die Möglichkeit Elemente schichtweise übereinander zu legen. Dabei kann man die Reihenfolge mit dem Z-Index festlegen. Der Z-Index ist immer eine ganze Zahl. Eigentlich ist jede ganze Zahl erlaubt, aber viele Browser interpretieren negative Zahlen falsch. Man sollte also nur positive Zahlen verwenden. Je höher die Zahl ist, desto weiter vorn ist das Element. Wir ergänzen also in der Klasse meto die Eigenschaft z-index:1; für das Hauptmenü, und in der Klasse meu1 ergänzen wir z-index:2; für das Untermeü.

Den Abstand von oben haben wir bereits festgelegt, den Abstand von links noch nicht. Natürlich sollen die Untermenüs unter den jeweiligen Buttons des Hauptmenüs erscheinen. Sie bekommen also unterschiedliche Abstände von Links. Dieser Wert muss also im jeweiligen Div festgelegt werden, und nicht in der Klasse meu1. Im Beispiel habe ich die Untermenüs etwas nach links versetzt, gegenüber dem Hauptmenübutton. Wir erweitern den ersten Untermenübutton also von <div class="meu1">a</div> zu <div class="meu1" style="left:5px;">a</div>.

Natürlich wird der Quellcode immer umfangreicher und auch das Menü wird immer größer. Es würde den Rahmen dieser Seite sprengen, wenn ich hier immer wieder die einzelnen Entwicklungsstufen des Quellcodes einfügen würde. Statt dessen öffnet dieser Link ein neues Fenster mit einer Seite mit dem aktuellen Entwicklungsstand. Falls du nicht weißt, wie du den Quellcode der Beispielseite ansehen kannst, solltest du in der Hilfe deines Browsers nachsehen. Meist erreicht man mit einem Rechtsklick auf die Seite ein Kontextmenü in dem es einen Menüpunkt gibt um den Quellcode sichtbar zu machen.

Der äußere "Behälter" für das erste Untermenü ist jetzt fertig. Da kommen jetzt die einzenlnen Menüpunkte hinein.

Die Untermenüpunkte

Zuerst mal loschen wir das a, das wir als Platzhalter ins Untermenü eingefügt haben.

Auch die Untermenüpunkte bestehen aus Divs. In meinem Beispiel mache ich 3 Menüpunkte ins erste Untermenü. Sie enthalten jeweils einen Textabsatz. Die Textabsätze enthalten die Texte "Option 11", "Option 12" und "Option 13". Ich füge also <div><p>Option 11</p></div> <div><p>Option 12</p></div> <div><p>Option 13</p></div> statt dem a ins erste Untermenü ein.

Diese Divs werden alle gleich formatiert. Also schaffen wir dafür eine neue Klasse. Ich habe sie "du1" genannt. Und auch die Textabsätze bekommen eine Klasse, die ich "meu1p" genannt habe. Wir fügen also in die drei div-Tags jeweils class="du1" ein, und in die p-Tags fügen wir class="meu1p" ein. Außerdem fügen wir im Head in den Stylebereich die beiden Zeilen .meu1p {} und .du1 {} ein.

Natürlich müssen auch diese Divs die Eigenschaft padding:0; bekommen. Wie fügen also padding:0; in die Klammer bei .du1 ein.

Die Divs sollen so breit sein wie das Untermenü. Das Untermenü ist 150 Pixel breit und hat rings herum einen Rand von 1 Pixel Breite. Für die Untermenüpunkte bleibt also eine Breite von 148 Pixeln. Also ergänzen wir width:148px;.

Falls ein User seinen Browser so eingestellt hat, dass die Schrift bei ihm sehr groß dargestellt wird, kann es passieren, dass ein Textabsatz in einem Üntermenü größer wird als das Diy, das den Text enthält eigentlich sein soll. Das Div wird dann normalerweise automatisch ausgedehnt. Es wäre dann breiter als die anderen Divs. Das darf natürlich nicht passieren. Lieber soll der überstehende Text abgeschnitten werden. Das erreichen wir mit overflow:hidden;.

Wenn du möchtest, kannst du den Text mit text-align:center; mittig ausrichten. Diese Eigenschaft muss dann natürlich in die Klammer bei .meu1p. Wenn der Text links ausgerichtet sein soll brauchst du das nicht an zu geben.

Aber später wollen wir einrichten, dass der Text weiß wird, wenn man mit der Maus darüber ist, und der Hintergrund soll dann blau sein. Wie ich schon aml geschrieben habe, ist es einfacher eine Eigenschaft zu ändern, wenn man sie vorher explizit festlegt. Also geben wir der Klasse meu1p die Eigenschaften background-color:#ccc; und color:#000;. Damit legen wir die Hintergrundfarbe auf #ccc (hellgrau) fest und die Schriftfarbe auf #000 (schwarz).

Damit der Textabsatz keinen unnötig großen Abstand zum Rand des Div einhält, legen wir den Abstand mittels margin:0; fest.

Jetzt ist es mal wieder Zeit für eine Kontrolle. Hier siehst du den aktuellen Stand.

Das zweite, dritte und vierte Untermenü

Die anderen 3 Untermenüs werden natürlich wenau so gemacht, wie das erste. Nur bei dem jeweils übergeordnezen Div ist die Position von links jedes mal anders.

Am einfachsten kopierst du den Quellcode, der zwischen <!-- Untermenü 1 --> und <!-- Ende Untermenü 1 --> steht und fügst ihn zwischen <!-- Untermenü 2 --> und <!-- Ende Untermenü 2 -->, <!-- Untermenü 3 --> und <!-- Ende Untermenü 3 --> und zwischen <!-- Untermenü 4 --> und <!-- Ende Untermenü 4 --> ein. Jetzt brauchst du die Untermeüs 2 bis 4 nur noch an zu passen.

Jedes Untermenü beginnt jetzt mit <div class="meu1" style="left:5px;">. Daraus machen wir beim Untermenü 2 <div class="meu1" style="left:155px;">, beim Untermenü 3 <div class="meu1" style="left:305px;"> und beim Untermenü 4 <div class="meu1" style="left:455px;">.

Jetzt muss noch die Anzahl der enthaltenen Untermenüpunkte und deren Text angepasst werden. Dann sieht die Seite aus wie Beispiel 10.

Jetzt sind alle Untermenüs aufgeklappt. Wir klappen sie zunächst mal alle zu, bevor wir uns mit dem Script befassen, das sie bei Bedarf wieder auf klappt. Dazu geben wir der Klasse meu1 die Eigenschaft visibility:hidden;. Dadurch werden Elemente dieser Klasse (und alles was sie enthalten) unsichtbar.

Jetzt sieht die Seite aus wie Beispiel 11. So sah die Seite schon mal aus, aber wie sind trotzdem um einiges weiter.

Das Script

Wir werden mehrmals sie Anzahl der Buttons im Hauptmenü brauchen. Also legen wir sie erst mal in einer Variablen fest. Das machen wir im Scriptbereich im Head. Also zwischen <script type="text/javascript"> <!-- und //--> </script>. Dort fügen wir jetzt die Zeile var anz=4; ein. var sagt dem Browser, dass jetzt eine Variable bekannt gemacht wird. anz ist der Name der Variablen. Die 4 ist die Anzahl der Buttons im Hauptmenü. Wenn dein Hauptmenü mehr oder weniger Buttons hat, musst du die Zahl entsprechend anpassen. Das Semikolon am Zeilenende teilt dem Browser mit, dass diese Scriptanweisung hier zu Ende ist. Fast alle Zeilen in JavaScript enden mit einem ;.

Auf- und Zuklappen der Untermenüs

Zuerst mal müssen wir uns überlegen, was wir eigentlich erreichen wollen. Wenn man mit der Maus über einen Button des Hauptmenüs fährt, soll das dazu gehörende Untermenü sichtbar werden. Falls zu diesem Zeitpunkt ein anderes Untermenü sichtbar ist, soll es unsichtbar werden. Außerdem sollen alle Untermenüs unsichtbar werden, wenn man das Menü mit der Haus verlässt.

Aufklappen

Die Funktion

In JavaScript gibt es Funktionen, die man einfach benutzen kann. Die meisten Funktionen muss man sich aber erst bauen. Wir bauen uns jetzt eine Fuktion, die ein Untermenü aufklappt. Zuerst mal braucht die Funktion einen Namen. Ich habe den Namen men gewählt. Ein Funktionsname hat hinter dem eigentlichen Namen immer eine Klammer (auf und zu). Unsere Funktion heißt also men(). Die Funktion bauen wir indem wir unter der Zeile var anz=4; eine Leerzeile einfügen und dann

function men() {
};

schreiben. Die Leerzeile kann man auch weglassen, aber sie erhöht die Übersichtlichkeit. Vor der öffnenden geschweiften Klammer muss ein Zeilenumbruch oder ein Leerzeichen stehen. Nach der öffnenden geschweiften Klammer muss ein Zeilenumbruch folgen. Vor der schließenden geschweiften Klammer auch. Im Moment ist das noch das selbe, aber wenn die Klammer nicht mehr leer ist ändert sich das. In diese Klammer kommen die Anweisungen aus denen die Funktion besteht. Vor und in der runden Klammer darf kein Leerzeichen sein.

Aufrufen der Funktion

Natürlich muss die Funktion aufgerufen werden, damit die (später) enthaltenen Anweisungen ausgeführt werden. Die Funktion soll ausgeführt werden, wenn der User mit seinem Mauszeiger über den ersten Button des Hauptmenüs fährt. Also fügen wir in den ersten Button onMouseover="men()" ein. Das öffnende Div-Tag für den Button lautet jetzt also <div class="meto" style="left:0px;" onMouseover="men()">. OnMouseover ist ein sogenannter Eventhandler. Es gibt verschiedene Eventhandler. Dieser ruft dem Überfahren des Elements mit der Maus die angegebene Funktion auf.

Welcher Button?

Es wäre zu aufwändig, für jeden Button eine eigene Funktion zu erstellen. Wir machen eine Funktion für alle Buttons des Hauptmenüs. Dann muss die Funktion, da sie ja für mehrere Untermeüs zuständig ist, wissen über welchem Button die Maus gerade ist. Also erweitern wir den eben eingefügten Eventhändler zu onMouseover="men(1)". In der Klammer kann man Werte an die Funktion übergeben. Wir übergeben eine Zahl, die der Nummer des Buttons entspricht. In den 2. Button fügen wir also onMouseover="men(2)" ein. In die anderen Buttons fügen wir den selben Eventhandler mit entsprechend angepassten Buttonnummern ein.

Natürlich muss die Funktion die Buttonnummer auch auswerten. Dazu erweitern wir die Funktion.

function men(a) {
};

Ab jetzt kennt die Funktion den Wert, der im Eventhandler übergeben wurde.

Kontrolle

Jetzt sollten wir einen Kontrollmechnismus einbauen, damit wir merken ob das alles wunschgemäß funktioniert, was wir bauen. Unsere Funktion enthält noch keine Anweisungen. Wir merken daher nicht ob sie ausgeführt wird. Deshalb bauen wir jetzt eine Anweisung ein. Wir fügen in die gescheifte Klammer der Funktion die Zeile alert("Button "+a); ein. Das ist eine Funktion, die man nicht bauen muss. Sie öffnet eine sogenannten Alertbox mit dem Text, der in Anführungszeichen in der Klammer angegeben ist, und einem Button m,it der Aufschrift "OK". Das Script wird erst weiter ausgeführt, wenn man auf "OK" klickt. Hier kannst du ein neues, zusätzliches Fenster öffnen, in dem du die Seite mit dem aktuellen Entwickungsstand sehen kannst.. Wie du sehen kannst, tut sich schon mal was, wenn man mit der Maus über die Buttons fährt.

Die Anweisungen der Funktion.

Zuerst machen wir das Untermenü sichtbar, das zu dem Button gehört, über den die Maus fährt. Dazu muss die Funktion die Eigenschaft visibility:hidden; des Untermenüs verändern. Mit einer Funktion kann man am einfachsten ein Htmlelement ansprechen, wenn dieses Element eine Identität hat. Also geben wir den Untermenüs Identitäten. Das macht man mit dem Htmlattribut id. Wir ändern also das Divtag des ersten Untermenüs zu

<div class="meu1" style="left:5px;" id="u1m1" onMouseover="men(1)">

In die Divtags der anderen Untermenüs fügen wir id="u1m2", id="u1m3" bzw. id="u1m4" ein. Mit u1 kennzeichne ich, dass es um ein Untermenü der ersten Ordnung geht, alsoum ein Untermeü zu einem Button des Hauptmenüs. Falls du später dein Menü weiter ausbauen willst und es Untermenüpunkte geben soll, die weitere Untermenüs haben, dann kannst du diese Unter-Untermenüs mit u2 bezeichen. m1 bis m4 bezeichen die Butons, zu denen das jeweilige Untermenü gehört.

In die Funktion men(a) fügen wir folgende Zeile ein:

document.getElementById("u1m"+a).style.visibility = "visible";

Mit document bezieht man sich auf die aktuelle Seite. Das ist in JavaScript ein Objekt. Es ist genau festgelegt, welche Objekte es gibt und wie sie heißen. Auf dieses Objekt wird die Methode getElementById() angewendet. Damit greift man das Htmlelement heraus,das die Id hat, die in der Klammer angegeben wird. In der Klammer steht "u1m"+a. Was in Anführungszeichen steht wird so als Text verwendet. Mit +a wird der Wert von a angehängt. Dabei geht es um das a, das hinter dem Funktionsnamen in der Klammer steht. Hier werden also die Htmlelemente u1m1, u1m2, u1m3 oder u1m4 angesprochen. Mit getElementById() kann man Htmlattribute des angesprochenen Elements auslesen und/oder verändern. Die jeweilige Eigenschaft wird dahinter angegeben. Die einzelnen Teile dieses Ausdrucks werden dabei immer durch Punkte (ohne Leerzeichen) voneinander getrennt. Die Eigenschaft, um die es hier geht, ist style. Da style viele CSS-Eigenschaften beschreibt, wird danach die CSS-Eigenschaft angegeben, die hier verändert werden soll. Mit dieser zeile geben wir also der CSS-Eigenschaft visibility des jeweiligen Untermenüs den Wert visible.

Die Zeile

alert("Button "+a);

können wir wieder löschen.

Kontrolle

Hier kannst du wieder ein zusätzliches Fenster öffnen, in dem du die Seite mit dem aktuellen Entwickungsstand sehen kannst.. Wenn du mit der Maus über einen Button fährst öffnet sich das zugehörige Untermenü. Allerdings gibt es noch keine Funktion, die die Untermenüs wieder schließt.

Nur ein Untermenü soll offen sein.

Dazu bauen wir eine sogenannte Schleife. Das ist eine oder mehrere Anweisungen, die nacheinander mehrmals ausgeführt werden. Wir fügen folgendes in die Funktion ein:

for(var i=1; i<=anz; i++) {
};

Es handelt sich um eine for-Schleife. Sie besteht aus for() und der geschweiften Klammer, die die Anweisungen enthält. In der runden Klammer stehen die Schleifenbedingungen. Sie bestehen bei der for-Schleife aus 3 Teilen. Im ersten Teil wird ein Schleifenzähler eingerichtet. Im zweiten Teil steht die Bedingung, bei der die Schleife beendet wird. Im dritten Teil steht, was nach der Ausführung der Anweisungen in jedem Durchlauf passieren soll. Die 3 Teile werden durch Semikolons voneinander getrennt. Im ersten Teil definieren wir also die Variable i und weisen ihr den Anfangswert 1 zu. Du kannst auch einen anderen Namen für die Variable verwenden, aber i ist für Schleifenzähler üblich. Im zweiten Teil wird geprüft, ob i kleiner oder gleich anz ist. anz war ja die erste Variable, die wir festgegt hatten. Ihr Wert entspricht der Anzahl der Buttons im Hauptmenü. Die Anweisungen in der geschweiften Klammer werden also ausgeführt, solange i kleiner oder gleich 4 ist. Mit i++ legen wir fest, dass nach der Ausführung i um 1 erhöht wird. Wir könnten statt dessen auch i=i+1 schreiben.

In die geschweifte Klammer fügen wir folgende drei Zeilen ein:

if(i!=a) {
} else {
};

Das ist eine Fallunterscheidung. In der runden Klammer nach if steht die Bedingung, die geprüft wird. Wenn sie erfüllt ist, wird ausgeführt was in der geschweiften Klammer danach steht. Wenn sie nicht erfüllt ist, wird das ausgeführt was in der geschweiften Klammer hinter else steht. != ist ein Vergleichsoperator wie <=. Wie du oben gelesen hast, bedeutet <= kleiner als oder gleich. != bedeutet ungleich. Wenn i nicht gleich a ist, soll also gemacht werden was in der Klammer steht, wenn i gleich a ist, wird gemacht werden was in der Klammer hinter else steht.

In die erste der beiden geschweiften Klammern fügen wir folgende Zeile ein:

document.getElementById("u1m"+i).style.visibility = "hidden";

In die geschweifte klammer hinter else fügen wir diese Zeile ein:

document.getElementById("u1m"+i).style.visibility = "visible";

Die "alte" Zeile mit document.getElementById("u1m"+a).style.visibility = "visible"; wird dafür gelöscht.

Kontrolle

Hier kannst du wieder ein zusätzliches Fenster öffnen, in dem du die Seite mit dem aktuellen Entwickungsstand sehen kannst.. Wenn man Von einem zum andern Button wechselt funktioniert alles wuschgemäß. Aber wenn man das Hauptmenü verlässt wird das letzte sichtbare Untermenü nicht unsichtbar. Das muss noch geändert werden.

Zuklappen

Das Zuklappen des letzten sichtbaren Untermenüs machen wir auch mit einer Funktion, die wir extra dafür bauen. Wir nenen sie out(). Also fügen wir folgendes in den Scriptbereich im Head ein:

function out() {
};

Es spielt keine Rolle, ob du die Funktion vor oder nach der Funktion men() einfügst. Sie muss nur nach der Zeile var anz=4; stehen und sie darf natürlich nicht innerhalb der Funktion men() stehen.

Die Funktion wird durch einen weiteren Eventhandler aufgerufen. Er heißt onMouseout() und er ruft eine Funktion auf, wenn man mit der Maus das Element verlässt, das den Eventhandler enthält. Wir fügen also in die Div-Tags für die Buttons für das Hauptmenü zusätzlich onMouseout="out()" ein. Der Quellcode für den ersten Button des Hauptmenüs lautet jetzt also

<div class="meto" style="left:0px;" onMouseover="men(1)" onMouseout="out()"><p class="metop">Diverses</p></div>

Die Funktion out() soll alle Untermenüs schließen. Dazu bauen wir wieder eine Schleife. Wir fügen in die geschweifte Klammer der Funktion out() also folgendes ein:

for(var i=1; i<=anz; i++) {
};

Das kennst du schon. Es wird wieder eine Variable namens i definiert, die zunächst den Wert 1 hat. Wenn i kleiner oder gleich anz ist, wird gemacht was in der geschweiften Klammer steht. Danach wird i um 1 vergrößert und das ganze geht von vorne los. Wenn die Bedingung i<=anz nicht erfüllt ist, ist die Schleife beendet. Zur Erinnerung: anz ist die Variable, in der festgelegt ist, wie viele Buttons das Hauptmenü hat.

In die geschweifte Klammer der Schleife kommt jetzt document.getElementById("u1m"+i).style.visibility = "hidden";. i ist beim ersten Schleifendurchlauf 1. Da 1 kleiner als anz ist, wird die Style-Eigenschaft visible des Elements mit der Id "u1m1" auf "hidden" gesetzt. Dann wird i auf 2 erhöht. Da auch das kleiner (oder gleich) anz ist, wird die Style-Eigenschaft visible des Elements mit der Id "u1m2" auf "hidden" gesetzt Das geht so, bis i den Wert 5 hat. Das ist nicht kleiner oder gleich anz und die Schleife wird abgebrochen. Auf diese Weise werden beim Aufrufen von out() alle Untermenüs ausgeblendet.

Kontrolle

Hier kannst du dir den aktuellen Stand ansehen.

Jetzt ist das Problem von eben gelöst. Aber dafür gibt es ein neues. Sobald man einen Hauptmenübutton verlässt verschwindet das dazugehörige Untermenü. Auch wenn man mit der Maus in eben dieses Untermenü fährt. Wenn man genau darauf achtet, stellt man fest, dass das Untermenü "flackert", wenn man mit der Maus am unteren Rand des Hauptmenübuttons ist. Das Flackern ist leicht zu erkären. Man ist mit der Maus auf dem Hauptmenübutton. Das Untermenü ist sichtbar. Wenn man mit der Maus an den Rand des Untermenüs kommt, ist man irgendwann auf dem Untermenü und hat damit den Hauptmenübutton verlasssen. Das löst natürlich den Eventhandler OnMouseout aus und das Untermenü wird ausgeblendet. Dadurch ist man natürlich wieder auf dem Menübutton und das Untermenü wird wieder eingeblendet, wodurch man wieder auf dem Untermenü ist…

Wenn du einfach in in jedes Untermenü den gleichen Eventhandler zum Öffnen des Untermenüs einbaust, wie er im entsprechenden Hauptmenübutton ist, wird die Funktion men() gestartet wenn gleichzeitig die Funktion out() gestartet wird. Das Untermenü wird also sofort wieder eingeblendet.Jetzt bleibt das Untermenü laso sichtbar, wenn man von einem Hauptmenübutton in das Untermenü fährt. Wenn man das Untermenü jetzt verlässt (ohne dabei auf den Hauptmenübutton zurück zu gehen), soll das Untermenü ausgeblendet werden. Also muss auch der Evebthandler onMouseout="out()" ins Untermenü.

Kontrolle

Hier kannst du dir den aktuellen Stand ansehen.

Das Ein- und Ausblenden funktioniert jetzt. Jetzt fehlt noch die Hervorhebung der aktuellen Auswahl und die eigentliche Weiterleitungsfunktion.

Hervorhebung der aktuellen Auswahl

Wenn man mit der Maus über einer Option ist, soll bei dieser Option die Schriftfarbe und die Hintergrundfarbe wechseln. Jede der Optionen, egal ob im Hauptmenü oder in einem Untermenü, ist in einem eigenen Absatz. Im Hauptmenü gehören die Absätze zur Klasse "metop", im Untermenü zur Klasse "meu1p". In beiden Klassen ist die Hintergrundfarbe explizit auf #ccc festgelegt. Sie kann also leicht geändert werden.

Zuerst mal braucht jeder der Absätze eine Id. Da wir diese Absätze der Reihe nach durch ein Script ansprechen wollen, müssen wir die Ids nach einem festen Schema erzeugen, sodass sie auch leicht durch ein Script erzeugt werden können. Die Id der Absätze im Hauptmenü habe ich aus "menu" und der Nummer des Menübuttons zusammengesetzt. Dabei habe ich die Buttons einfach von links nach rechts beginnend bei 1 numeriert. Es gibt im Beispiel also die Ids "menu1" bis "menu4" für diese Absätze. Die Ids der Absätze in den Untermenüs habe ich aus "menu", der Nummer des zugehörigen Hauptmenübuttons und einer fortlaufenden Nummer für den Untermenüpunkt zusammengesetzt. Die Untermenüpunkte habe ich dabei von oben nach unten, beginnend bei 1, nummeriert. Der Absatz mit dem Text "Option 11" hat also die Id "menu11". Hätte der erste Menüpunkt 11 Untermenüpunkte, hatte dieser elfte Absatz die Id "menu111". Daraus ergibt sich einen Einschränkung für den Umfang des Menüs. Es darf maximal 10 Hauptmenüpunkte haben! Sonst könnte die Id "menu111" auch zum ersten Untermenüpunkt des elften Hauptmenüpunktes gehören. Die Ids, die mit "menu11" anfangen wären dann nicht mehr eindeutig, und Ids müssen nun mal eindeutig sein.

Kontrolle

Natürlich ändert sich dadurch am Aussehen der Seite nichts. Hier kannst du trotzdem das Aussehen und den Quellcode vergleichen.

Jetzt können wir daran gehen, die Hauptmenübuttons farblich an zu passen. Ein Hauptmenüabsatz soll dann die Farbe wechseln, wenn man mit der Maus über diesem Hauptmenübutton ist und außerdem, wenn die Maus über dem dazugehörenden Untermenü ist. Genau dann wird die Funktion men() aufgerufen. Wir können also das farbige Markieren also mit dieser Funktion erledigen. Genau dann, wenn das Untermeü sichtbar ist, soll auch der Hauptmenüeintrag markiert werden. Wir können also die selbe Bedingung wieder verwenden. Die Zeile document.getElementById("u1m"+i).style.visibility = "visible"; macht das Untermenü sichtbar. Darüber (oder darunter) fügst du folgende Zeile ein: document.getElementById("menu"+i).style.backgroundColor="#007";. Damit wird der Styleeigenschaft "backgroundColor", die die Hintergrundfarbe festlegt, der Wert "#007" zugewiesen. Das ist dunkles Blau.

Kontrolle

Auf den markierten Buttons kann man jetzt nichts mehr lesen. Die Farbe der Schrift muss auch noch geändert werden. Unter der Zeile von eben fügst du document.getElementById("menu"+i).style.color="#fff"; ein. Damit wird der Styleeigenschaft "color", die die Schriftfarbe festlegt, der Wert "#fff" zugewiesen. Das ist Weiß.

Kontrolle

Jetzt muss noch dafür gesorgt werden, dass die Farbmarkierung wieder zurückgesetzt wird, wenn das Untermenü unsichtbar wird. Für das Unsichtbarwerden des Untermenüs ist die Zeile document.getElementById("u1m"+i).style.visibility = "hidden"; in den Funktionen men() und out() zuständig. Wir fügen also über oder unter dieser Zeile in beiden Funktionen die Zeilen document.getElementById("menu"+i).style.backgroundColor="#ccc"; und document.getElementById("menu"+i).style.color="#000"; ein. Die erste der beiden Zeilen setzt die Hintergrundfarbe des Absatzes auf den Wert #ccc.Das ist das selbe helle Grau, das der Absatz ürsprünglich hatte. Die zweite der Zeilen legt die Schriftfarbe auf Schwarz fest. Der Urzustand ist dann also wieder hergestellt.

Kontrolle

Jetzt fehlt noch die Markierung in den Untermenüs. Dazu brauchen wir eine weitere Funktion. Ich nenne sie men1(). Wir fügen in den Scriptbereich im Head also logendes ein:

function men1() {
};

Außerdem muss diese Funktion immer dann aufgerufen werden, wenn ein Untermenüabsatz markiert werden soll. Dazu fügen wir in jeden Untermenüabsatz onMouseover="men1()" ein.

Damit die Funkion men1() immer den richtigen Textabsatz markieren kann, muss beim Aufrufen die Information mitgeliefert werden, welcher Textabsatz gerade makiert werden soll. Diese Information muss also im Funktionsaufruf in der Klammer angegeben werden. Dazu nimmt man die Nummer des Hauptmenübuttons und setzt dahinter die Nummer des Absatzes imUntermenü. Die Nummer des Untermenüabsatzes kann aber ein- oder mehrstellig sein. Um das Script nicht unnötig kopliziert zu machen, begrenzen wir die maximale Größe der Untermenüs auf je 99 Einträge. Und wir sorgen dafür, dass die Nummer des Untermenüabsatzes immer zweistellig ist. Bei einstelligen Nummern setzen wir eine "0" davor.

Kontrolle

Natürlich hat sih die Seite optisch nicht verändert. Die Funktion ist ja noch leer.

Diese mitgelieferte Zahl muss die Funktion men1() natürlich auch auswerten. Dazu fügen wir in der Funktionsdefinition ein "a" in die Klammer ein. In der Variablen a wird also diese Informantion gespeichert. Als nächstes muss errechnet werden, zu welchem Untermenü die Zahl gehört. Die beiden letzten Ziffern müssen wieder angetrennt werden. In JavaScript gibt es ein Objekt namens "Math". Damit kann man ziemlich viele mathematische Berechnungen machen. Unter anderem gibt es eine Methode dieses Objektes namens "floor()". "Math.floor()" rundet eine Zahl immer auf die nächstkleinere Ganzzahl ab. Wenn wir a durch 100 teilen, steht die Nummer des Untermenüabsatzes hinter dem Komma, und die Nummer des Untermenüs vor dem Komma. Mit der Zeile

var b= Math.floor(a/100);

erzeugen wir also eine Variable namens "b", in der die Nummer des Untermenüs gespeichert ist. Diese Zeile fügen wir als erste Zeile in die Funktion men1(a) ein.

Jetzt muss die Nummer des Untermenüabsatzes berechnet werden. Wenn wir b mit 100 multiplizieren und das Ergebnis von a abziehen, erhalten wir diesen Wert. Wir fügen

var c=a - (b*100);

als nächste Zeile in die Funktion ein. Damit definieren wir also eine Variable namens "b", in der die Nummer des Untermenüabsatzes gespeichert ist.

Jetzt müssen wir uns überlegen, was eigentlich genau gefärbt werden soll. Es geht um Textabsätze, deren Id mit "menu" anfängt. Aber die Hauptmenübuttons wurden ja schon gefärbt. Die Absätze, um die es jetzt geht, haben alle eine Id, die mit "menu" anfängt und bei denen danach der Wert von b folgt. Denn die Textabsätze aus den anderen Untermeüs sind ja nicht sichtbar. Es kann maximal 99 textabsätze geben, deren Id mit "menu"+b anfängt. Der Hintergrund des Absatzes mit der Id "menu"+b+c wird blau gefärbt, alle anderen bekommen einen grauen Hintergrund, sofern es sie gibt. Die Bedingungen für weiße bzw. schwarze Schrift, sind die selben, wie für den Hintergrund.

Wir erzeugen also eine Schleife, die von 1 bis 99 zählt und bei jedem Durchlauf prüft, ob die Zählvariable genau so groß wie c ist. Wenn das nicht der Fall ist, muss geprüft werden, ob es ein Element mit der Id "menu"+b+c gibt. Wenn es dieses Element gibt, bekommt es die Hintergrundfarbe #ccc (Grau) und die Schriftfarbe #000 (Schwarz). Ansonsten wird der Hintergrund auf #007 und die Schrift auf #fff festgelegt. Beginnen wir mit der Schleife. Dazu fügst du in die Funktion men1(a) folgendes ein:

for(var i=1; i<=99; i++) {
};

Als Zählvariable verwenden wir also wieder i. i hat zunächst den Wert 1. Falls i kleiner oder gleich 99 ist, wird ausgeführt, was in der geschweiften Klammen steht, dann wird i um 1 erhöht und es geht von vorne los. In dieser geschweiften Klammer muss zuerst mal geprüft werden, ob i so groß ist, wie c. Das passiert mit

if(i!=c) {
} else {
};

Wenn i und c verschieden sind, wird ausgeführt, was in der ersten Klammer steht, ansonsten das, was in der zweiten Klammer steht. In der ersten Klammer wird dann mit

if(document.getElementById("menu"+b+i)) document.getElementById("menu"+b+i).style.backgroundColor="#ccc";
if(document.getElementById("menu"+b+i)) document.getElementById("menu"+b+i).style.color="#000";

zunächst geprüft, ob es das Element mit der Id "menu"+b+i gibt. Wenn ja, wird Hintergrund und Text grau und schwarz gefärbt. Wenn nicht, passiert nichts. In der zeiten Klammer wird analog dazu mit

if(document.getElementById("menu"+b+i)) document.getElementById("menu"+b+i).style.backgroundColor="#007";
if(document.getElementById("menu"+b+i)) document.getElementById("menu"+b+i).style.color="#fff";

in blau und weiß gefärbt.

Kontrolle

Auf den ersten Blick mag es dir erscheinen, als ob jetzt alles fertig ist, aber es gibt noch einen kleinen Schönheitsfehler. Wenn man auf einen Hauptmenübutton geht, wird er eingefärbt. Schön. Wenn man ins Untermenü wechselt, werden auch die Untermeüoptionen eingefärbt. Auch schön. Wenn man dann das Untermenü verlässt wird es unsichtbar Auch gut. Wenn man dann wieder auf den Hauptmenübutton geht, wird das Untermenü wieder sichtbar. Auch gut. Aber die zuletzt markierte Untermenüoption ist immer noch markiert. Das muss noch geändert werden.

Am besten ist es, mit der Funktion out() alle Markierungen auf zu heben, denn diese Funktion wird immer dann aufgerufen, wenn man die Untermenüs oder Hauptmenübuttons verlässt. Bisher setzt diese Funktion ja schon die Farbe der Hasuptmenübuttons zurück.

Bisher zählt i von 1 bis anz. Zur Erinnerung: anz ist die Anzahl der Hauptmenübuttons. Natürlich müssen die Hauptmenübuttons auch weiterhin zurüch gesetzt werden. Es wird also weiterhin bei 1 angefangen zu zählen. Aber jetzt muss bis anz*100+99 gezählt werden, denn das letzte Untermenü kann ja bis zu 99 Einträge haben. Wir ändern die Schleifenbedingung in der Funkion out() also von for(var i=1; i<=anz; i++) zu for(var i=1; i<=anz*100+99; i++). In JavaScript git beim Rechnen auch Punkt vor Strich. Wir brauchen also keine Klammern. Natürlich bekommt i jetzt auch viele Werte, für die es die Id "menu"+i nicht gibt. Wenn man versucht bei einem Element, das es nicht gibt, die Hintergrungfarbe oder sonst was zu verändern, dann kommt natürlich eine Fehlermeldung. Wir müssesn also zuerst prüfen, ob es dieses Element gibt, bevor wir etwas daran verändern. Wir ersetzten die Zeilen

document.getElementById("menu"+i).style.backgroundColor="#ccc";
document.getElementById("menu"+i).style.color="#000";

durch

if(document.getElementById("menu"+i)) {
document.getElementById("menu"+i).style.backgroundColor="#ccc";
document.getElementById("menu"+i).style.color="#000";
};

Natürlich können auch nur Elemente die es gibt unsichtbar gemacht werden. Statt

document.getElementById("u1m"+i).style.visibility = "hidden";

schreiben wir also

if(document.getElementById("u1m"+i)) document.getElementById("u1m"+i).style.visibility = "hidden";

Jetzt sollte alles wunschgemäß funktionieren.

Kontrolle

Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: