Enrico: Navigationsleiste funktioniert nicht wie gewünscht

Hallo,

ich hänge an zwei Darstellungsproblemen bzgl. der Navigation im Hauptmenü ("Home", "Band",...").

Die Darstellung der Links "Home", "Band", "Live" und "Kontakt" funktioniert solange reibungslos, bis ich über den Link "Multimedia" oder "Community" navigiere.

Diese beiden Menüpunkte sollen bei mouseover je ein Untermenü anzeigen und dieses bei mouseout wieder verbergen.

Das Untermenü zu "Multimedia" ist derzeit noch leer, da muss ich schauen, was mit den css-Definitionen auf sich hat, zeigt aber auch schon mal das erste Problem:

Die verbleibenden Hauptmenüpunkte werden dann unten bündig am Ende des Untermenüs angezeigt. Sie sollen aber - natürlich - an der ursprünglichen Position verbleiben.

Das Untermenü zu "Community" verschwindet, sobald ich aus dem Menüpunkt rausfahre, obwohl ich das Untermenü, meines Erachtens nach, richtig geschachtelt habe.

Bitte nicht an der Größe der Untermenüpunkte stören, diese werde ich noch kleiner erzeugen.

Was habe ich beim Menü falsch gemacht bzw. vergessen?

Danke für eure Mithilfe!

Gruß, Enrico

  1. Hi,

    Die Darstellung der Links "Home", "Band", "Live" und "Kontakt" funktioniert solange reibungslos, bis ich über den Link "Multimedia" oder "Community" navigiere.

    Weil das Untermenü Platz beansprucht und damit den Rest verschiebt. position:absolute; für das Untermenü würde das ändern.

    cu,
    Andreas a/k/a MudGuard

  2. @@Enrico

    Was habe ich beim Menü falsch gemacht bzw. vergessen?

    Was ich dir neulich schon sagte.

    Jetzt sorgt ein JavaScript dafür, dass sofort nach dem Runterscrollen ein Reload stattfindet und man wieder am Seitenanfang ist, also gar nicht zum Menü kommt. (Safari auf iPhone)

    Was willst du mit dem ganzen JavaScript-Krempel erreichen?

    LLAP

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. Hallo Gunnar,

      Die Menüpunkte auf deiner Seite sind teils abgeschnitten, teils gar nicht sichtbar. Man kann weder scrollen noch zoomen

      Dass sich das Layout der verfügbaren Breite anpasst, sollte mittlerweile mit dem neuen Aufbau dank JavaScript funktionieren.

      Was willst du mit dem ganzen JavaScript-Krempel erreichen?

      Unnötigen Krempel habe ich mittlerweile raus gehauen.

      Und div sind keine Links!

      Mir missfällt es, wenn bei normalen Links im Browser das Sprungziel angezeigt wird. Deswegen gehe ich den Umweg über JavaScript und onclick für die zugehörige Aktion (Seite aufrufen etc.).

      Ich setze das verschachtelte Menü jetzt Schritt für Schritt neu auf, denn die geordnete Anzeige der beiden Untermenüs funktioniert nun, aber nicht, dass das Untermenü angezeigt bleibt, wenn ich auf einen Untermenüpunkt gehen will ^^

      Gruß Enrico

      1. Hallo,

        Und div sind keine Links!

        Mir missfällt es, wenn bei normalen Links im Browser das Sprungziel angezeigt wird.

        und mir missfällt es, wenn ich einen vermeintlichen Link hovere und das Linkziel nicht angezeigt bekomme. Das sagt mir, dass der Anbieter etwas verheimlichen will, mich irgendwie hinters Licht führen will, und ich bin ziemlich schnell weg von einem so unseriösen Angebot.

        So long,
         Martin

        1. Hallo Martin, Hallo Jnnbo,

          dass der Anbieter etwas verheimlichen will, mich irgendwie hinters Licht führen will bei denen ich nicht sehe wo ich lande

          Entstünde bei euch bei so einem "Link" tatsächlich der Eindruck, dass man etwas verbergen wolle?

          Wenn ich beispielsweise in Google etwas suche, dann schaue ich auf die Ergebnisliste, nicht aber auf den Link, der dahintersteckt.

          Hmm, dann muss ich davon aber wohl Abstand nehmen und es hinnehmen, dass bei Links angezeigt wird, wo man nach dem Anklicken landen wird, auch wenn mir das missfällt, weil dann im Browserfenster etwas angezeigt wird, was ich nicht haben will.

          Gruß Enrico

          1. Hallo Enrico,

            Entstünde bei euch bei so einem "Link" tatsächlich der Eindruck, dass man etwas verbergen wolle? Wenn ich beispielsweise in Google etwas suche, dann schaue ich auf die Ergebnisliste, nicht aber auf den Link, der dahintersteckt.

            ja (ich kann jetzt nur von mir reden), bist du noch nie auf einen Link reingefallen? Ich schon öfters und bin dadurch auch schon auf nicht ganz so schöne Seite gelandet, das muss wirklich nicht sein. Daher fahre ich grundsätzlich immer erst mit der Maus über den Link und schau was der Browser mit anzeigt, im Google Chrome z.B. links unten. Der zweite Vorteil ist, ich kann rechtsklick „Adresse des Links kopieren“ klicken und habe diesen in meiner Zwischenablage.

            Wenn du eine Seriöse Seite hast, dann werfe diese Idee ganz schnell wieder über Bord und konzertiere dich auf wichtigere Sachen.

            1. Hallo Jnnbo,

              bist du noch nie auf einen Link reingefallen?

              Möglicherweise, zumindest kann ich mich objektiv nicht erinnern, dadurch auf irgendeiner Seite gelandet zu sein, die mich mindestens wundern ließ, wo ich nun gelandet war.

              Wenn du eine seriöse Seite hast

              Natürlich soll unsere Seite seriös werden.

              Gut, dann verwerfe ich das Verbergen des Sprungziels.

              Gruß, Enrico

          2. Aloha ;)

            Grundsätzlich und ergänzend...

            Hmm, dann muss ich davon aber wohl Abstand nehmen und es hinnehmen, dass bei Links angezeigt wird, wo man nach dem Anklicken landen wird, auch wenn mir das missfällt, weil dann im Browserfenster etwas angezeigt wird, was ich nicht haben will.

            Da steckt sogar eine Grundidee dahinter, von der es Abstand zu nehmen gilt. Hinter dieser Absicht, das Linkziel zu verstecken, steckt ja die Grundidee, das, was die User deiner Seite in ihrem Browser sehen, vollständig auf die eigenen Vorstellungen anpassen zu wollen. Das ist insgesamt imho eine gefährliche Einstellung, was die User Experience angeht. Das Programmieren einer Website sollte sich auf die Bereiche beschränken, die tatsächlich in die Verantwortung der Website fallen. Sobald wir beginnen, spezielles Verhalten des Browsers manipulieren zu wollen, beschneiden wir den User in dem Recht, Komfort- und/oder Browser-Features nach eigenem Gutdünken zu konfigurieren und zu nutzen.

            (Das heißt nicht, dass es nicht Gründe geben kann, Links (wie du es getan hast) per JavaScript statt per Klick zu feuern - nur sollte es nicht der sein, den du hier genannt hast. Ich habe das bspw. auch schon getan, um eine alte, Hover-abhängige Navigation ins mobile Zeitalter zu migrieren, indem ich (nur für Mobilgeräte) per JavaScript erst nach einem zweiten Klick, d.h. wenn der Hover ausgelöst hat, den Link laden lasse... Aber auch das mag umstritten sein.)

            Grüße,

            RIDER

            --
            Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller Erreichbar meist Mittwochs ab 21 Uhr im Self-TS (ts.selfhtml.org) oder sonst - wenn online - auf dem eigenen TeamSpeak-Server (fritz.campingrider.de). # Facebook # Twitter # Steam # YouTube # Self-Wiki # ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
      2. Hallo Enrico,

        Mir missfällt es, wenn bei normalen Links im Browser das Sprungziel angezeigt wird. Deswegen gehe ich den Umweg über JavaScript und onclick für die zugehörige Aktion (Seite aufrufen etc.).

        und ich würde auf keine Links klicken, bei denen ich nicht sehe wo ich lande. Sag mir drei Gründe warm du die Sprungmarke verbergen willst?

        1. @@Jnnbo

          Sag mir drei Gründe warm du die Sprungmarke verbergen willst?

          Drei?

          ♫ Es gibt tausend gute Gründe
          diesen Link nicht anzuzeig’n
          Warum fällt mir auf einmal
          kein einziger mehr ein?[1]

          LLAP

          --
          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)

          1. frei nach den Toten Hosen ↩︎

      3. @@Enrico

        Dass sich das Layout der verfügbaren Breite anpasst, sollte mittlerweile mit dem neuen Aufbau dank JavaScript funktionieren.

        Zum Layouten ist CSS da, nicht JavaScript. CSS bringt die dafür notwendigen Mittel mit: Flexbox, Media-Queries, absolue Positionierung, Floats.

        Unnötigen Krempel habe ich mittlerweile raus gehauen.

        Jede Zeile JavaScript, die layouten soll, ist eine Zeile zuviel.

        Mir missfällt es, wenn bei normalen Links im Browser das Sprungziel angezeigt wird.

        Dass deine Vorlieben gegenüber denen der Nutzer irrelevant sind, hast du inzwischen eingesehen?

        Deswegen gehe ich den Umweg über JavaScript und onclick für die zugehörige Aktion (Seite aufrufen etc.).

        Jede Zeile JavaScript, die verlinken soll, ist eine Zeile zuviel.

        die geordnete Anzeige der beiden Untermenüs funktioniert nun,

        Nichts funktioniert. Auf dem iPhone kann ich nach wie vor nicht nach unten scrollen.

        aber nicht, dass das Untermenü angezeigt bleibt, wenn ich auf einen Untermenüpunkt gehen will ^^

        Dass die Anzeige des Untermenüs bei Geräten, wo es gar kein Hover gibt, überhaupt nicht funktionieren kann, hatte ich auch schon erwähnt.

        LLAP

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. Hallo Gunnar,

          ... ... ... ich fange nochmal ganz von vorne an :-)

          Gruß, Enrico

        2. Aloha ;)

          Dass die Anzeige des Untermenüs bei Geräten, wo es gar kein Hover gibt, überhaupt nicht funktionieren kann, hatte ich auch schon erwähnt.

          Wenn wir mal wieder bei den Geräten sind, die das nicht können... Lustigerweise können die das nämlich doch. Zumindest alle Android-Geräte, die mir in die Hände gefallen sind, verfügen über eine Art unsichtbaren Mauszeiger, der auch Hover auslösen kann. Lediglich diesen unsichtbaren Mauszeiger zu bewegen ist u.U. tricky. Und dem Standardanwender ist diese Möglichkeit nach meiner Erfahrung leider unbekannt.

          Was mich wieder mal zu der Frage bringt, mit welchem Recht die Hersteller mobiler Browser die Hover-Metaebene einfach abschaffen, ohne ordentlich Ersatz zu schaffen, zumal dies bei offensichtlich vorhandener Mauszeigerfunktion ja technisch unproblematisch wäre... Jetzt schon den Weg für produktiven Einsatz von Eye-Tracking zu ebnen halte ich für verfrüht xD

          Aber gut, das war jetzt wieder mal mehr rhetorisch, scheint das wird mein Ceterum censeo...

          Grüße,

          RIDER

          --
          Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller Erreichbar meist Mittwochs ab 21 Uhr im Self-TS (ts.selfhtml.org) oder sonst - wenn online - auf dem eigenen TeamSpeak-Server (fritz.campingrider.de). # Facebook # Twitter # Steam # YouTube # Self-Wiki # ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
          1. @@Camping_RIDER

            Wenn wir mal wieder bei den Geräten sind, die das nicht können... Lustigerweise können die das nämlich doch. Zumindest alle Android-Geräte

            Android-Geräte sind nicht die Geräte. Es gibt unzählige andere: iOS, FirefoxOS, Windows, …

            die mir in die Hände gefallen sind

            Mir ist letztens auch wieder ein Android in die Hände gefallen und wie war ich froh, dass ich von denen weg bin.

            Was mich wieder mal zu der Frage bringt, mit welchem Recht die Hersteller mobiler Browser die Hover-Metaebene einfach abschaffen, ohne ordentlich Ersatz zu schaffen

            Mit welchem Recht haben sogenannte „Web“entwickler denn diese Metaebene denn erst geschaffen? Das Web sollte von Anfang an eine offene Plattform für alle möglichen Geräte sein, nicht nur für solche mit besonderen Merkmalen wie das Vorhandensein einer Maus.

            Da gibt es keinen Ersatz zu schaffen. Hover-Effekte sollten immer progressive enhancement sein. Sie können das Nutzungselebnis verbessern. Sie sollten aber nicht Voraussetzung für das Bedienen einer Webseite sein.

            LLAP

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
            1. Aloha ;)

              Android-Geräte sind nicht die Geräte. Es gibt unzählige andere: iOS, FirefoxOS, Windows, …

              Deshalb sagte ichs ja so ;) Ich sprach schließlich nie von die Geräte, sondern von denen Geräten, die...

              die mir in die Hände gefallen sind

              Dass Android die Geräte seien hast du mir in den Mund gelegt ;)

              Ich erlaube mir aber trotz allem an dieser Stelle noch die Bemerkung, dass Android und iOS mit einem gemeinsamen Marktanteil von knapp 90% die unzähligen anderen relativ unbedeutend erscheinen lassen, so dass man mit Aussagen über Android schon mal knapp die Hälfte aller Benutzer betrifft. Aber wie gesagt, darauf wollte ich gar nicht hinaus, das hast du ins Spiel gebracht.

              Was mich wieder mal zu der Frage bringt, mit welchem Recht die Hersteller mobiler Browser die Hover-Metaebene einfach abschaffen, ohne ordentlich Ersatz zu schaffen

              Mit welchem Recht haben sogenannte „Web“entwickler denn diese Metaebene denn erst geschaffen?

              Geschaffen wurde diese Metaebene nicht durch die Webentwickler, sondern letztendlich durch die Standardisierungsgremien und die Browserhersteller. Wer definiert denn:

              Das Web sollte von Anfang an eine offene Plattform für alle möglichen Geräte sein, nicht nur für solche mit besonderen Merkmalen wie das Vorhandensein einer Maus.

              wenn nicht Gremien wie das W3C, die das Aufkommen von Hover erst möglich und salonfähig gemacht haben. Das Argument hinkt ziemlich. Und ja, inzwischen erfährt das Web richtigerweise eine solche Ausrichtung - dass das aber in irgendeiner Form ursprünglich gewesen sein soll, halte ich ehrlich gesagt für überzogen. Nochmal: Ich habe nichts dagegen, dass es inzwischen so ist.

              Da gibt es keinen Ersatz zu schaffen. Hover-Effekte sollten immer progressive enhancement sein. Sie können das Nutzungselebnis verbessern. Sie sollten aber nicht Voraussetzung für das Bedienen einer Webseite sein.

              Full ACK zum Thema progressive enhancement. Ich sage ja nicht, dass man Hover so nutzen soll, wie es der TO ursprünglich getan hat. Mein Standpunkt war allgemeiner zu verstehen, ich beklage allgemein, dass die Browserhersteller mit dem alternativlosen Wegfall von Hover eine Ebene für progressive enhancement willkürlich streichen. Insofern besteht eben doch die Notwendigkeit Ersatz zu schaffen - zumindest solange man nicht vorhat, sich absichtlich Features zu streichen.

              Letzteres ist allerdings eine Mentalität, die mir bei "Apps" immer häufiger entgegenlächelt. Mir scheint, dass Apps fast schon stolz darauf sind, keine vollwertigen Programme mehr zu sein, sondern eben nur, auf gut schwäbisch, Progrämmle.

              Und, wie gesagt, es ist ein Ceterum Censeo... Man muss da nicht unbedingt meiner Meinung sein. Ich persönlich finds halt schlimm. Und den meisten Menschen ist es einfach... egal.

              Grüße,

              RIDER

              --
              Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller Erreichbar meist Mittwochs ab 21 Uhr im Self-TS (ts.selfhtml.org) oder sonst - wenn online - auf dem eigenen TeamSpeak-Server (fritz.campingrider.de). # Facebook # Twitter # Steam # YouTube # Self-Wiki # ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
              1. Hallo Camping_RIDER,

                Was mich wieder mal zu der Frage bringt, mit welchem Recht die Hersteller mobiler Browser die Hover-Metaebene einfach abschaffen, ohne ordentlich Ersatz zu schaffen

                Mit welchem Recht haben sogenannte „Web“entwickler denn diese Metaebene denn erst geschaffen?

                Geschaffen wurde diese Metaebene nicht durch die Webentwickler, sondern letztendlich durch die Standardisierungsgremien und die Browserhersteller.

                Naja, das ist jetzt fast schon eine philosophische Frage. Vor :hover wurde der Effekt mit JS nachgebaut, jeder und sein Hund hatte diesbezüglich ein Script auf seiner Homepage. Man kann also durchaus sagen, dass sich die Standardisierungsgremien der normativen Kraft des faktischen gebeugt haben.

                LG,
                CK

                1. Aloha ;)

                  Naja, das ist jetzt fast schon eine philosophische Frage. Vor :hover wurde der Effekt mit JS nachgebaut, jeder und sein Hund hatte diesbezüglich ein Script auf seiner Homepage. Man kann also durchaus sagen, dass sich die Standardisierungsgremien der normativen Kraft des faktischen gebeugt haben.

                  Okay, diesem Detail beuge ich mich und behaupte in Zukunft das Gegenteil ;)

                  Damit wären die Webentwickler und die Browserhersteller jetzt quitt :P

                  Die einen habens mit der normativen Kraft des Faktischen eingeführt, die anderen werden es mit der normativen Kraft des Faktischen nahezu aussterben lassen.

                  Grüße,

                  RIDER

                  --
                  Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller Erreichbar meist Mittwochs ab 21 Uhr im Self-TS (ts.selfhtml.org) oder sonst - wenn online - auf dem eigenen TeamSpeak-Server (fritz.campingrider.de). # Facebook # Twitter # Steam # YouTube # Self-Wiki # ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                2. Hi,

                  Vor :hover wurde der Effekt mit JS nachgebaut,

                  Einspruch: damals hat man dafür Java-Applets verwendet!

                  cu,
                  Andreas a/k/a MudGuard

                  1. Hallo,

                    Einspruch: damals hat man dafür Java-Applets verwendet!

                    /i wie jetzt, damals? macht man das heute etwa anders?

                    Gruß
                    Kalk

                    1. Hi,

                      Einspruch: damals hat man dafür Java-Applets verwendet!

                      /i wie jetzt, damals? macht man das heute etwa anders?

                      Ja, heutzutage macht man das mit Flash! ;-)

                      cu,
                      Andreas a/k/a MudGuard

                      1. @@MudGuard

                        Einspruch: damals hat man dafür Java-Applets verwendet!

                        /i wie jetzt, damals? macht man das heute etwa anders?

                        Ja, heutzutage macht man das mit Flash! ;-)

                        Ach was! Das Web ist tot![1] Heutzutage macht man das mit nativen Apps!

                        LLAP

                        --
                        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)

                        1. Das einzige, wozu Webseiten noch gut sind, ist zu fragen „Möchten Sie unsere App runterladen? [gleich] [sofort]“ ↩︎

  3. Hallo Enrico,

    Was habe ich beim Menü falsch gemacht bzw. vergessen?

    li
    {
        display:inline-block;
        **vertical-align:top;**
    }
    #Community > ul
    {
       display:none;
       **padding**-top:36px
    }
    

    Zweierlei ist mir zu deinem css eingefallen. Mit vertical-align des li-elements rutschen die folgenden ul hoch. Wenn du margin-top:36px verwendenst schaffst du einen Raum zwischen li > ul, mit padding lässt sich das vermeiden, damit behält :hover seinen Effekt.

    Was mir noch aufgefallen ist: packe deinen <link type="text/css" href="../CSS/StandardBody.css" rel="stylesheet"> in den <head>, dort gehört er mAn hin.

    Grüße, Kai Quincunx

    1. Hallo Kai,

      mit padding lässt sich das vermeiden, damit behält :hover seinen Effekt

      Und das war's :-)

      Danke Dir!

      Gruß, Enrico