Sandwich Menue erweitert mit Submenues bearbeitet von beatovich 04.11.2018 13:08 hallo > Fehler über Fehler... für HEUTE geb ich auf, bin genervt... irgendwas stimmt nicht... guck mal: [fehlerhafte seite](https://www.tassilosturm.de/index_sanwichV2.html) Für heute gute n8... wenn Du mir noch sagen kannst was da nicht stimmt.... Anm2 Ich benötige das span element (kann auch etwas anderes sein , ein div etc.) um die einzelnen SUB-items "zusammenzufassen" bzw. "optisch stylisch auszuschmücken", dann geht aber gar nichts mehr... *seufZ* ... nicht einmal mehr das Sandwich... *seufZ* > > der genervte einsiedelnde Ich habe sehr viel Code Schrott entfernt, das Javascript erweitert (init funtion) und Tests gemacht. ~~~html <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Navigation mit Sandwich </title> <meta name="description" content="HTML5, CSS3"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> *{margin:0; box-sizing:border-box;} html{font-size:1em; line-height:1.5;background:#fff;color:#000;} body{ padding: 0; } /* header Block */ header{ padding: 1em 4vw; background: hsl(40, 100%, 60%); color: black; font-family: sans-serif; } header h1{ margin: 0.5em 0; font-size: 1.25em; display: inline-block; vertical-align: middle; } /* nav specific */ nav > button {margin-left:auto; display:block; width:11rem; } nav > ul, nav > ul > li { margin:0; padding:0; display:block;} nav > ul > li { display:flex; flex-flow:row wrap; } nav > ul > li > :nth-child(1){display:block; width:calc( 100% - 11rem); } nav > ul > li > :nth-child(2){display:block; width:11rem; } nav > ul > li > :nth-child(3){display:block; width:100% } .nav-group{ box-shadow: 0 0 0.2em 0 #666; padding: 0.2em 5vw; margin: 0.2em 0;} .nav-group a{display:block;} nav button:hover, nav button:focus { background: hsla(0, 100%, 100%, 0.8); } /* Buttons mit Icons anreichern */ [aria-expanded]::before { content: "↑ "; } nav > [aria-expanded]::before { content: "× "; } [aria-expanded]::after { content: " schliessen"; } [aria-expanded="false"]::before { content: "↓ "; } nav > [aria-expanded="false"]::before { content: "☰ "; } [aria-expanded="false"]::after { content: " öffnen"; } [aria-expanded="false"] + * { display:none!important;} @media screen and (min-width:30em){ nav > [aria-expanded]{ display:none; } nav > [aria-expanded] + * {display:block !important; } } /* Skiplink*/ #skip-link{ position: absolute; left: 0; top: 0; padding: 0.25em; background: black; color: white; text-decoration: inherit; transform: translateY(-100%); transition: 0.2s transform; } #skip-link:focus { transform: translateY(0); } /* General */ main{ max-width: 40em; padding: 1em; font: 1em/1.4 Georgia } blockquote{ margin: 1em; font-style: italic; } p{ font-size: 1.25em; } blockquote footer{ display: flex; } blockquote cite{ font-style: normal; } .visually-hidden{ position: absolute !important; clip: rect(1px, 1px, 1px, 1px); padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden; white-space: nowrap; } </style> </head> <body> <header> <a href="#main-content" id="skip-link">skip navigation</a> <h1>Responsive design</h1> <nav id="main-nav"> <button aria-expanded="">Menu</button> <ul> <li> <a href="http://tassilosturm.de">Aktuelles</a> <button aria-expanded="">Untermenü</button> <div class=nav-group> <a href="http://misanthrop.bplaced.net/sturm/ausstellungen.html">Ausstellungen</a> <a href="http://misanthrop.bplaced.net/sturm/ausstellungen.html">Publikationen</a> </div> </li> <li> <a href="http://tassilosturm.de">Arbeiten</a> <button aria-expanded="">Untermenü</button> <div class=nav-group> <a href="http://misanthrop.bplaced.net/sturm/arbeit01.html">Arbeit 1</a> <a href="http://misanthrop.bplaced.net/sturm/arbeit02.html">Arbeit 2</a> <a href="http://misanthrop.bplaced.net/sturm/arbeit02.html">Arbeit 3</a> </div> </li> <li> <a href="http://tassilosturm.de">Impressum</a> <button aria-expanded="">Untermenü</button> <div class=nav-group> <a href="http://misanthrop.bplaced.net/sturm/impressum.html">Kontakt</a> <a href="http://misanthrop.bplaced.net/sturm/impressum.html">Impressum</a> <a href="http://misanthrop.bplaced.net/sturm/impressum.html">Fotodokumentation</a> <a href="http://misanthrop.bplaced.net/sturm/impressum.html">Links</a> <a href="http://misanthrop.bplaced.net/sturm/impressum.html">Datenschutz</a> </div> </li> </ul> </nav> </header> <main id="main-content" tabindex="-1"> <blockquote> <p class="hanging-punctuation">“The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this <span class="visually-hidden">flexibility</span><span aria-hidden="true">flexibility</span>. But <span class="visually-hidden">first</span><span aria-hidden="true">first</span>, we must ‘accept the ebb and <span class="visually-hidden">flow</span><span aria-hidden="true">flow</span> of things.’ ”</p> <footer>—<cite class="hanging-punctuation">John Allsopp, “A Dao of Web Design”</cite></footer> </blockquote> </main> </body> <script> function globalClickManager(ev){ // ev.target gibt uns das Element auf dem der Click geschah. // steuere expanded Buttons if(ev.target.hasAttribute("aria-expanded") ){ ev.target.setAttribute("aria-expanded", ( ev.target.getAttribute("aria-expanded") == "false") ); } // Buttons die lediglich den Click transferieren ähnlich zu label Elementen else if(ev.target.hasAttribute("data-for-id") ){ document.getElementById( ev.target.getAttribute("data-for-id") ).click(); } } function init(){ var col = document.querySelectorAll("nav [aria-expanded]"); for(var i=0; i<col.length; i++){ col[i].setAttribute("aria-expanded","false"); } document.body.addEventListener("click",globalClickManager); } document.addEventListener("DOMContentLoaded", init, false); </script> </html> ~~~ -- <https://beat-stoecklin.ch/pub/index.html>
Sandwich Menue erweitert mit Submenues bearbeitet von beatovich 04.11.2018 13:10 hallo > Fehler über Fehler... für HEUTE geb ich auf, bin genervt... irgendwas stimmt nicht... guck mal: [fehlerhafte seite](https://www.tassilosturm.de/index_sanwichV2.html) Für heute gute n8... wenn Du mir noch sagen kannst was da nicht stimmt.... Anm2 Ich benötige das span element (kann auch etwas anderes sein , ein div etc.) um die einzelnen SUB-items "zusammenzufassen" bzw. "optisch stylisch auszuschmücken", dann geht aber gar nichts mehr... *seufZ* ... nicht einmal mehr das Sandwich... *seufZ* > > der genervte einsiedelnde Ich habe sehr viel Code Schrott entfernt, das Javascript erweitert (init funtion) und Tests gemacht. ~~~html <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Navigation mit Sandwich </title> <meta name="description" content="HTML5, CSS3"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> *{margin:0; box-sizing:border-box;} html{font-size:1em; line-height:1.5;background:#fff;color:#000;} body{ padding: 0; } /* header Block */ header{ padding: 1em 4vw; background: hsl(40, 100%, 60%); color: black; font-family: sans-serif; } header h1{ margin: 0.5em 0; font-size: 1.25em; display: inline-block; vertical-align: middle; } /* nav specific */ nav > button {margin-left:auto; display:block; width:11rem; } nav > ul, nav > ul > li { margin:0; padding:0; display:block;} nav > ul > li { display:flex; flex-flow:row wrap; } nav > ul > li > :nth-child(1){display:block; width:calc( 100% - 11rem); } nav > ul > li > :nth-child(2){display:block; width:11rem; } nav > ul > li > :nth-child(3){display:block; width:100% } .nav-group{ box-shadow: 0 0 0.2em 0 #666; padding: 0.2em 5vw; margin: 0.2em 0;} .nav-group a{display:block;} nav button:hover, nav button:focus { background: hsla(0, 100%, 100%, 0.8); } /* Buttons mit Icons anreichern */ [aria-expanded]::before { content: "↑ "; } nav > [aria-expanded]::before { content: "× "; } [aria-expanded]::after { content: " schliessen"; } [aria-expanded="false"]::before { content: "↓ "; } nav > [aria-expanded="false"]::before { content: "☰ "; } [aria-expanded="false"]::after { content: " öffnen"; } [aria-expanded="false"] + * { display:none!important;} @media screen and (min-width:30em){ nav > [aria-expanded]{ display:none; } nav > [aria-expanded] + * {display:block !important; } } /* Skiplink*/ #skip-link{ position: absolute; left: 0; top: 0; padding: 0.25em; background: black; color: white; text-decoration: inherit; transform: translateY(-100%); transition: 0.2s transform; } #skip-link:focus { transform: translateY(0); } /* General */ main{ max-width: 40em; padding: 1em; font: 1em/1.4 Georgia } blockquote{ margin: 1em; font-style: italic; } p{ font-size: 1.25em; } blockquote footer{ display: flex; } blockquote cite{ font-style: normal; } .visually-hidden{ position: absolute !important; clip: rect(1px, 1px, 1px, 1px); padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden; white-space: nowrap; } </style> </head> <body> <header> <a href="#main-content" id="skip-link">skip navigation</a> <h1>Responsive design</h1> <nav id="main-nav"> <button aria-expanded="">Menu</button> <ul> <li> <a href="http://tassilosturm.de">Aktuelles</a> <button aria-expanded=""><span class="toggle screen-reader-text">Untermenü</button> <div class=nav-group> <a href="http://misanthrop.bplaced.net/sturm/ausstellungen.html">Ausstellungen</a> <a href="http://misanthrop.bplaced.net/sturm/ausstellungen.html">Publikationen</a> </div> </li> <li> <a href="http://tassilosturm.de">Arbeiten</a> <button aria-expanded="">Untermenü</button> <div class=nav-group> <a href="http://misanthrop.bplaced.net/sturm/arbeit01.html">Arbeit 1</a> <a href="http://misanthrop.bplaced.net/sturm/arbeit02.html">Arbeit 2</a> <a href="http://misanthrop.bplaced.net/sturm/arbeit02.html">Arbeit 3</a> </div> </li> <li> <a href="http://tassilosturm.de">Impressum</a> <button aria-expanded="">Untermenü</button> <div class=nav-group> <a href="http://misanthrop.bplaced.net/sturm/impressum.html">Kontakt</a> <a href="http://misanthrop.bplaced.net/sturm/impressum.html">Impressum</a> <a href="http://misanthrop.bplaced.net/sturm/impressum.html">Fotodokumentation</a> <a href="http://misanthrop.bplaced.net/sturm/impressum.html">Links</a> <a href="http://misanthrop.bplaced.net/sturm/impressum.html">Datenschutz</a> </div> </li> </ul> </nav> </header> <main id="main-content" tabindex="-1"> <blockquote> <p class="hanging-punctuation">“The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this <span class="visually-hidden">flexibility</span><span aria-hidden="true">flexibility</span>. But <span class="visually-hidden">first</span><span aria-hidden="true">first</span>, we must ‘accept the ebb and <span class="visually-hidden">flow</span><span aria-hidden="true">flow</span> of things.’ ”</p> <footer>—<cite class="hanging-punctuation">John Allsopp, “A Dao of Web Design”</cite></footer> </blockquote> </main> </body> <script> function globalClickManager(ev){ // ev.target gibt uns das Element auf dem der Click geschah. // steuere expanded Buttons if(ev.target.hasAttribute("aria-expanded") ){ ev.target.setAttribute("aria-expanded", ( ev.target.getAttribute("aria-expanded") == "false") ); } // Buttons die lediglich den Click transferieren ähnlich zu label Elementen else if(ev.target.hasAttribute("data-for-id") ){ document.getElementById( ev.target.getAttribute("data-for-id") ).click(); } } function init(){ var col = document.querySelectorAll("nav [aria-expanded]"); for(var i=0; i<col.length; i++){ col[i].setAttribute("aria-expanded","false"); } document.body.addEventListener("click",globalClickManager); } document.addEventListener("DOMContentLoaded", init, false); </script> </html> ~~~ -- <https://beat-stoecklin.ch/pub/index.html>
nicht angemeldet
