Ergebnis 1 bis 14 von 14
  1. #1
    uselessmind ist offline 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 */
    Angehängte Grafiken Angehängte Grafiken

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.744

    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.

  3. #3
    uselessmind ist offline 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!!

  4. #4
    Avatar von mikdoe
    mikdoe ist gerade online Administrator
    registriert
    01-05-2010
    Beiträge
    7.779

    AW: Submenus - Menuzeile verschiebt sich bzw. bricht um

    Zitat Zitat von uselessmind Beitrag anzeigen
    Ich würde dir den Code samt JS gern hier irgendwie reinstellen, sehe aber keine Möglichkeit.
    Mach' bitte mit dem auf das Problem reduzierten Code ein fiddle und poste hier dessen Link.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png

  5. #5
    uselessmind ist offline 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.

  6. #6
    Avatar von mikdoe
    mikdoe ist gerade online Administrator
    registriert
    01-05-2010
    Beiträge
    7.779

    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 http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png

  7. #7
    uselessmind ist offline 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.

  8. #8
    uselessmind ist offline 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.

  9. #9
    Avatar von mikdoe
    mikdoe ist gerade online Administrator
    registriert
    01-05-2010
    Beiträge
    7.779

    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 http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png

  10. #10
    uselessmind ist offline 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.

  11. #11
    Avatar von mikdoe
    mikdoe ist gerade online Administrator
    registriert
    01-05-2010
    Beiträge
    7.779

    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 http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png

  12. #12
    uselessmind ist offline 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.

  13. #13
    Avatar von mikdoe
    mikdoe ist gerade online Administrator
    registriert
    01-05-2010
    Beiträge
    7.779

    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 http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png

  14. #14
    uselessmind ist offline 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 16:14 Uhr)

Ähnliche Themen

  1. td backgroundimage verschiebt sich??
    Von nifibue im Forum CSS und (X)HTML
    Antworten: 8
    Letzter Beitrag: 29-11-2009, 23:54
  2. Antworten: 3
    Letzter Beitrag: 21-11-2008, 18:07
  3. mouse over verschiebt sich
    Von nkk im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 13-03-2008, 21:15
  4. Navi verschiebt sich unter Linux
    Von Myribo im Forum CSS und (X)HTML
    Antworten: 2
    Letzter Beitrag: 24-02-2006, 22:54
  5. Tabelle verschiebt sich!
    Von Grimm80 im Forum Allgemeines
    Antworten: 1
    Letzter Beitrag: 15-12-2004, 14:23

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •