Submenu-Button immer zentrieren

  • Nabend zusammen,


    ich habe mal wieder ein kleines Problem. Und zwar geht es darum einen Button, der bei Klick ein Untermenü öffnet, immer zentriert zu haben.


    Bisher funktioniert diese Zentrierung leider nur, wenn das Untermenü nicht aufgeklappt ist. Denn wenn es aufgeklappt ist, ist das li-Element, worin sich das Untermenü befindet, ja größer als vorher und dann läge es halt mitten über dem Untermenü.


    Am besten ist es, wenn ihr euch das einfach mal selbst anschaut: http://codepen.io/jr-cologne/pen/dGYGvd


    Gemeint ist die zweite Variante.


    Ich hoffe, ihr versteht mein Problem und könnt mir helfen. :)


    Gruß
    JR Cologne

  • Ach, sorry. Habe mal wieder die Hälfte vergessen zu erwähnen.


    Es geht um das Menü bei einer Viewport-Breite von 860px oder weniger. Um zu dem richtigen Menü zu kommen, musst du etwas runterscrollen. Gemeint ist nämlich das Menü bei der zweiten Variante. Wenn man das aufklappt, sieht man bei dem dritten Punkt ein Pfeil-Icon. Dies ist der Button, mit dem man dann das Untermenü aufmacht. Das Problem ist, dass, wenn man auf den Button klickt und das Untermenü öffnet, der Button nicht mehr vertikal zentriert ist.


    So, ich hoffe, es ist jetzt verständlicher.

  • Du könntest das label-Element innerhalb des a-Elements platzieren:


    HTML
    1. <li>
    2. <a href="#">Blog
    3. <label for="toggle-submenu" class="submenu-button">
    4. <img src="http://img.jr-cologne.bplaced.net/submenu-button.svg">
    5. </label>
    6. </a>
    7. <input id="toggle-submenu" class="toggle" type="checkbox">
    8. <!-- [...] -->


    Dann natürlich noch das a-Element relativ positionieren.

  • Es können nur sichtbare Elemente geklickt werden. Das label-Element im Link verdeckt den Link (zumindest an der Stelle, wo es sich befindet) und blockiert so diesen klickbaren Bereich.


    HTML
    1. <body>
    2. <a href="test.htm" target="_blank">Blog
    3. <label for="toggle-submenu">Ich löse den Link nicht aus</label>
    4. </a>
    5. <input id="toggle-submenu" type="checkbox">
    6. </body>


    Etwas leichter nachzuvollziehen ist das, wenn man Hintergrundfarben setzt:


    CSS
    1. a {
    2. background: blue;
    3. }
    4. label {
    5. background: red;
    6. }


    Man sieht den blauen Hintergrund des Links nicht hinter dem roten Hintergrund des label-Elementes und man kann nur sichtbare Elemente klicken.


    Ein anderes Beispiel dazu:


    HTML
    1. <a href="test.htm" target="_blank">Blog</a>
    2. <div></div>


    Der Link ist nicht mehr komplett sichtbar und nur der sichtbare Teil ist klickbar.

  • So, ich habe das Ganze jetzt soweit hinbekommen, dass alles zentriert ist, jedoch scheint der a-Tag doch auf den Klick des Labels zu reagieren, denn immer, wenn ich darauf klicke, springe ich wieder nach oben. Allerdings ist danach das Untermenü dennoch geöffnet.


    Muss ich vielleicht noch irgendwas im CSS ändern, damit das funktioniert?



    Edit: Es scheint nicht an dem Link zu liegen. Denn, wenn ich auf das Label klicke, steht in der URL nicht das "#".

  • Ah. Ich war nur verwirrt da der Pfeil nicht wirklich in der Mitte ist und ich dein beschriebenes Verhalten nicht erlebt habe.


    Bei Klick auf den Link springt die Seite nach oben, was ja nach folgendem Code auch zu erwarten ist:


    HTML
    1. <a href="#">


    Das Untermenü bleibt davon unberührt, dieses wird nur angezeigt oder verborgen wenn ich den Pfeil klicke und da springt nichts.


    Firefox 46.0.1.

  • Hm, bin ich jetzt zu blöd, um das Label zu erwischen und habe immer auf den Link geklickt?! ?(:D


    Das ist echt kurios...


    Die Tatsache, dass es noch nicht hundertprozentig zentriert ist, habe ich erstmal außer Acht gelassen.



    So, dann muss ich wohl nochmal ein bisschen rumprobieren...



    Edit: Alles klar. Es scheint tatsächlich am Browser zu liegen. Im IE 11 funktioniert es nicht, dafür aber im Chrome und Firefox.

  • Ja das kann ich so bestätigen. Schuld ist, dass der Klick im IE nicht auf dem Label registriert wird, sondern auf dem Bild. Ich habe ein kurzes Javascript Workaround geschrieben.


    Gib den Bildern in den Labeln IDs und trage sie in das imageIds Array ein, dann sollte das auch im IE gehen.