Kommentare zu: Mobile Menü ohne JavaScript, Mobile CSS Menu

Von: avs

avs — Fri, 07 Aug 2020 11:39:09 +0000

Hallo Thomas,

vielen Dank für das nette Feedback!
Diese Anleitung mit Demo erklärt/zeigt die gewünschte Funktionalität:
https://a-vista-studios.de/blog/webdesign/sticky-menu-feststehendes-menue-html/

Viele Grüße!

Von: Thomas Weiss

Thomas Weiss — Thu, 06 Aug 2020 09:24:42 +0000

MoinMoin nach Leverkusen 😉
Erst mal vielen Dank, euer Tutorial durch zu arbeiten hat mir viel Spaß gemacht und ich habe einiges dabei gelernt.
Leider ist euer Menü nicht fix am oberen Rand und meine Versuche in diese Richtung sind leider gescheitert (Bei mir wandern die Buttons nicht mit nach links wenn ich den Browser zusammen schiebe).
Könnt ihr vieleicht veröffentlichen wie das funktioniert.

Vielen Dank im Voraus
Thomas

Von: avs

avs — Tue, 24 Mar 2020 13:31:18 +0000

Als Antwort auf Stefan. Hallo Stefan, freut mich, dass Ihnen das Responsive Menü gefällt und die Einbindung reibungslos geklappt hat. Um Untermenübereiche zu realisieren, muss lediglich das HTML sowie das CSS entsprechend erweitert werden. Das funktioniert auch nicht anders als bei einem "normalen" (nicht-responsiven) Menü. Screenansicht: einfach die Untermenüpunkte via HTML integrieren, per CSS verbergen und bei einem :hover über den Hauptmenüpunkt per CSS einblenden. Mobile Ansicht: dort die Untermenüpunkte einblenden, wenn der Hauptmenüpunkt geklickt bzw. auf dem Tablet/Smartphone berührt wird. Da der Code für das Mobile Menue bereits recht umfangreich ist, haben wir uns auf diesen konzentriert und darauf verzichtet, ihn mit zusätzlichem erweiterten Code zu belasten.

Von: Stefan

Stefan — Tue, 24 Mar 2020 12:49:37 +0000

Hallo,
vielen Dank für die Anleitung. Genau nach sowas habe ich gesucht.
War super easy einzubinden.
Eine frage wäre da noch, wie muss ich den Code abändern um ein „Multilevel“ Menü zu erhalten?

Von: avs

avs — Mon, 02 Mar 2020 16:30:29 +0000

Als Antwort auf Werner Meise.

Hallo Werner,
mit dieser Technik ist das m.E. nicht möglich. Man müsste dazu einen TARGET auf den BODY setzen.
Also den Document-Body z.B. [body id=“body“] und dann im CSS #body:target nav… auf display:none. Das klappt aber nicht, denn so hat man keinen „Trigger“ in Form eines Links der durch Anklicken die Aktion auslöst.

Von: Werner Meise

Werner Meise — Mon, 02 Mar 2020 15:12:12 +0000

Moin aus dem Emsland!
Was muss ich schreiben, um den/das Hamburger ohne Klick auf das graue Kreuz zu schließen?
Die Navigation soll geschlossen werden bei Klick irgendwo auf der Seite.
Gruß
Siggi

Von: fixed on css

fixed on css — Mon, 17 Feb 2020 22:48:06 +0000

Tolles Ding, hab viel dabei gelernt! Klasse, schön das es das internet gibt;-) DANKE

Von: avs

avs — Sun, 05 Jan 2020 17:37:53 +0000

Als Antwort auf Thiemo.

Hallo Thiemo,

wenn die CSS-Datei nicht „ausgelesen“ wird, liegt das in der Regel daran, dass die Pfadangabe zur CSS-Datei nicht korrekt ist.

Beispiele:

Befindet sich die CSS-Datei im selben Verzeichnis wie die HTML-Datei, so lautet die Pfadangabe:
[link rel=“stylesheet“ type=“text/css“ href=“/meine-css-datei.css“ media=“all“]

Befindet sich die HTML-Datei in einem Verzeichnis und die CSS-Datei im Unterverzeichnis /styles so würde die Pfadangabe lauten:
[link rel=“stylesheet“ type=“text/css“ href=“/styles/meine-css-datei.css“ media=“all“]

Befindet sich die HTML-Datei in einem Verzeichnis und die CSS-Datei im darüber liegenden Verzeichnis (also eine Verzeichnisebene höher) so würde die Pfadangabe lauten:
[link rel=“stylesheet“ type=“text/css“ href=“../meine-css-datei.css“ media=“all“]

Achtung: bitte die Zeichen [] durch <> ersetzen! Das musste leider geändert werden, da die Kommentarfunktion sonst den Code nicht anzeigt, sondern intepretiert.

Ich hoffe, das hilft Ihnen weiter.
Beste Grüße!

Von: Thiemo

Thiemo — Sun, 05 Jan 2020 14:35:37 +0000

Hallo,

es gibt ein kleines Problem mit dem Code. Wenn ich die CSS Datei, die HTML Datei eingebunden habe, wird die CSS Datei nicht ausgelesen bzw. ignoriert. Können Sie mir dabei helfen?

Mit freundlichen Grüßen
Thiemo!

Von: avs

avs — Fri, 28 Jun 2019 18:36:49 +0000

Als Antwort auf pauledd. Hallo Pauledd, mit der genannten Zeile wird der entsprechende Bereich im Quellcode angesprochen. Klicken Sie dazu hier auf der Seite auf den blauen Button BEIPIEL ANSEHEN und rufen Sie den Quelltext der Demo-Seite auf. Im Quellcode steht unter anderem: a href="#nav-m" id="nav-m" rel="nofollow" Um den Hamburger per CSS anzusprechen, lautet der Code folglich: nav a#nav-m img, denn die class-ID #nav-m gehört direkt zur href (also zum a-Tag). Dieser Bezug geht bei nav a #nav-m img, verloren und daher kann das nicht funktionieren. Beste Grüße!