Ankündigung

Einklappen
Keine Ankündigung bisher.

CSS - Display: inline bricht bei Vorhandensein von Submenus scheinbar willkürlich um

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • CSS - Display: inline bricht bei Vorhandensein von Submenus scheinbar willkürlich um

    Moin,

    ich habe ein Problem mit einem erstellten Menu. Die Menuzeile bricht leider scheinbar willkürlich im Firefox (und noch viel öfter im Chrome) an einer Stelle um, an dem es einen Menu-Punkt mit Sub-Menu gibt. Komischerweise tut sie das auch nciht immer.
    Ein zweites Problem ist ein seltsamer hin und her springender Effekt in der mobilen Ansicht des Menus wenn ein oder zwei Sub-Menus ausgeklappt sind und dabei zufällig einen Menu-Punkt einer höheren Ebene überlagern, der ebenfalls ein Submenu enthält. Geht man mit der Maus nach links aus dem ausgeklappten Submenu auf den überlagerten Menu-Punkt der höheren Ebene, fängt alles an hoch und runter zu springen. Das scheint allerdings nur im Chrome zu passieren.

    Weil ich selber merke, dass ich es schlecht erklären kann, hab ich mal den kompletten Code hier: (das ganze ist eigentlich für ein Wordpress-Theme gedacht, ich poste ihn hier ohne PHP aber mit der kompletten css-datei, damit ich nicht versehentlich irgendetwas vergesse.)

    Unter dem Code befindet sich noch ein Screenshot von dem Umbruch in der Menüzeile.

    Wenn mir jemand einen Tip geben kann, woran es liegt bzw. wie man es behebt oder völlig anders viel besser machen kann >>> ich freu mich sehr, vielen Dank!
    HTML-Code:
    <!DOCTYPE html>
    <html  class="no-js">  <!-- class:  css-fallback angaben, falls js nicht aktiviert -->
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" type="text/css" href="test.css" media="screen" />
        <script src="dom-helper.js" defer="defer"></script>
        <script src="menu-button-mobile.js" defer="defer"></script>
    
      </head>
    
    <body >  <!-- fügt abhängig von dargestellter seite unterschiedliche klassen ein, zB home-klasse auf start-seite -->
    
    <!--- sichtbarer header --->
    <header id="header-wrap" class="masthead" role="banner">
    
      <div id="header-content-wrapper" class="header-content-wrapper">
       <!-- <div id="title-container" class="show"> -->
    
          <div id="title-image-container" >
    
          </div>
    
          <div id="site-titel-wrapper">  
            <div class="site-title">
    
            <!--<h2 style="font-size: 1.2em, color: red;"> -->
            <h2 class="site-title">
    
              </h2>
    
            </div>
    
            <div class="sub-title">
    
            <!--<h3 style="font-size: 0.8em" class="blog-description"> -->
            <h3 class="sub-title">
    
    
            </h3>
          </div>
            </div> <!-- site-titel-wrapper -->
    
     <!--  </div>   title-container -->
    
       <div id="menu-container-mobile" class="menu-container-mobile-hide">
        <nav role="navigation" class="menu-mobile">
          <button class="hide-menu-btn">close</button>
    
    
            <ul>
              <li>test1</li>
              <li>test2</li>
              <li>test3</li>
              <li>test4</li>
              <li>test5</li>
              <li>test6</li>
              <li><a href="#"> test7</a>
                <ul class="sub-menu">
                  <li>testtest1</li>
                  <li>testtest2</li>
                  <li>testtest3</li>
                  <li>testtest4</li>
                  <li><a href="#"> testtest5</a>
                    <ul class="sub-menu">
                      <li>subsubsub</li>
                      <li>subsubsub2</li>
                      <li>subsubsub3</li>
                      <li>subsubsub4</li>
                      <li><a href="#"> subsub5</a>
                        <ul class="sub-menu">
                          <li>subsubsub11</li>
                          <li>subsubsub22</li>
                          <li>subsubsub33</li>
                          <li>subsubsub44</li>
                          <li>subsubsub55</li>
                          <li>subsubsub66</li>
                        </ul>
                      </li>
                      <li>subsubsub6</li>
                    </ul>
                  </li>
                  <li>testtest6</li>
                </ul>
              </li>
              <li>test8</li>
              <li>test9</li>
              <li>test3</li>
              <li>test4</li>
              <li>test5</li>
              <li>test6</li>
              <li><a href="#"> test7</a>
                <ul class="sub-menu">
                  <li>testtest1</li>
                  <li>testtest2</li>
                  <li>testtest3</li>
                  <li>datenschutz</li>
                  <li><a href="#"> testtest5</a>
                    <ul class="sub-menu">
                      <li><a href="#"> testtest111</a>
                        <ul class="sub-menu">
                          <li>subsubsub11</li>
                          <li><a href="#"> testtest1111</a>
                            <ul class="sub-menu">
                              <li>subsubsub111</li>
                              <li>subsubsub222</li>
                              <li>subsubsub333</li>
                              <li>subsubsub444</li>
                              <li>subsubsub555</li>
                              <li>subsubsub666</li>
                            </ul>
    
                          </li>
                          <li>subsubsub33</li>
                          <li>subsubsub44</li>
                          <li>subsubsub55</li>
                          <li>subsubsub66</li>
                        </ul>
                      </li>
                      <li>subsubsub2</li>
                      <li>subsubsub3</li>
                      <li>subsubsub4</li>
                      <li><a href="#"> subsub5</a>
                        <ul class="sub-menu">
                          <li>subsubsub11</li>
                          <li>subsubsub22</li>
                          <li>subsubsub33</li>
                          <li>subsubsub44</li>
                          <li>subsubsub55</li>
                          <li>subsubsub66</li>
                        </ul>
                      </li>
                      <li>subsubsub6</li>
                    </ul>
                  </li>
                  <li>testtest6</li>
                </ul>
              </li>
              <li>test8</li>
              <li>test9</li>
              <li><a href="#"> testtest5</a>
                <ul class="sub-menu">
                  <li>testtest1</li>
                  <li>testtest2</li>
                  <li>testtest3</li>
                  <li>testtest4</li>
                  <li><a href="#"> testtest5</a>
                    <ul class="sub-menu">
                      <li>subsubsub</li>
                      <li>subsubsub2</li>
                      <li>subsubsub3</li>
                      <li>subsubsub4</li>
                      <li><a href="#"> subsub5</a>
                        <ul class="sub-menu">
                          <li>subsubsub11</li>
                          <li>subsubsub22</li>
                          <li>subsubsub33</li>
                          <li>subsubsub44</li>
                          <li>subsubsub55</li>
                          <li>subsubsub66</li>
                        </ul>
                      </li>
                      <li>subsubsub6</li>
                    </ul>
                  </li>
                  <li>testtest6</li>
                </ul>
    
              </li>
              <li>test4</li>
              <li>test5</li>
              <li>test6</li>
            </ul>
    
          <button class="hide-menu-btn">close</button>
      </nav>
    
       </div>
    
       <div class="menu-button-wrapper">
         <div id="menu-button" class="show-menu menu-button">
        <div class="menu-button-icon"></div>
        <div class="menu-button-icon"></div>
        <div class="menu-button-icon"></div>
          </div>
       <!--  <p class="menu-button show-menu">&#9776</p>  -->
      </div>
       <div class="menu-container">
            <div id="menu-wrapper" class="menu-wrapper">
            <nav role="navigation" class="menu">
    
              <ul>
                <li><a href="#"></a> test1</a></li>
                <li>test2</li>
                <li>test3</li>
                <li>test4</li>
                <li>test5</li>
                <li>test6</li>
                <li><a href="#"> test7</a>
                  <ul class="sub-menu">
                    <li>testtest1</li>
                    <li>testtest2</li>
                    <li>testtest3</li>
                    <li>testtest4</li>
                    <li><a href="#"> testtest5</a>
                      <ul class="sub-menu">
                        <li>subsubsub</li>
                        <li>subsubsub2</li>
                        <li>subsubsub3</li>
                        <li>subsubsub4</li>
                        <li><a href="#"> subsubsub5</a>
                          <ul class="sub-menu">
                            <li>subsubsub11</li>
                            <li>subsubsub22</li>
                            <li>subsubsub33</li>
                            <li>subsubsub44</li>
                            <li>subsubsub55</li>
                            <li>subsubsub66</li>
                          </ul>
                        </li>
                        <li>subsubsub6</li>
                      </ul>
                    </li>
                    <li>testtest6</li>
                  </ul>
                </li>
                <li>test8</li>
                <li>test9</li>
                <li>test8</li>
                <li>test9</li>
                <li>test8</li>
                <li>test9</li>
                <li>test8</li>
                <li>test9</li>
              </ul>
            </nav>
          </div>
    
    
        </div>
    
      </div> <!-- header-content-wrapper -->
    
      </header>
    

    Code:
    @import url('https://fonts.googleapis.com/css2?family=Archivo&family=Gruppo&family=Ubuntu:wght@500&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Patua+One&display=swap');
    /*for Customizer-Selection: */
    @import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Black+Ops+One&family=Dosis:wght@200;300;400;500;600;700;800&family=Expletus+Sans:ital,wght@0,400;0,600;1,500&family=Farsan&family=Galada&family=Gayathri:wght@100;400;700&family=Great+Vibes&family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Lato:ital,wght@0,100;0,900;1,300;1,700;1,900&family=Lobster&family=Marck+Script&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500;1,600&family=Oleo+Script:wght@400;700&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playball&family=Poiret+One&family=Roboto:ital,wght@0,100;0,400;0,500;0,900;1,400;1,900&family=Saira+Extra+Condensed:wght@100;200;300;400;500;600;700;800;900&family=Saira+Stencil+One&family=Special+Elite&family=UnifrakturMaguntia&display=swap');
    
    
    /*  ***************************************************************
    *******************************************************************
    HEADER
    *********************************************************************
    ***************/
    
    
    html {
      max-width: 1602px;
      margin-left: auto;
      margin-right: auto;
    
    }
    
    #header-wrap {
      z-index: 10000;
      margin-bottom: 0px;
    }
    
    .masthead {
      display: grid;
        grid-template-rows:1fr 10px;
        grid-template-columns: 100%;
        grid-auto-flow: column;
      width: 100%;
      max-width: px;
      min-width: px;
    
    
    }
    
    
    .header-content-wrapper {  /* class = masthead */
      grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
      display: grid;
     /*   grid-template-rows:10px 1fr 10px;
          grid-template-columns: 20% 80%; */
          grid-template-rows:10px minmax(50px, 70px) 1em auto 10px;
          grid-template-columns: 20% 80%;
    
    
        grid-auto-flow: column;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      height: 600px;
    
      width: 100%;
      max-width: 1600px;
    
    }
    
    
    
    .show {
      width: 100%;
      opacity: 1;
      visibility: visible;
      -webkit-transition: opacity 3s, visibility 1s, width 1s;
      transition: opacity 3s, visibility 1s, width 1s;
    }
    
    .hide {
        width: 0%;
        visibility: hidden;
        opacity: 0;
    
        -webkit-transition: opacity 1s, visibility 1s, width 1s;
        transition: opacity 1s, visibility 1s, width 1s;
    }
    
    #title-image-container {   /* im grid von: header-content-wrapper */
      grid-column-start: 1;  
      grid-column-end: 2;
      grid-row-start: 2;
      grid-row-end: 3;
    
      margin-left: 15px;
      margin-top: 5px;
      border-radius: 0px;
      background-size: contain;
      -webkit-background-size: contain;
      -moz-background-size: contain;
      -o-background-size: contain;
    
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    
    }
    
    #site-titel-wrapper {
    
      grid-column-start: 1;  
      grid-column-end: 3;
      grid-row-start: 4;
      grid-row-end: 5;
    
      display: grid;
        grid-template-rows:minmax(2em, 3em) minmax(0em, 3em);   /*braucht scroll-klasse mit einer zeile weniger*/
        grid-template-columns: 100%;
        grid-auto-flow: column;
    
    
    }
    
    .menu-container {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 3;
        display: grid;
        grid-template-rows:5px 1fr 80%;
        grid-template-columns: 100%;
        grid-auto-flow: column;
        opacity: 0.8;
    
    }
    
    
    .menu-container-mobile-hide {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 2;
        grid-row-end: 4;
        z-index: 99;
        opacity: 0;
        visibility: hidden;
        width: 95%;
        max-width: 300px;
        padding: 10px;
    
    }
    
    .menu-container-mobile-show {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 2;
        grid-row-end: 4;
    
        z-index: 99;
        width: 95%;
        min-height: 400px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
             box-sizing: border-box;
    
        max-width: 300px;
        opacity: 1;
      visibility: visible;
      padding: 10px;
    
      -webkit-transition: opacity 2s, visibility 1s;
      transition: opacity 2s, visibility 1s;
        position: fixed;
        overflow: scroll;
    
    }
    
    .hide-menu-btn {  /*der close-button im aufgeklappten mobile-menu */
        float: right;
        transition-timing-function: ease-in;
        transition: width 2s;
    
    }
    
     .menu-button-wrapper {
       background-color: ;
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 3;
        float: right;
     }
    
     #menu-button {
         float: right;
         padding-top: 1em;
     }
    
    .menu-button-icon {
      width: 35px;
      height: 5px;
      background-color: black;
      margin: 6px 0;
      margin-right: 20%;
    }
    
    /*****************************************************************
    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
    *********************************************************************/
    
    @media (min-width: 1001px) {
    
      .masthead {
        display: grid;
          grid-template-rows:1fr 20px;
          grid-template-columns: 100%;
          grid-auto-flow: column;
        height: 600px;
        min-width: 320px;
      }
    
      .header-content-wrapper {  /* class = masthead */
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
       /* display: grid;
          grid-template-rows:10px 1fr 10px;
          grid-template-columns: 25% 75%;
          grid-auto-flow: column; */
          display: grid;
          /*   grid-template-rows:10px 1fr 10px;
               grid-template-columns: 20% 80%; */
               grid-template-rows:10px minmax(50px, 200px) 1em auto 10px;
               grid-template-columns: 30% 70%;
    
    
             grid-auto-flow: column;  
    
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        height: 600px;
    
      }
    
    
      #menu-button {
        display: none;
        overflow: hidden;
      }
    
      #title-container {
          grid-column-start: 1;
          grid-column-end: 3; /*damit lange seitentitel nicht umgebrochen werden auch bis column 3*/
          grid-row-start: 2;
          grid-row-end: 3;
          display: grid;
         grid-template-rows: minmax(3em, 10em) minmax(1.2em, 2em) minmax(1.1em, 2em) minmax(2em, 1fr);
       /* grid-template-rows:30% 9% 8% 61%; */
            grid-template-columns: 100%;
            grid-auto-flow: column;
          font-family: 'Gruppo', cursive;
          hyphens: none;
          min-width: 250px;
          -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
      }
    
    
    } /*************END @media (min-width: 1001px) ******************/
    
      @media (max-width: 1000px) {
        .masthead {
          display: grid;
            grid-template-rows:1fr 0px;
            grid-template-columns: 100%;
            grid-auto-flow: column;
          height: 260px;
          min-width: 320px;
    
        }
    
    
        .header-content-wrapper {  /* class = masthead */
    
            grid-column-start: 1;
            grid-column-end: 2;
            grid-row-start: 1;
            grid-row-end: 2;
            display: grid;
            grid-template-rows:10px minmax(50px, 70px) 1em auto 10px;
            grid-template-columns: 20% 80%;
            grid-auto-flow: column;
          border-bottom-left-radius: 10px;
          border-bottom-right-radius: 10px;
          height: 250px;
    
        }
    
    
      .menu-container {
          display: none;
      }
    
      #menu-button {
    
          float: right;
          padding-top: 1em;
          margin-right: 60px;
      }
    
    
    } /*******END @media (max-width: 1000px)******************************/
    
    
    @media (max-width: 480px) {
        .masthead {
            display: grid;
              grid-template-rows:1fr 30px;
              grid-template-columns: 100%;
              grid-auto-flow: column;
            height: 260px;
            min-width: 320px;
            background: ;
    
        }
    
        .header-content-wrapper {  /* class = masthead */
          grid-column-start: 1;
          grid-column-end: 2;
          grid-row-start: 1;
          grid-row-end: 2;
          display: grid;
            grid-template-rows:10px auto 10px;
            grid-template-columns: 75% 25%;
            grid-auto-flow: column;
          border-bottom-left-radius: 10px;
          border-bottom-right-radius: 10px;
        }
    
        #title-container {
          grid-column-start: 1;
          grid-column-end: 3;
          grid-row-start: 2;
          grid-row-end: 3;
          display: grid;
            grid-template-rows:70% 15% 15%;
            grid-template-columns: 100%;
            grid-auto-flow: column;
          min-width: 0px;
          padding: 5px;
          hyphens: none;
        }
    
        #menu-button {
            z-index: 1000;
            float: right;
            padding-top: 1em;
            margin-right: 40px;
        }
    
        .menu-button-wrapper {
          grid-column-start: 2;
          grid-column-end: 3;
          grid-row-start: 2;
          grid-row-end: 3;
          float: right;
        }
    
    
    } /****************END @media (max-width: 480px) ****************/
    
    
    
    /*************************
    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 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;
    
    }
    
    nav.menu-mobile ul li ul li:first-child {
      border-top: 1px solid black;
    }
    
    nav.menu-mobile ul li ul li  a{
      color: black;
    }
    
    /* ------------------ 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 */
    Code:
    "use strict";
      {
      constheaderElement = $('header');
      constheaderContentWrapperElement = $('#header-content-wrapper');
      constmenuContainerElement = $('.menu-container');
      constmenuCloseButtonElement = $$('.hide-menu-btn');
      constmenuOpenButtonElement = $('.show-menu');
      constmenuMobileElement = $('#menu-container-mobile');
      consttitleContainerElement =$('#title-container');
      constmenuElement = $('.menu-wrapper');
        constsubTitleElement = $('.sub-title');
      constsubMenuElements = $$('.sub-menu');
    
    //button element for mobile menu:
        constshowMobileMenu = e=> {
      menuMobileElement.classList.remove('menu-container-mobile-hide')
      menuMobileElement.classList.add('menu-container-mobile-show')
    
      }
        constcloseMobileMenu = e=> {
      menuMobileElement.classList.remove('menu-container-mobile-show')
      menuMobileElement.classList.add('menu-container-mobile-hide')
    
      }
        menuOpenButtonElement.addEventListener('click', showMobileMenu);
      menuCloseButtonElement.addEventListener('click', closeMobileMenu);
        //sticky header on scroll:
        window.addEventListener('scroll', function(e) {
      if(document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
      headerElement.classList.add('masthead-onscroll');
      headerElement.classList.remove('masthead');
      headerContentWrapperElement.classList.add('header-content-wrapper-onscroll');
      headerContentWrapperElement.classList.remove('header-content-wrapper');
      subTitleElement.style.display = 'none'; //disapears in the scroll-header
      //notwendig, da header-height im customizer vom user verändert werden kann.
      $('#page-content').style.paddingTop = $('.header-content-wrapper-onscroll').offsetTop + $('.header-content-wrapper-onscroll').offsetHeight + $('.entry-header').offsetHeight +'px';
      menuContainerElement.classList.add('menu-container-onscroll');
      menuContainerElement.classList.remove('menu-container');
      menuElement.classList.add('menu-wrapper-onscroll');
      menuMobileElement.classList.add('onscroll');
      pageContentElement.classList.add('scrolled');
      }
      else {
      headerElement.classList.remove('masthead-onscroll');
      headerElement.classList.add('masthead');
      headerContentWrapperElement.classList.add('header-content-wrapper');
      headerContentWrapperElement.classList.remove('header-content-wrapper-onscroll');
      $('#page-content').style.paddingTop = '0px'; //kein padding notwendig da vorhergehend elemente nicht "fixed" sind, wie bei der gescrollten ansicht,
    
      window.innerWidth > 480 ? subTitleElement.style.display = 'block' : '';
    
      menuContainerElement.classList.remove('menu-container-onscroll');
      menuContainerElement.classList.add('menu-container');
      menuElement.classList.remove('onscroll');
      menuElement.classList.remove('menu-wrapper-onscroll');
      menuMobileElement.classList.remove('onscroll');
      pageContentElement.classList.remove('scrolled');
      }
      });
        //modification of the main- and mobile menu elements
      constsetZIndex = e=> {
      e.target.children[1].classList.add('ulSubMenuMarginLeft');
      e.target.children[1].style.zIndex = e.target.children[1].style.zIndex + 1;
      if (!e.target.parentElement.classList.contains('sub-menu')) e.target.classList.remove('ulSubMenuMarginLeft');
      }
        constremoveZIndex = e=> {
      e.target.classList.remove('ulSubMenuMarginLeft');
      }
        subMenuElements.forEach(el=> {
      el.parentElement.firstChild.innerHTML += "&nbsp; ❯"
      el.parentElement.addEventListener('mouseenter', setZIndex);
      el.parentElement.addEventListener('mouseleave', removeZIndex);
      }
      );
    Code:
    
    
    menu-verschoben.png

  • #2
    moin,

    der HTML Code wäre mit zeielnumbruch besser, css und js kann ich einfach nicht lesen .
    dass der gepostete Coide mi nimalisiert ist, wage ich zu bezweifeln.

    Kommentar


    • #3
      bringe doch erst mal dein CSS auf einen validen Stand, Zeilen wie
      HTML-Code:
      border-top: 1pxsolidlightgray;
      und weitere sind nicht OK

      Kommentar


      • #4
        Erstmal vielen Dank für Euer Interesse. Ich kann den CSS und JS Code hier wegen der farblichen Darstellung leider auch nicht lesen, ist mir heute Nacht nicht aufgefallen, ich hab alles auf schwarz umgestellt.

        Nein, den Code habe ich nicht in einen Minifier gesteckt, falls du das meinst. Danach hätte man ihn noch viel schlechter lesen können, wenn 10 Zeilen in eine gepackt werden.

        "
        border-top: 1pxsolidlightgray;" >> Ich bin auch der Meinung, dass da Leerzeichen reingehören. Deswegen sind sie im Original auch drin. Beim reinkopieren hier in das Forum verschwinden sie leider. Ausserdem wurden einige CSS-ID's und Klassen verstümmelt mit "ulliulli".
        Tut mir leid, ich weiß leider nicht woran das liegt - sehe aber, dass sich jetzt niemand einfach den Code kopieren und ausprobieren kann, so wie gedacht.

        Vielleicht kann ja jemand wenigstens anhand des Screenshots etwas sagen?

        Kommentar


        • #5
          Schau es dir mit den browsereigenen Werkzeugen mal an. F12 und dann inspect element auswählen, dann dürfte dir das entsprechende CSS angezeigt werden und du kannst selber nachsehen.
          So ist das für niemanden nachvollziehbar. Wenn du zudem Code hier reinpackst und du feststellst dass da was nicht stimmt, dann korrigiere es, wie sollen wir sonst wissen was von dir stammt und was nicht.

          Evtl. hilft es auch wenn du deinen Editor mal gegen einen anderen austauschst, andere scheinen ja keine Probleme zu haben hier Code einzufügen der auch lesbar eingerückt erscheint.

          Kommentar


          • #6
            Zitat von konfusius Beitrag anzeigen
            (..)
            Nein, den Code habe ich nicht in einen Minifier gesteckt, falls du das meinst. Danach hätte man ihn noch viel schlechter lesen können, wenn 10 Zeilen in eine gepackt werden.
            nein, ich meine keinen minfer, sondern Code der auf das notwenduigste beschränkt ist, um deine Sorgen darzustellen.

            Kommentar


            • #7
              Ich bin nicht sicher warum ich mir das CSS mit dem Inspektor anzeigen lassen soll (ich arbeite übrigens die ganze Zeit mit dem Inspektor).
              Der Editor ist Visual Studio Code, es fehlt lediglich das allerletzte Update, daran werde ich seit einer Woche oder so erinnert. Daran wirds ja wohl nicht liegen.

              Ich ändere den HTML-Teil jetzt nochmal manuell.

              Kommentar


              • #8
                Okay, ich hab alles nochmal bearbeitet. Nachdem ich den Code von Visual Studio Code zu gphpedit übertragen hatte, konnte ich ihn von dort aus auch ohne Fehler hierher kopieren.

                Kommentar


                • #9
                  Kannst du mal ein funktionierendes Beispiel posten ( zb Codepen ).
                  So kann man das nicht testen.
                  menuOpenButtonElement not defined
                  menuCloseButtonElement noz defined
                  $$ ist auch not defined
                  Jquery Fehlt
                  Klammer Probleme

                  Das Jquery und Vanilla gemische ist gerade auch nicht schön.
                  Wäre gut wenn da alles dabei ist damit das auch testen kann und sehen was da falsch läuft
                  Ich mach keine Rechtschreibfehler - ich schreib Freestyle!
                  Erreichbar in mein Javascript-Forum und in Facebook-Chat

                  Kommentar


                  • #10
                    Oh, entschuldige, dachte nicht, dass hier noch was kommt.

                    Ich hab alles was unnötig ist rausgenommen:

                    https://jsfiddle.net/82fpvnob/25/

                    >> rechts unten in dem fiddle sind nur noch 1st-level-menu-punkte zu sehen. auch wenn sie "subsubsub.." heißen.
                    Der Punkt "test7" enthält submenus. An den auf "test7" nachfolgenden 1st-level-menu-punkten sieht man die verschiebung um die es geht.

                    Zeile: 36: bis zu einer schriftgröße von 1.0 rem funktionierts, ab 1.1rem leider nicht mehr.


                    jquerry hatte ich nicht verwendet. alles andere ($$, menuOpenButtonElement etc. hat in deiner ansicht nicht funktioniert, weil ich den code hier für das forum stark reduzieren sollte.

                    Das hier wäre das Original gewesen:

                    https://jsfiddle.net/19k43wzf/


                    Kommentar

                    Lädt...
                    X