Mobilemenü aufklappen

lagraf · 22. Februar 2021

Hallo Leute!

Ich ärgere mich grad mit einem Mobilemenü, bei dem ich im FF unter "Web-Entwickler / Bildschirmgrößen testen" die Submenüs zwar durch Klick aufklappen kann, aber sobald ich die Maustaste loslasse, wird das Submenü wieder geschlossen, sodass ich die Submenüpunkte nicht anwählen kann. Im Mainmenü funktionierts, aber im Mobilemenü nicht.

Ich habe das Ganze auf ein Testform reduziert und unter http://rachbauer.org/neu/test.html abgestellt. Vielleicht kann mir mal jemand einen Tipp geben, wie man das Submenü im Mobilemenü dazu bringt, dass es stehenbleibt.

LG

AndreasB · 22. Februar 2021

Also bei mir bleibt da alles offen. Ich Kann dein Problem leider nicht nachvollziehen.

Außerdem muss man beim Navigieren ja gar nicht klicken. Hovern reicht doch.

MrMurphy · 22. Februar 2021

lagraf meint wohl Geräte mit Touchscreens. Da tritt das von ihm beschriebene Verhalten auf.

Erst mal die Infos, die energiegeladene Webseitenersteller nicht gerne hören: Solche Naviagationen braucht kein Mensch, sie sind schlicht überflüssig. Auch wenn sie funktionieren stellen sie Barrieren dar. Gute Webseiten verzichten deshalb auf sie, nicht umgekehrt.

Das heißt nicht, dass nicht Jeder seine Webseiten nach seinen Wünschen erstellen kann und darf, was in meine Angaben meist beleidigt hineininterpretiert wird.

Die Folge der Unnötigkeit ist, dass es in HTML und CSS keine Unterstützung für solche Menüs gibt. Sinnvoll, barrierearm und einigermaßen gut bedienbar lassen sich Aufklapp- und sogenannte Hamburger-Menüs nur mit Verwendung von JavaScript erstellen.

lagraf · 22. Februar 2021

AndreasB

Geh im Firefox auf "Web-Entwickler / Bildschirmgrößen testen" und Auswahl eines der Handys damit das Burgermenü für schmale Bildschirme erscheint, dann kannst du das Problem nachvollziehen.

Bei einem Klick auf einen Hauptmenüpunkt (women oder men) des Burgermenüs klappt das Submenü auf, sobald die Maustaste aber losgelassen wird, klappt es wieder weg (eingestelltes Handy iPhone, etc). Steht die Einstellung jedoch statt auf einem Handy auf "Benutzerdefiniert", dann funktioniert der :hover wieder!

Warum bleibt das Submenü stehen wenn es über :hover geöffnet wird und verschwindet, wenn es am Touchdevice mit Klick (:active) geöffnet wird? Beide haben die gleichen CSS einstellungen.

AndreasB · 22. Februar 2021

Das Geheimnis warum es in "Bildschirmgrößen testen" mal geht und mal nicht, liegt an diesem kleinen Knopf: html-seminar.de/woltlab/attachment/2906/
Der stellt die Touch-Emulation ein bzw. aus. Wenn du ein Device auswählst, wird der automatisch aktiviert. Wenn du "Benutzerdefiniert" auswählst, wir der automatisch deaktiviert.

Im Grunde hast du das Problem richtig erkannt:

Zitat von lagraf

Warum bleibt das Submenü stehen wenn es über :hover geöffnet wird und verschwindet, wenn es am Touchdevice mit Klick (:active) geöffnet wird?

Der Grund dafür ist der, dass die Pseudoklasse :active so lange auf das Element gesetzt wird, wie auf das Element geklickt / getouched wird.

Ich muss MrMurphy recht geben: Wenn du sowas sauber und Cross-Plattform Sicher implementieren möchtest muss du das mit JavaScript machen.
Das Qhover-Ausklappverhalten" ist ganz nett zum Spielen, aber nichts für Produktionscode.

MrMurphy · 22. Februar 2021

Die im Browser hinterlegten Grundfunktionen von :hover und :active haben mit dem CSS nichts zu tun und können entsprechend vom CSS auch nicht beeinflußt werden.

Browser reagieren jeweils wieder unterschiedlich auf Maus-, Tastatur-, Touch-, oder ... Eingaben. Das Antippen eines Touchscreens bewirkt im Hintergrund andere Funktionen als das Anklicken mit der Maus. Erschwerend kommt hinzu, dass Touchscreens keine hover-Effekte kennen und versuchen, die bei Antippen trotzdem irgendwie sinnvoll darzustellen.

Es gibt viele Lösungen für Hamburger-Menüs (ein Begriff, den es weder in HTML noch in CSS noch in JavaScript gibt) ohne JavaScript, die aber alle Nachteile für die Webseitenbesucher haben:

https://www.google.com/

Davon kannst du ja zunächst mal eine nachbauen, die deinen Vorstellungen am nächsten kommt.

lagraf · 22. Februar 2021

Ich halt es nicht mehr aus: Den Button habe ich noch gar nie bemerkt!

Gibt es den schon länger?

Ich werde mir mal, sobald mehr Zeit ist, ein Cross-Plattform Menü überlegen. Für jetzt muss es dem Kunden auch so reichen, denn auf Touch Geräten (Handy, etc) funktioniert es ja mit dem :active und diese Funktion im FF ist ja nicht für den Produktiv Betrieb gedacht.

Danke jedenfalls für die Informationen!

lagraf · 23. Februar 2021

Ich habe jetzt folgendes JS eingebaut, damit die geöffneten Submenus offen bleiben:

Code

<style>
.mobile-navigation > ul > li.open > ul
   { display: block; position: absolute; background-color: #FF1203;
   border: 0px solid #c0c0c0; margin: 0em; margin-left: 40px; padding: 0 10px 0 10px; z-index: 9999; }
</style>

<script>
var last = null;
$(document).ready(function() {
    // Erst bei allen Elementen .open löschen damit offene Submenüs geschlossen werden
    // Funktioniert nicht, daher Variante geklicktes Element merken
//    $('.mobile-navigation .menu-item').each(function() {
//        $(this).remove("open");
//        });

    // Dann .open beim geklickten Element setzen damit Submenü geöffnet wird
    $('.mobile-navigation .menu-item').click(function(evt) {
        if (last !== null) {
            last.classList.remove("open");    // Geöffnetes Submenü schliessen
            }
        evt.target.classList.add("open");    // Mittels Event
        last = evt.target;
//        $(this)[0].classList.add("open");    // Mittels jQuery Array der Elemente
//        last = $(this)[0];
        });

    });
</script>

Alles anzeigen

Dabei öffne ich bei einem Click Event das Submenü durch Setzen der Klasse .open und merke mir das geöffnete Submenu, damit ich es beim nächsten Click wieder schliessen kann. Ursprünglich wollte ich anstelle des Merkens alle Submenus einfach schließen indem ich ihnen die Klasse .open über die .each Funktion nehme, aber das funktioniert nicht, keine Ahnung warum. Vielleicht hat da jemand einen Tipp dazu.

Mobilemenü aufklappen

Jetzt mitmachen!

Teilen

Tags