Versionen dieses Beitrags

Sandwich Menue erweitert mit Submenues

Missing beatovich
  • Sandwich Menue erweitert mit Submenues
  • 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>
  • <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.’&#x202F;”</p>
  • <footer>—<cite class="hanging-punctuation">John Allsopp, “A&nbsp;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>