[ERLEDIGT] CSS Menu Vertikal responsive

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

fred48

Neues Mitglied
19 August 2020
17
0
1
35
Hallo Zusammen.

ich habe da ein Menü "zusammengebastelt"



Nun sollten in der Responsiv Ansicht alle Menüpunkte (inkl.Submenü) sichtbar sein.
Wie könnte ich das lösen ?

G fred
 

fred48

Neues Mitglied
19 August 2020
17
0
1
35
Hi Basti,

danke für den input!

Ja in der kleinen Ansicht

Fast so ;-)

es müssten alle Menüpunkte "offen" sein (ohne hover) in etwa so :

menu1
Sub-1.1
Sub-1.2
menu2
Sub-2.1
Sub-2.2
Sub-2.3
Sub-2.4
Sub-2.5
menu3
Sub-3.1
Sub-3.2
Sub-3.3


usw ....
 
Zuletzt bearbeitet:

fred48

Neues Mitglied
19 August 2020
17
0
1
35
ja ,

das Menü sollte am Anfang aber geschlossen sein und bei drücken des grünen Menübalken sollten alle Menüpunkte angezeigt werden.
Ist das möglich ?
 

fred48

Neues Mitglied
19 August 2020
17
0
1
35
noch eine frage ;-)

ist das gewollt das dies zweimal vorkommt ?

@media screen and (min-width : 760px)
 

fred48

Neues Mitglied
19 August 2020
17
0
1
35
sorry, ich nochmals,

die sub menüs in der Mobile Ansicht sind nicht auswählbar

jetzt passt es : display=inline

Danke nochmals für deine Hilfe !!


Codepen
 
Zuletzt bearbeitet:

fred48

Neues Mitglied
19 August 2020
17
0
1
35
Nun hab ich das Menü noch um einen Hamburger ergänzt (geändert)
Funktioniert auch , wenn man das Menü in der mobile jedoch schliesst wird es in der grossen Ansicht nicht mehr angezeigt .

Es müsste eine abfrage in etwa "if @media screen and (min-width : 760px) else show menu "

https://codepen.io/fred84/pen/JjXyVQj

oder sollte man das ganze besser in CSS machen ?
 

fred48

Neues Mitglied
19 August 2020
17
0
1
35
Hi Basti,

Danke vielmals !
es passt fast ;-)
Das Menü in der Mobile Ansicht muss am Anfang nicht geöffnet sein .

Hab hier ein paar Screenshot gemacht :

Normale Ansicht :
menu_normal_gross.JPG

Mobile Ansicht

menu_normal_klein.JPG



Wenn nun der Browser wieder gross "gezogen" wird, sollte das Menü wieder so ausehen :
(Bei meinem Versuch, wurde das "normale" Menü nicht mehr angezeigt)

menu_normal_gross.JPG
 

Anhänge

  • menu_geöffnet_klein.JPG
    menu_geöffnet_klein.JPG
    47,5 KB · Aufrufe: 1
  • menu_geöffnet_klein.JPG
    menu_geöffnet_klein.JPG
    47,5 KB · Aufrufe: 1

basti1012

Senior HTML'ler
26 November 2017
1.463
156
63
39
Minden
sebastian1012.bplaced.net
Ich habe es nochmal geändert und gleichzeitig das JS entsorgt.
Das geht auch ohne JS.
Ab jetzt solltest du aber mal selber mehr test , bzw einfach mal rum probieren.

Mit den JS hättest du nur eine Zeile ändern müßen und das hätte man mit rumspielen vieleicht hinbekommen.

Das du das ohne JS hinbekommst das erwarte ich von keinen Anfänger aber so kleinigkeiten sollte man zumindest einfach mal testen .
Wenn es immer noch nicht klappt helfen wir trotzdem weiter.
Aber ok, kuck dir mal bei Codepen alles richtig an , sollte jetzt so sein wie du es wolltest
 

fred48

Neues Mitglied
19 August 2020
17
0
1
35
Perfekt !

Ich danke Dir vielmals, versuche in Zukunft mehr zu probieren bevor ich hier nach einer Lösung nachfrage.

Gruss Fred
 

fred48

Neues Mitglied
19 August 2020
17
0
1
35
Hallo.

ich habe noch eine Frage zum obigen Menü.
ist es möglich das Submenü "offen" zu behalten bei der aktiven Seite ?

Also z.B auf der Seite Submenu 3.2 sollte das Submenü aktiv offen bleiben .
Ich habe es mit display:block; probiert was leider nicht geht.

Hier das Beispiel :
Submenü geöffnet


Im mobilen Zustand sollte alles wie bisher offen bleiben.

Danke für einen Tipp
 
Werbung:

Neueste Beiträge