Wie mache ich dieses Menü?

[leo]

Hallo allerseits,

ich brauche Hilfe bei der Erstellung eines Menüs mit JavaScript.
Das Menü sollte in der Art dieses Beispiels funktionieren:

http://www.buero-bernard.de/index.html

(Das graue Menü unten ist gemeint)

Natürlich nicht exakt so, aber das Prinzip stimmt schon. Nur weiß
ich eben nicht, wie ich da anfangen soll, d.h., was das Script
beinhalten muß, damit solch ein Menü funktioniert. Wichtig ist
mir dabei, daß das "Dropdown"-Prinzip so aussieht wie in diesem Beispiel.

Für Hilfe zum Starten und weiterführende Links wäre ich euch sehr dankbar,

Leo

[Dennis]

Hi leo,

http://www.buero-bernard.de/index.html

Lies </faq/#Q-19> um zu wissen, wie man hier Links macht.

Aber abgesehen davon, von was für einem Menü sprichst du da? Unten sehe ich nur drei Worte: "Büro", "Projekte" und "Kontakt" - wenn ich da mit der Maus drüber fahre, passiert nichts, anklicken kann ich die Dinger auch nicht.

MfG, Dennis.

[leo]

hallo dennis,

sorry, also hier der richtige link ;-)

http://www.buero-bernard.de/index.html

Also bei mir funktioniert das Menü. Die drei Worte schieben
sich bei MouseOver jeweils nach unten und unter dem aktiven
Menüpunkt öffnet sich ein Untermenü (auch mit .gifs als
Buttons)

[leo]

Hmmm...

also jetzt habe ich auch gerade gesehen, daß es anscheinend
mit Opera funktioniert, aber mit Firefox nicht.
Dann muß ich mir ja sowieso was Besseres einfallen lassen, wie es aussieht... .

[Dennis]

Hi leo,

also jetzt habe ich auch gerade gesehen, daß es anscheinend
mit Opera funktioniert, aber mit Firefox nicht.

Diese Feststellung habe ich auch gerade gemacht.

Dann muß ich mir ja sowieso was Besseres einfallen lassen, wie es aussieht... .

Müsste man sich mal mit der Seite genauer auseinandersetzen, warum das im FF nicht geht...

MfG, Dennis.

[Ingo Turski]

Hi,

Dann muß ich mir ja sowieso was Besseres einfallen lassen, wie es aussieht... .

Ja. Dieses Menü ist aus dem vorigen Jahrtausend, auch wenn dort steht: Version 1.1 (24-02-2005).
Es geht noch davon aus, daß es nur "Netscape" mit Unterstützung von document.layers und IE bzw. Browser mit Unterstützung von document.all gibt - und daß sich alle Browser auch entsprechend identifizieren lassen. Es war also schon in der Ursprungsversion untauglich.

Wenn Du ausreichende CSS-Kenntnisse hast, könntest Du das Beispiel http://de.selfhtml.org/css/layouts/anzeige/nav_javascript.htm mit dem Beispiel http://de.selfhtml.org/css/layouts/anzeige/nav_ebenen.htm kombinieren und für Deine Bedürfnisse anpassen.

freundliche Grüße
Ingo

[Leo]

Wenn Du ausreichende CSS-Kenntnisse hast, könntest Du das Beispiel http://de.selfhtml.org/css/layouts/anzeige/nav_javascript.htm mit dem Beispiel http://de.selfhtml.org/css/layouts/anzeige/nav_ebenen.htm kombinieren und für Deine Bedürfnisse anpassen.

freundliche Grüße
Ingo

Hallo Ingo,

vielen Dank für die Links, das werde ich mal versuchen.

Kann ich in diesem Fall auch eigene Buttons in Form von .gifs bzw.
.jpgs einbinden? Mir ist nicht nicht ganz klar, wo und wie ich das machen muß... .

Leo

[Ingo Turski]

Hi,

Kann ich in diesem Fall auch eigene Buttons in Form von .gifs bzw.
.jpgs einbinden? Mir ist nicht nicht ganz klar, wo und wie ich das machen muß... .

Natürlich. Einfach anstelle des Textes das img-Element setzen. Wieso ist Dir das unklar?
Als :hover-Formatierung böte sich dann ein Hintergrundwechsel oder Rahmen an.

freundliche Grüße
Ingo

[Jens Holzkämper]

