No replies
Thu, 2020-07-30 07:30
konfusius
konfusius's picture
Offline
newbie
Last seen: 7 weeks 6 days ago
Timezone: GMT+2
Joined: 2020-07-30
Posts: 1
Points: 2

hello, i have problems with a submenu navigation. the first level has "display: inline; float: left;" . At every menu item that contains a submenu, the line unfortunately breaks, or there are indentations that move everything. can be seen on the screenshot.

203/5000
a second problem in the mobile view is:

if two points of different levels, which both contain sub-menus, happen to overlap >> then everything starts to bounce in chrome when hovering.

can someone give me a tip? Many thanks!! (I can put in the complete code including js if necessary so that it can be tested.)

<!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> 
 

/*****************************************************************
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%;
}
 
 
/*************************
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;
  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;
}
 
/* ------------------ 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 */

AttachmentSize
menu-verschoben.png107.67 KB
Top
  • Login or register to post comments
Tags: