Andree Filchos: Suche spezielles DHTML-Pulldownmenu

Hallo SelfHTML-ler,

ich habe eine Seite, die ein Javascript-Pulldownmenu enthalten soll. (Anmerkung 1: Ich halte nicht viel von Pulldowns per JS, aber ist halt Kundenwunsch).

Die Seite ist xhtml 1.0 transitional und die Menustruktur wird über verschachtelte Aufzählungslisten (unordered lists = <ul />) realisiert. Das css ist lediglich für die Positionierung und das Layout zuständig, jedoch nicht für die Pulldownfunktionalität (obwohl das unter geckobasierten Browsern ginge).

Ich suche jetzt, um eine komplette Neuimplementierung zu vermeiden ein Script, das lediglich das Ein- und Ausblenden der einzelnen <ul>-Container übernimmt und ab IE5 sowie unter Mozilla und Safari läuft. Dieses handelt lediglich die Logik, bei welchen onmouseover / onmouseout-Events Elemente per display ein- und ausgeblendet werden, die Ausblendung auch eventuell zeitverzögert.

Kennt jemand ein Script dieser Art oder kann selbst einen Rumpf zur Verfügung stellen?

Anmerkung 2: Self in SelfHTML heisst "selbst", dessen bin ich mir bewusst. Dennoch halte ich nicht für sinnvoll, das Rad immer wieder neu zu erfinden.

Anmerkung 3: Ja, ich kenne Google, habe aber nicht mehr als eine bunte Sammlung obskurer Skripte gefunden, die mit endlos verschachtelten div-s, span-s und was weiss ich arbeiten. Darauf möchte ich aber - dem semantischen Code zuliebe - verzichten. Andere Scripts erzeugen den Code komplett selbst, so dass für Suchmaschinen die Links nicht sichtbar sind. Auch nicht gerade toll.

-----

Nebenfrage: Falls ich doch selbst programmiere, wie kann ich einem JavScript-Objekt, welches ein <ul>-Element repräsentiert per Prototype neue Methoden beibringen? (wie oben erwähnt ab IE5 sowie unter Mozilla und Safari)

-----

Vielen Dank im Voraus,
Andree Filchos

  1. Hi,

    Ich suche jetzt, um eine komplette Neuimplementierung zu vermeiden ein Script, das lediglich das Ein- und Ausblenden der einzelnen <ul>-Container übernimmt und ab IE5 sowie unter Mozilla und Safari läuft. Dieses handelt lediglich die Logik, bei welchen onmouseover / onmouseout-Events Elemente per display ein- und ausgeblendet werden, die Ausblendung auch eventuell zeitverzögert.

    Du kennst http://de.selfhtml.org/css/layouts/anzeige/nav_javascript.htm?
    Das ist zwar nicht zeitverzögert (ein Timeout für onmouseout wäre leicht einzufügen) und es ist für den IE 5 und 6 konzipiert - läuft aber auch (nach Entfernen der Browserweiche) in anderen Browsern, wobei dann auch die CSS-Anweisungen zum Einblenden entfernt werden sollten (aber wozu sollte man die Zugänglichkeit für moderne Browser verschlechtern?).

    freundliche Grüße
    Ingo

    1. Hi Ingo,

      Du kennst http://de.selfhtml.org/css/layouts/anzeige/nav_javascript.htm?

      nein. Ich habe auch nicht daran gedacht, unter Layouts zu suchen. Das hilft mir definitiv weiter.

      Vielen Dank,
      Gruß Andree

  2. Lieber Andree,

    Ich suche jetzt, um eine komplette Neuimplementierung zu vermeiden ein Script, das lediglich das Ein- und Ausblenden der einzelnen <ul>-Container übernimmt und ab IE5 sowie unter Mozilla und Safari läuft.

    ich löse das tatsächlich über CSS. Damit der IE das auch kann, binde ich für ihn per "IE-CSS-Anweisung BEHAVIOR" eine htc-Datei (JScript) ein, die ihm per Javascript die fehlende Hover-Fähigkeit nachrüstet. Damit kann ich dann auch im IE solche verschachtelten <ul>s hovern.

    Die htc-Datei samt Anleitung findest Du unter http://www.xs4all.nl/~peterned/csshover.html

    Liebe Grüße aus Ellwangen,

    Felix Riesterer.

    1. Hallo Felix,

      dieses Ding ist ja wirklich cool! Jetzt wird mein Dropdown von netten Browsern wie Firefox und Safari mit :hover erzeugt und IE5 - IE6 bekommen halt die Eigenschaft per Behaviour. Lediglich die Tatsache, dass die RegExp in der htc-Datei auf li:hover>ul nicht matcht, hat mich ein Viertelstündchen Suchen gekostet.

      Vielen Dank!

      Gruß
      Andree

      1. Hallo Andree.

        Lediglich die Tatsache, dass die RegExp in der htc-Datei auf li:hover>ul nicht matcht, hat mich ein Viertelstündchen Suchen gekostet.

        Was hast du nun geändert?

        Der IE kann an sich nicht mit dem Kindselektor „>“ umgehen.

        Einen schönen Dienstag noch.

        Gruß, Ashura

        1. Hallo Ashura,

          ich habe zwei Sachen geändert:

          Step 1 - Ich habe im Gegensatz zu meiner ersten auf Javascript basierten Planung die Möglichkeit von Gecko und Safari genutzt, :hover auf Listenelemente anzuwenden. Der IE bleibt natürlich aussen vor.

          Step 2 - Ich habe das von Felix vorgeschriebene JScript(?) eingebunden. Dieses stellt über ein css-Behaviour und meiner Meinung nach recht kurioses Scripting mit die hover-Eigenschaft für IE nach, so dass man bedenkenlos foo:hover schreiben kann. Das Script in der htc-Datei wird's schon richten ...

          Hier hatte ich, da ich die Funktionsweise des Scripts nicht ganz verstanden hatte, zuerst einen Denkfehler. Ich habe den >-Selektor benutzt, den der IE _natürlich_ nicht nativ unterstützt und letztendlich damit in der gepatchten Version ebenso wenig.

          Mit dem Verzicht auf den Selektor läuft das Dropdown jetzt unter IE5, IE5.5, IE6, Firefox 1.0.7 und Safari. Opera ist noch ungetestet.

          Gruß
          Andree

          1. Hallo Andree.

            Mit dem Verzicht auf den Selektor läuft das Dropdown jetzt unter IE5, IE5.5, IE6, Firefox 1.0.7 und Safari.

            Das war die relevante Information, die ich wissen wollte.
            Ich war davon ausgegangen, dass du den JS-Code so modifiziert hattest, dass der IE auch den Kindselektor unterstützt.

            Opera ist noch ungetestet.

            Der kann das natürlich. (ab Version unkown)

            Einen schönen Mittwoch noch.

            Gruß, Ashura

  3. Hi,

    Kennt jemand ein Script dieser Art oder kann selbst einen Rumpf zur Verfügung stellen?

    Coding: Darstellungswechsel - Un-/Sichtbare Elemente: Ein-/Ausklappen, Verstecken, Transparenz, Farbe kann das. Ein zeitverzögertes JS-Menü habe ich damit auch schon realisiert.

    Gruß, Cybaer

    --
    Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
  4. www.dhtml.com
    da findest du eins :)