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!
menu-verschoben.png
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">☰</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 += " ❯" el.parentElement.addEventListener('mouseenter', setZIndex); el.parentElement.addEventListener('mouseleave', removeZIndex); } );
Code:
Kommentar