[ERLEDIGT] CSS Menu Vertikal responsive

[fred48]

Hallo Zusammen.

ich habe da ein Menü "zusammengebastelt"

vertical-Menu - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

jsfiddle.net

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

G fred

 

[basti1012]

Wie meinst du das genau?
Bei der kleinen Ansicht ?
Dann gebe das da zu

@media screen and (max-width : 760px){
  #menu li:hover > ul{
    display:block;
    }
  }

Falls ich das richtig verstanden habe

 

[fred48]

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 ....

 

[basti1012]

alle offen geht ja so nicht ,die werden ja alle daneben angezeigt.
Die würden dann ja alle übereinander liegen.
Wenn es alles untereinander sein soll würde ich es versuchen

Zur Lösung

Meinst du das so ?

 

[fred48]

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 ?

 

[basti1012]

Ja, habe ich gerade geändert

 

[fred48]

wow !

checked ~ #menu

genau so .
Vielen Dank !!

und gruss Fred

 

[fred48]

noch eine frage ;-)

ist das gewollt das dies zweimal vorkommt ?

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

 

[basti1012]

Ja.
Das eine ist min-width und das andere max-width

 

[fred48]

ok , danke

 

[fred48]

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

 

[fred48]

Hallo,

hab bemerkt das in der Mobile Ansicht die Submenüs unter Firefox nicht ausgewählt werden können .. ?
Woran kann das liegen ?

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

 

[basti1012]

Dann nimm mal hier das Minus weg

   z-index: -1;

Keine Ahnung wie das da rein kam.
Auch komisch das die anderen Browser damit kein problem haben weil -1 sollte nicht anklickbar sein.

 

[fred48]

was ein - alles anrichten kann

Vielen Dank !

 

[fred48]

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 ?

 

[basti1012]

Meinst du das so

Zur Lösung

 

[fred48]

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 :


Mobile Ansicht





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

 

[basti1012]

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]

Perfekt !

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

Gruss Fred

 

[fred48]

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