Anregungen für aufklappbares Menü & Touchscreens

[WebdesignHoehne]

Hi Leute,

aufgrund der Usability und der Suchmaschinenfreundlichkeit frickel ich gerade folgendes Menü in meine Webseite, die indizierbarkeit der Seiten ist damit ja auch bedeutend besser, also gleich zwei Fliegen mit einer Klappe...
https://www.silent-fran.de/css/tutorial ... menue.html

Nun stellt sich mir aber die Frage: Was mache ich mit den Usern, die Mobil / per Touchscreen auf die Seite gehen. Hier schweben mir einige Ideen vor, jedoch in Verbindung mit Suchmaschinenoptimierung fällt mir keine gute ein, die nicht den Entwicklungsrahmen sprengt...

- Option A: Subnavi auf jeder "Hauptnavi" Seite einpflegen -> Duplicate Content, zumindest der Block der Navigation, weil dieser nun ja auch im Hauptmenü indiziert wird
- Option B: Der Hauptmenüpunkt öffnet keine Seite - Wäre eine Lösung, aber wenn die Hauptkategorie nunmal auch verlinkt werden soll, irgendwie doof
- Option C: "Doppelklicks" - nach dem erstem Klick öffnet sich das Dropdown (sofern vorhanden), nach dem zweitem Klick die Seite

Würde mich freuen von euch zu hören, vielleicht hat jemand ja schon was ähnliches umgesetzt?

[Bodo99]

Ich finde diese hier passend.

https://voky.com.ua/showcase/sky-mega-menu/#preview

Die einzelnen Bereiche sind schön gross und sowohl für Desktop als auf für Touchscreens gut anklickbar.

[WebdesignHoehne]

Schön klicki bunti, leider nicht optimal, da nur für wenige Bereiche wirklich eindeutig erkennbare buttons definierbar wären, also muss für das responsive design mir noch was anderes einfallen.
Zudem ist auch dort das selbe problem gegeben, wenn ich auf einem touchscreen auf den hauptnavipunkt gehe, klappt der nicht auf, sondern die verlinkte seite wird geöffnet...

Wer das ganze ein wenig unübersichtlich im beispiel fand - die hauptseite habe ich schoneinmal umgesetzt:
https://www.extreme-gaming.de/

Zudem habe ich gerade noch eine Option ergänzt

[nerd]

Beide menues die inden ersten beiden beitraegen verlinkt wurden sind fuer mobiles/responsive design voelleig ungeeignet. Sie funktionieren nur solange du an einem browser arbeitest der :hover kennt; dh. wenn der mauszeiger ueber dem element ist.

Setze lieber auf jquerymobile. Alle elemente dort sind auf touch screen devices angepasst. Ein normales menu kannst du nicht 1:1 von desktop auf eine mobile seite uebernehmen. Meistens verlinkst du global nur auf die hauptseiten, und von den unterseiten nur auf eine handvoll seiten die zur entsprechenden unterseite eben relevant sind - oder du hast eine index seite die von ueberall erreichbar ist und deine komplette navigation enthaelt.

[WebdesignHoehne]

Danke für die Antwort Nerd.

Schau Dir mal den Support von dem CSS-Menü in iOS an (sofern Du die Möglichkeit hast), dies hat mich selbst schon erstaunt, auch wenn es nur halbfertig ist, so ist der Ansatz doch für Mobile Geräte ganz nett.

Jquerymobile schaue ich mir bei Gelegenheit mal an, danke für den Tipp! Ich denke ich habe hier nun den richtigen Weg gefunden, selbst wenn ich nur Jquery ausschlachte, bzw. mit Javascript die Funktionalität "nachrüste", mal schaun, wann ich es schaffe dies komplett umzusetzen.