Ergebnis 1 bis 8 von 8
  1. #1
    uselessmind ist offline Grünschnabel
    registriert
    29-07-2020
    Beiträge
    5

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

    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
    5

    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 offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.758

    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
    5

    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 offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.758

    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
    5

    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
    5

    AW: Submenus - Menuzeile verschiebt sich bzw. bricht um

    hat niemand eine idee, woran es liegt?

    ich bedanke mich aber trotzdem.

Ä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
  •