Ergebnis 1 bis 14 von 14
-
29-07-2020, 13:41 #1
Grünschnabel
- registriert
- 29-07-2020
- Beiträge
- 8
Submenus - Menuzeile verschiebt sich bzw. bricht um
Hallo!
Ich habe Schwierigkeiten die Menüzeile vernünftig darzustellen, wenn Submenus vorhanden sind. Sie bricht dabei oft um. Nicht immer, aber oft - siehe Screenshot.
Wenn mir da jemand bitte auf die Sprünge helfen könnte, freue ich mich sehr!
Genauso, wenn jemand einen Tip hat, wie man die Darstellung in der mobilen Ansicht mit reinem CSS besser lösen könnte.
Das ganze ist Teil eines Wordpress-Themes, deshalb kann ich leider nicht ohne weiteres ein Akkordeon bestehend aus <div> - Elementen benutzen.
Vielen Dank!
P.S.:
Den kompletten HTML / CSS / und zugehörigen JS-Code bekomme ich hier leider nciht angehängt und aufgrund seiner Länge nicht gepostet. Bei Interess kann ich ihn aber als "Antwort" hier bestimmt in 3 Teilen posten.
Code:/***************************************************************** GLOBAL for a, ul, li *****************************************************************/ a { text-decoration: none; } nav { font-family: 'Gruppo', cursive; } ul { background: darkorange; /* darkorange */ list-style: none; margin: 0; padding-left: 0; } li { display: block; float: left; padding: 0.5rem; position: relative; text-decoration: none; } li a{ color: black; cursor: pointer; } li a:hover { color: goldenrod; } li a:focus { color: goldenrod; } /***** folgendes nur für die menus! */ ul li ul { visibility: hidden; opacity: 0; min-width: 7rem; position: absolute; transition: all 0.5s ease; margin-top: 0.5rem; left: 0; display: none; } ul li:hover > ul, ul li ul:hover { background-color: goldenrod; visibility: visible; opacity: 1; display: block; } ul li ul li { width: 100%; } /******************************************************************** @media *********************************************************************/ /************************* MENU *************************/ .menu-wrapper{ grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3; border-radius: 10px; } #menu-wrapper nav { padding-top: 1em; padding-right: 5em; margin-bottom: auto; float: right; } #menu-wrapper ul li ul li{ background-color: white; width: 100%; } /*white background of submenu-li on desktop-view */ #menu-wrapper ul li:hover ,#menu-wrapper ul li ul li:hover{ background-color: goldenrod; } #menu-wrapper nav a{ color: black; font-size: 1.2em; font-weight: bold; } .menu-wrapper-onscroll{ grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3; border-radius: 10px; padding-top: px; } .menu-wrapper-onscroll nav { border-radius: 0px; padding-top: 3px; padding-bottom: 3px; } .menu-wrapper-onscroll ul li:hover, .menu-wrapper-onscroll ul li ul li:hover { background: goldenrod; } #menu-wrapper ul li ul li, .menu-wrapper-onscroll ul li ul li{ min-width: 5em; border-left: 1px solid black; border-right: 1px solid black; } #menu-wrapper ul li ul li:first-child, .menu-wrapper-onscroll ul li ul li:first-child { border-top: px solid black; } #menu-wrapper ul li ul li:last-child, .menu-wrapper-onscroll ul li ul li:last-child { border-bottom: 1px solid black; } nav.menu-mobile{ z-index: 10000; grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 4; position: absolute; border-radius: 10px; padding-top: 10px; padding-bottom: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } nav.menu-mobile ul { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; } nav.menu-mobile ul li { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; text-align: left; list-style: none; display: block; text-decoration: none; font-size: 17px; border-radius: 0px; } nav.menu-mobile ul li ul li { background-color: goldenrod; min-width: 5em; border-left: 1px solid black; border-right: 1px solid black; border-top: px solid black; } nav.menu-mobile ul li ul li:hover, nav.menu-mobile ul li:hover { background-color: goldenrod; min-width: 5em; border-left: 1px solid black; border-right: 1px solid black; border-top: px solid black; } nav.menu-mobile ul li ul li:first-child { border-top: 1px solid black; } nav.menu-mobile ul li ul li a{ color: black; } .onscroll { position: fixed; } /* ------------------ sub-menus ------------*/ nav .sub-menu { visibility: hidden; height: 0; z-index: 1000; } nav .sub-menu li { display: block; } .ulSubMenuMarginLeft { margin-left: 30px; } /* set by JS, menu-button-mobile.js */
-
31-07-2020, 13:09 #2
AW: Submenus - Menuzeile verschiebt sich bzw. bricht um
Hast du einen Link, wo man sich das live ansehen kann?
PS: hab' jetzt nur oberflächig auf das CSS geschaut, aber display: block mit float: left ist nicht das was du willst. Du willst display: inline-block und auf dem Elternelement ein white-space: nowrap.
-
31-07-2020, 19:30 #3
Grünschnabel
- registriert
- 29-07-2020
- Beiträge
- 8
AW: Submenus - Menuzeile verschiebt sich bzw. bricht um
Hallo, danke erstmal für die Hilfe!
Nein, das kann man online nicht aufrufen.
Ich würde dir den Code samt JS gern hier irgendwie reinstellen, sehe aber keine Möglichkeit.
Ich habe jetzt
li {
display: inline-block;
}
und ul {
white-space: nowrap;
}
hinzugefügt. float-left bei <li> habe ich entfernt. (Float-left steht aber noch bei .menu-wrapper ul li { ... } drin - sonst löst sich das ganze menu leider aus dem css-grid raus.)
Leider ändert sich dadurch aber nichts. Es sieht noch immer aus wie auf dem von mir geposteten screenshot. Verschoben an der stelle des Listenpunkts mit dem Sub-Menu. Allerdings nur in Chrome. Im Moment. Ab und an verschiebt es sich auch in Firefox.
Gibt es eine Möglichkeit hier in der Antwort nochmal den kompletten Code zu posten, so dass du ihn kopieren und live sehen kannst?
Vielen Dank für dein Interesse!!
-
01-08-2020, 09:44 #4
AW: Submenus - Menuzeile verschiebt sich bzw. bricht um
Mach' bitte mit dem auf das Problem reduzierten Code ein fiddle und poste hier dessen Link.
Das deutsche Javascript Forum http://forum.jswelt.de
-
03-08-2020, 13:48 #5
Grünschnabel
- registriert
- 29-07-2020
- Beiträge
- 8
AW: Submenus - Menuzeile verschiebt sich bzw. bricht um
https://jsfiddle.net/rw9g1yo6/3/
Ich hab die Struktur des Headers drin gelassen, falls es damit zusammenhängt.
-
04-08-2020, 09:09 #6
AW: Submenus - Menuzeile verschiebt sich bzw. bricht um
Ziemlich viel CSS. Wird das alles für dieses Menü gebraucht? Habe es nur überflogen.
Jetzt sind es auch nicht mehr die Menüpunkte wie in der Ursprungsfrage. Daher die Frage, wie das im Fiddle rechts unten jetzt aussehen sollte.Das deutsche Javascript Forum http://forum.jswelt.de
-
04-08-2020, 12:12 #7
Grünschnabel
- registriert
- 29-07-2020
- Beiträge
- 8
AW: Submenus - Menuzeile verschiebt sich bzw. bricht um
Im CSS geht es wohl nur um die ersten 150 Zeilen, die die direkt für das Menü sind. Ich habe darunter noch das CSS für den Header insgesamt, falls das eine Rolle spielt. Das ganze ist eigentlich Teil eins Wordpress-Themes, Ich versuche mich grad mal daran... Zur mobilen Ansicht des Ausklapp-menü hätte ich später auch noch eine Frage gehabt, aber ich hab es jetzt erstmal entfernt in dem Fiddle.
Bei Fiddle musst du bitte mal die Fenstergröße ändern. Bei Vollbild wird es mir wie gewünscht angezeigt. Beim Verkleinern sieht man dann Verschiebungen. Die Punkte der ersten Ebene sollten halt alles immer schön hintereinander weg angezeigt werden. Bei einem Zeilenumbruch ohne leeren Raum vor dem ersten Element in der Zeile, so wie jetzt.
-
12-08-2020, 15:04 #8
Grünschnabel
- registriert
- 29-07-2020
- Beiträge
- 8
AW: Submenus - Menuzeile verschiebt sich bzw. bricht um
hat niemand eine idee, woran es liegt?
ich bedanke mich aber trotzdem.
-
13-08-2020, 08:43 #9
AW: Submenus - Menuzeile verschiebt sich bzw. bricht um
Du könntest im Fiddle in allen drei Boxen mal alles rauswerfen, was nicht benötigt wird, um den Fehler zu sehen. Helfer haben es lieber kompakt aus Zeitgründen. Und oft sieht man dabei den Fehler schon selbst, wenn man das schrittweise macht und zwischendurch immer wieder testet.
Das deutsche Javascript Forum http://forum.jswelt.de
-
13-08-2020, 10:54 #10
Grünschnabel
- registriert
- 29-07-2020
- Beiträge
- 8
AW: Submenus - Menuzeile verschiebt sich bzw. bricht um
Okay, danke, ist erledigt.
Scheint an den Zeilen 40 und 47 des CSS zu liegen. Was genau das Problem ist, verstehe ich leider trotzdem nicht.
-
14-08-2020, 08:58 #11
AW: Submenus - Menuzeile verschiebt sich bzw. bricht um
Welcher Link führt zur letzten Version im Fiddle?
Das deutsche Javascript Forum http://forum.jswelt.de
-
16-08-2020, 02:24 #12
Grünschnabel
- registriert
- 29-07-2020
- Beiträge
- 8
AW: Submenus - Menuzeile verschiebt sich bzw. bricht um
Pfff. Natürlich, war nciht gespeichert. Entschuldigung, ich dreh durch langsam.
Also nochmal: https://jsfiddle.net/82fpvnob/25/
Zeile: 36: bis zu einer schriftgröße von 1.0 rem funktionierts, ab 1.1rem leider nicht mehr.
Den zweiten möglichen Fehler finde ich grade leider nicht mehr wieder, hab ich hier wohl grad wegrationalisiert.
-
16-08-2020, 10:23 #13
AW: Submenus - Menuzeile verschiebt sich bzw. bricht um
Frage: ist es richtig, dass man direkt alle Untermenüs sehen kann? Ist das nicht eine Art Aufklappmenü?
Das deutsche Javascript Forum http://forum.jswelt.de
-
17-08-2020, 10:29 #14
Grünschnabel
- registriert
- 29-07-2020
- Beiträge
- 8
AW: Submenus - Menuzeile verschiebt sich bzw. bricht um
Bevor ich den Code zusammengestrichen habe, waren die submenus erst beim hovern auf dem jeweiligen menu-punkt zu sehen.
Die 1st-level-Punkte "subsubsub.." sind 1st-level-Punkte. Habe sie lediglich auf die Schnelle mit rein kopiert, damit, die Zeile auch garantiert mehrfach umbricht.Geändert von uselessmind (17-08-2020 um 17:14 Uhr)
Ähnliche Themen
-
td backgroundimage verschiebt sich??
Von nifibue im Forum CSS und (X)HTMLAntworten: 8Letzter Beitrag: 30-11-2009, 00:54 -
Tabellenzelle vergrößern -> Inhalt verschiebt sich
Von sladda im Forum JavaScriptAntworten: 3Letzter Beitrag: 21-11-2008, 19:07 -
mouse over verschiebt sich
Von nkk im Forum JavaScriptAntworten: 4Letzter Beitrag: 13-03-2008, 22:15 -
Navi verschiebt sich unter Linux
Von Myribo im Forum CSS und (X)HTMLAntworten: 2Letzter Beitrag: 24-02-2006, 23:54 -
Tabelle verschiebt sich!
Von Grimm80 im Forum AllgemeinesAntworten: 1Letzter Beitrag: 15-12-2004, 15:23
Lesezeichen