Tach,

ich brauche Hilfe bei der Erstellung eines Menüs mit JavaScript.
Das Menü sollte in der Art dieses Beispiels funktionieren:
http://www.buero-bernard.de/index.html
(Das graue Menü unten ist gemeint)

das kann jetzt an meinem Broser liegen, aber ich sehe da kein Menü, die drei Wörter unten sind weder anklickbar noch zeigen sie beim hover ein Menü.

Natürlich nicht exakt so, aber das Prinzip stimmt schon. Nur weiß
ich eben nicht, wie ich da anfangen soll, d.h., was das Script
beinhalten muß, damit solch ein Menü funktioniert. Wichtig ist
mir dabei, daß das "Dropdown"-Prinzip so aussieht wie in diesem Beispiel.

Normalerweise hätte ich gesagt, schau dir einfach den Quelltext deines Beispiels an, in diesem Fall ist das jedoch nicht angebracht. Üblicherweise wird ein Drop-Down Menü z.B. aus Listen aufgebaut, die mit den Event-Handlern onmouseover und onmouseout die CSS-Eigenschaft Display manipulieren.

mfg
Woodfighter

[Klawischnigg]

Hi there,

Ich würde sagen, dieses Menü machst Du am besten gar nicht. Weil es nämlich nur im InternetExplorere funktioniert. Ausserdem hat der mirkosaftfreundliche Programmierer auf dieser Seite vergessen, die Hintergrundfarbe zu setzen, soll heissen, die Seite sieht pothässlich aus, wenn man als Hintergrundfarbe nicht weiß eingestellt hat. Von dem Manne würd' ich mir nicht viel abschauen wollen...

[Leo]

Hi there,

Ich würde sagen, dieses Menü machst Du am besten gar nicht. Weil es nämlich nur im InternetExplorere funktioniert.

Ok, stimmt schon.

Trotzdem bin ich immer noch auf der Suche nach einer Möglichkeit,
diese Art von Menü (also Dropdown-Menü mit .gif-Buttons und
horizontaler Ausrichtung des Unternemüs) umzusetzen.

Vielleicht hat ja noch jemand einen Tipp, wie ich das angehen könnte?

Leo

[Klawischnigg]

Hi there,

Trotzdem bin ich immer noch auf der Suche nach einer Möglichkeit,
diese Art von Menü (also Dropdown-Menü mit .gif-Buttons und
horizontaler Ausrichtung des Unternemüs) umzusetzen.

Vielleicht hat ja noch jemand einen Tipp, wie ich das angehen könnte?

Tja, als erstes müßte man die Browserabfrage ändern, da diese davon ausgeht, daß jeder Browser, der sich als Netscape bezeichnet, das layer Modell versteht.

Die Untermenüpunkte könntest Du beispielsweise in eine tabelle schreiben, die zunachst nicht sichtbar ist und erst mit mouseover oder mit onclick sichtbar und anklickbar wird etc...

[XaraX]

Hallo Leo,

folgende Herangehensweise als Aufgabenskizze:

1.) Eine Vernünftige HTML-Struktur konzipieren

2.) Abprüfen, was der Browser kann

3.) Wenn der Browser alles unterstützt CSS-Eigen-
      schaften der Sub-Menüs ändern und den Menüpunkten
      Eigenschaften hinzufügen (onMouseover)

1

  
<ul id="menu">  
  <li><a href="~">Text1</a>  
    <ul>  
      <li><a href="~">Text1</a></li>  
      <li><a href="~">Text2</a></li>  
      <li><a href="~">Text3</a></li>  
      <li><a href="~">Text4</a></li>  
    </ul>  
  </li>  
  <li><!-- usw -->  
  </li>  
</ul>  

2

  
if( document.getElementById &&  
    document.getElementById('menu').style &&  
    document.getElementById('menu').childNodes)  
    {  
  
// ### 3 ###  
  
    // hier werden die Submenüs ausgeblendet  
    // und die Elemente  
    // document.getElementBy('menu').childNodes  
    // mit einem onMouseover bestückt.  
    }  

Gruß aus Berlin!
eddi

[Leo]

Hallo Leo,

folgende Herangehensweise als Aufgabenskizze:
...

Gruß aus Berlin!
eddi

Vielen Dank, Eddi.

Das hilft mir schon sehr weiter, ich versuchs mal.
Ich melde mich dann gleich, wenn ich es ausprobiert habe.

