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

[ERLEDIGT] CSS Menu Vertikal responsive

Werbung:
Wie meinst du das genau?
Bei der kleinen Ansicht ?
Dann gebe das da zu
Code:
@media screen and (max-width : 760px){
  #menu li:hover > ul{
    display:block;
    }
  }
Falls ich das richtig verstanden habe
 
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:
Werbung:
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 ?
 
Zuletzt bearbeitet:
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 ?
 
Werbung:
Werbung:
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:
Werbung:
Dann nimm mal hier das Minus weg
Code:
   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.
 
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 ?
 
Werbung:
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: 2
  • menu_geöffnet_klein.JPG
    menu_geöffnet_klein.JPG
    47,5 KB · Aufrufe: 1
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
 
Werbung:
Perfekt !

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

Gruss Fred
 
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
 
Zurück
Oben