Dropdown-Menu

  • Hey zusammen,


    Ich wollte ein Dropdown-Menu erstellen, ist ja schon fast fertig. Aber eins kappier ich nicht...


    Wenn ich mein Überpunkt hover, dann kommen die untermenus, aber dann gehen die anderen überpunkte die nicht gehovert sind mit. Warum denn das ?


    Und ich möchte das die Blockelemente von den Untermenus am Obermenu anhängen (das da kein freiraum ist) wie kann ich es machen ? Mit position:absolute?


    Hier meine Dateien:




    Wenn ihr irgendwelche Verbesserungen sieht, oder Fehler. Sagt es mir. Ich möchte ja was lernen.


    Hoffe ihr könnt mir helfen.


    Stef

  • Du darfst die Klassen nicht benutzen, da sonst alle Elemente, die diese Klasse haben, eingeblendet werden.


    Eine Lösung wäre deine Klasse .down mit ids auszutauschen.


    Dann müsstest du allerdings jede id einzeln ansprechen und auf display: block; setzen.

  • Hallo


    Zitat

    Wenn ihr irgendwelche Verbesserungen sieht,...


    Ja klar.


    Verzichte auf Dropdown-Menüs.


    Zunächst sind die extrem benutzerunfreundlich. Darauf können alle Besucher verzichten.


    Zusätzlich sind die auf Touchscreens in der Regel nicht zu benutzen, da die keinen Hover-Effekt kennen. Viele Seiten sind von Touchscreen-Benutzern bei Dropdown-Menüs überhaupt nicht zu erreichen. Und Touchscreen-Geräte sind bei Usern längst in der Mehrheit.


    Grundsatz: Alle versteckten Inhalte sind benutzerunfreunlich und sollten (und können) vermieden werden. Es nervt, wenn die erst sichtbar gemacht werden müssen, viele User erkennen versteckte Inhalte überhaupt nicht und hover-Effekte funktionieren auf Touchscreen-Geräte nicht.


    Gruss


    MrMurphy

  • Hey,


    @JR Cologne : Vielen Dank hat funktioniert :)


    MrMurphy : Ok. Vielen Dank :) Werde mich mal dran halten diese zu vermeiden, aber diese sehen doch viel schöner aus.. U.a. benutzt Herr Pratzner auf seiner Seite doch auch mehrere dropdownmenus mit dem Pfeil. Ich denke es kommt auf die Darstellung an.


    Wie soll man denn die Unterpunkte einer Navigation sonst machen ?
    Es ist doch oft unpassend alle Unterpunkte auf einer Seite zu erstellen. Zu wenig platz, und viele Faktoren mehr..


    Stef

  • Hallo


    Du musst dich halt entscheiden:


    Machst du die Seite für dich oder für deine Besucher?


    Deine Webseite - deine Entscheidung.


    Zitat

    aber diese sehen doch viel schöner aus


    Findest du. Deinen Besuchern ist das egal.


    Zitat

    benutzt Herr Pratzner auf seiner Seite doch auch mehrere dropdownmenus mit dem Pfeil


    Nur weil viele Webseitenersteller Unsinn verzapfen ist der weder sinnvoll noch benutzerfreundlich. Schlechte Beispiele finden sich im Web zu Millionen.


    Zitat

    Ich denke es kommt auf die Darstellung an.


    Genau - du. Deine Besucher freuen sich eher an Übersichtlichkeit und einfacher, klar strukturierter Bedienung.


    Zitat

    Wie soll man denn die Unterpunkte einer Navigation sonst machen ?


    Das hängt von deiner Website ab. Aus wie vielen Unterseiten besteht die? Welche Informationen können zusammengefasst werden? Und noch so eniges mehr.


    Zitat

    Es ist doch oft unpassend alle Unterpunkte auf einer Seite zu erstellen.


    Dann werden sie halt verteilt.


    Zitat

    Zu wenig platz,


    Auf einer Webseite? Webseiten haben keine Größen, die sind theoretisch unendlich groß.


    Gruss


    MrMurphy

  • Ein Kompromiss zwischen Dropdown-Menü und dem kompletten Wegfallen von Unterpunkten, wäre eine Variante, bei der man die Untermenüs per Klick öffnen muss.


    Vorteil: Auf mobilen Endgeräten ist dies auch noch relativ benutzerfreundlich.


    Nachteil: Manche Desktop-Nutzer sind es vielleicht eher gewöhnt zu "hovern".


    Außerdem muss man darauf achten, dass man dem User klarmacht, dass ein Untermenü vorhanden ist.



    Allerdings: Kann ich nicht ganz nachvollziehen, warum Hover-Dropdown-Menus so verwerflich sein sollten. Sicherlich sind diese nicht ideal, aber die meisten User wissen, wie man damit umgeht, weil es in der Vergangenheit halt sehr viel eingesetzt wurde. Außerdem gibt es dann ja immer noch die Möglichkeit, die Untermenüs bei mobilen Geräten zu entfernen. Wichtig ist dann natürlich, dass die Untermenüs nur zur Unterstützung da waren und man sich ohne diese immer noch gut zurechtfindet.


    Ansonsten muss man natürlich auf die oben genannte Variante zurückgreifen.

  • Hallo


    Zitat

    Kann ich nicht ganz nachvollziehen, warum Hover-Dropdown-Menus so verwerflich sein sollten.


    Weil sie Besuchern Informationen vorenthalten. Oder erstellst du gerne zeit- und arbeitsaufwändig Webseiten, die deine Besucher überhaupt nicht finden?


    Deshalb gehört es sich zumindest auf die Nachteile von bestimmen Lösungen, hier Dropdown-Menüs, hinzuweisen.


    Aber ich habe auch eindeutig geschrieben:


    Zitat

    Deine Webseite - deine Entscheidung.


    Mir steht es überhaupt nicht zu Dropdown-Menüs generell zu verbieten.


    Es würde mich aber freuen mal ein benutzerfreundliches Dropdown-Menü in der Praxis anzutreffen. Ich habe nämlich noch keines gefunden und selbst Dropdown-Menü-Befürworter haben die bislang vor mir verheimlicht. Darunter verstehe ich:


    1. Das Menü muss folgendermaßen bedienbar sein:
    a) mit der Mouse
    b) mit der Tastaur
    c) mit Touchscreens


    2. Es muss optisch hinreichend erkennbar sein welcher Link grade aktiv ist.


    3. Das Menü muss responsive und bei Fensterbreiten von 350px bis mindestens 1200px bedienbar sein, besser natürlich auch bei breiteren Fenstern.


    4. Das Menü muss auch ohne JavaScript funktionieren. Zumindest als einfaches Fallback.


    Es würde mich freuen wenn du mir eine Seite mit so einem Dropdown-Menü zeigen würdest.


    Gruss


    MrMurphy

  • Deine Anforderungen an ein Menü halte ich so pauschal in den Raum gestellt für maßlos übertrieben.


    Elemente verbergen ist nicht von Grund auf Benutzerunfreundlich, sondern oft unumgänglich. Ich denke nicht, dass den Benutzern geholfen wäre, wenn Caseking alle 427 Punkte der Steuerung anzeigen würde.


    Hinzu kommt, dass solche Menüs nicht nur im Web gängig, sondern auch in jedem Betriebssystem integriert sind.


    Für mobile Lösungen gibt es Media Queries oder User Agents um dementsprechend Anpassungen vorzunehmen.


    Auf Javascript verzichten ist Mitte 2016 nicht mehr nötig. Wenn man es doch unbedingt versuchen möchte, hat wolf : hinreichend gezeigt wie man Checkboxen manipuliert um dies zu erreichen. Wird vermutlich in weniger Fällen funktionieren als Javascript.


    Für die Tastatur gibt es den Tabindex.


    Wie immer gilt: Es kommt darauf an.


  • Weil sie Besuchern Informationen vorenthalten.


    Nach dem Motto wäre jegliche Website und auch jegliches Programm nicht benutzerfreundlich.


    Man kann die Ausblendung schlicht nicht vermeiden. Außerdem ist sie auch gut, weil man ansonsten total unübersichtliche und vollgepackte Seiten hätte. Das wäre alles andere als benutzerfreundlich!

  • Hi,


    JR Colognes und Basis Meinung bin ich auch.


    bzw.. brauch doch noch hilfe..


    Ich habe es gestern getestet hat ja zeitweise auch funktioniert aber nun ist das Problem wieder da.


    hier mein überarbeitetes script:




    Wenn ich einnen überpunkt hover dann werden die unterpunkte aufgelistet aber die anderen überpunkte gehen da mit , siehe Bild : http://prntscr.com/bkg9f0


    Ich habe gestern es schon gelöst habe aber mein script jetzt nicht gespeichert :(


    Wie macht man es jetzt nochmal, dass die überpunkte da bleibe wo sie sind und nicht mit runter gehen.


    Stef
    Habs geschaft funktioniert nun alles so wies sein soll.


    Nun noch ein Anliegen ich möchte dass wenn man auf ein obermenu geht ein pfeil 90 degrees rotatet wird und dann beim verlassen diesem soll dieser pfeil wieder 90 degrees zurückrotatet werden.


    Ich habe das 1. rotaten mit 90 degrees schon gemacht aber wie das zurückdrehen geht weis ich nicht wie es geht.


    Wäre sehr gut wenn ihr mir da noch helfen könnt!


    Meine codes:




    Gruß, Stef

  • Auf Javascript verzichten ist Mitte 2016 nicht mehr nötig. Wenn man es doch unbedingt versuchen möchte, hat wolf : hinreichend gezeigt wie man Checkboxen manipuliert um dies zu erreichen. Wird vermutlich in weniger Fällen funktionieren als Javascript.


    Ich wüsste nicht wieso das in Browsern nicht funktionieren sollte, das ganze steht und fällt mir dem CSS3 Selektor :checked der einen akzeptablen Support hat.
    Das verzichten auf JavaScript hat den großen Vorteil das man die Website z.B. auf dem Handy mit mobilem Netz schon bedienen kann (z.B. schon auf die gewünschte unter-Seite navigieren) ohne das Frameworks u.ä geladen sind, da es rein CSS basiert funktioniert.
    Persönliche Meinung zu JS ist, das man es nur als Feature für eine Benuterfreundlichere Funktion verwenden sollte, die reine Funktionalität sollte weiterhin erhalten bleiben, auf wenn JS deaktiviert ist. (Dies betrifft Webseiten, bei Anwendungen, bei denen die Zielgruppe sicher Schnelles internet und aktives JS hat, sieht das anders aus, genau so bei Intranet-Tools)

  • Ich habe wenig Lust eine Gegenüberstellung zu starten, wage aber zu behaupten, dass Javascript trotzdem in mehr Browsern integriert ist, als der Selektor. Dabei handelt es sich aber auch eher um eine unwichtige Kleinigkeit, da nur Randgruppen betroffen sein dürften.


    Wegen mobilen Endgeräten auf Javascript zu verzichten ist meiner Ansicht nach nicht nötig. Ich habe dazu auf die Schnelle nur eine Quelle gefunden (hier), diese halte ich aber für inkorrekt, da ich mehreren No's aus persönlicher Erfahrung widersprechen kann.


    In der Praxis hat Javascript definitiv die Oberhand, was mit der Einführung von HTML5 seitens w3c auch erwünscht und teilweise erzwungen ist. Auch außerhalb des Webs erfreut sich die Sprache mittlerweile großer Beliebtheit, wodurch der Support in den nächsten Jahren eher steigen als fallen wird.