Grüße zurück, auch aus Berlin
Leo

[Ingo Turski]

Hi,

folgende Herangehensweise als Aufgabenskizze:

1.) Eine Vernünftige HTML-Struktur konzipieren

sehr richtig.

2.) Abprüfen, was der Browser kann

wozu? Und sofern Javascript deaktiviert ist, gibt's nichts zu prüfen. Noscript wäre zwar eine Lösung, aber doch nur ein Notbehelf.

3.) Wenn der Browser alles unterstützt CSS-Eigen-
      schaften der Sub-Menüs ändern und den Menüpunkten
      Eigenschaften hinzufügen (onMouseover)

warum Javascript? Moderne Browser können das allein mit CSS, wie das Selfhtml-Beispiel zeigt.
Wer das nicht kann, ist der IE - somit reicht es, diesem Browser ein Script zur Verfügung zu stellen; und Conditional Comments machen das leicht möglich. Natürlich sollte dennoch eine alternative Verlinkung gegeben sein.

freundliche Grüße
Ingo

[XaraX]

Hallo Ingo,

2.) Abprüfen, was der Browser kann
wozu? Und sofern Javascript deaktiviert ist, gibt's nichts zu prüfen. Noscript wäre zwar eine Lösung, aber doch nur ein Notbehelf.

Ist JavaScript deaktiviert, so bleibt die HTML-Struktur des Menüs weiterhin brauchbar. Nur das der Effekt des Ein- und Ausblendens nicht stattfinden kann. Somit wird die Funktionalität in keinsterlei Weise beeinträchtigt, wärend es bei einer <noscript>-Lösung zu unnötigen Dopplungen kommt. Das Element <noscript> ist m. E. beim gestalterischen Gebrauch von JavaScript überflüssig, wenn man von vornherein mit dem DOM und dem durchdacht gewählten HTML-Struktur arbeitet.

3.) Wenn der Browser alles unterstützt CSS-Eigen-
      schaften der Sub-Menüs ändern und den Menüpunkten
      Eigenschaften hinzufügen (onMouseover)

warum Javascript? Moderne Browser können das allein mit CSS, wie das Selfhtml-Beispiel zeigt.

Gerade bin ich beiden Verweisen von Deinem Post gefolgt und habe mich bestätigt gefühlt. Der Mozilla 1.7.7 zeigt keine Dynamik bei der CSS-Lösung. Zu Deiner Frage also: JavaScript deshalb, weil es anscheinend nicht mit allen Browsern funktioniert.

Gruß aus Berlin!
eddi

[Ingo Turski]

Hi,

Ist JavaScript deaktiviert, so bleibt die HTML-Struktur des Menüs weiterhin brauchbar. Nur das der Effekt des Ein- und Ausblendens nicht stattfinden kann. Somit wird die Funktionalität in keinsterlei Weise beeinträchtigt,

aber das Layout u.U. zerschossen.

Gerade bin ich beiden Verweisen von Deinem Post gefolgt und habe mich bestätigt gefühlt. Der Mozilla 1.7.7 zeigt keine Dynamik bei der CSS-Lösung.

Bei der vertikalen Navigation gibt's keine Dynamik. Und daß die geteilte Navigationsleiste in diesem Browser nicht funktioniert, kann ich mir nicht vorstellen, da sie sowohl mit älteren Mozillas als auch dem neusten Firefox geht.

freundliche Grüße
Ingo

[XaraX]

Re:

Gerade bin ich beiden Verweisen von Deinem Post gefolgt und habe mich bestätigt gefühlt. Der Mozilla 1.7.7 zeigt keine Dynamik bei der CSS-Lösung.
Bei der vertikalen Navigation gibt's keine Dynamik. Und daß die geteilte Navigationsleiste in diesem Browser nicht funktioniert, kann ich mir nicht vorstellen, da sie sowohl mit älteren Mozillas als auch dem neusten Firefox geht.

Man sollte ab und zu auch in den Quelltext schaun. Du hast Recht und ich behaupte ab sofort das Gegenteil ;)

Gruß aus Berlin!
eddi

[Lars]

Also bei solchen Menüs bekomm ich regelmäßig das kotzen... mach lieber ein schön mit CSS gestaltetes Menü, das kann dann auch jeder aufrufen.

Grüße
Lars