einsiedler: Sandwich Menue erweitert mit Submenues

Hallo liebe Forumer, hallo Gunnar,

ich habe gerade irgendwie ein Denkknoten, der sich nicht löst.

Dein html für ein Sandwich-Menue (Demo Gunnar) möchte ich noch ein wenig erweitern und zwar dahingehend das sich ein weiteres Untermenue aufklappen lässt. Ich habe Dein Demo etwas modifiziert und alles nötige kopiert, das dann eigentlich funktionieren müsste. Soweit bin ich gekommen: eigene fehlerhafte Demoseite Das erste Untermenue lässt sich aufklappen, die zwei weiteren nicht. Irgendwie ist da etwas fehlerhaft nur find ich ihn nicht.

Bei ausgeschalteten scripten sollen beiderlei Menues (das Sandwich sowie die Untermenüs) aufgeklappt bleiben, das fand ich schon an Deinem Demoscript gut! So wird es wohl gemacht!

Villeicht liegt der Fehler darin, das ich für beide Menus ARIA-Attribute... Blupp benutze und darum funktioniert es nicht. Wie geht es besser?

Gute n8 der einsiedelnde

  1. Hallo einsiedler,

    Villeicht liegt der Fehler darin, das ich für beide Menus ARIA-Attribute... Blupp benutze und darum funktioniert es nicht.

    Vielleicht liegt der Fehler aber auch daran, dass du die ID item mehrfach benutzt.

    Und wie schon oft gesagt: Du brauchst nicht per Hand die Zeile zu beenden, wenn du am Rand des Textfeldes angekommen bist. Der Computer beginnt von selbst eine neue Zeile. Machst du das in der Textverarbeitung etwa auch so??

    Bis demnächst
    Matthias

    --
    Pantoffeltierchen haben keine Hobbys.
  2. Danke für Deine Antwort, die mir nur bedingt hilft. Zumindest hat es mich auf einen Gedanken gebracht, dahingehend das ich bei "ARIA true" die ID ="item" freischalte / on-schalte. Lieber nenne ich item nun toggle-on oder sowas und muss es per script "freischalten". Ist das der richtige weg?

    Gruß der einsiedelnde

    P.S. Ich schreib wie es mir gefällt!

    1. hallo

      Danke für Deine Antwort, die mir nur bedingt hilft. Zumindest hat es mich auf einen Gedanken gebracht, dahingehend das ich bei "ARIA true" die ID ="item" freischalte / on-schalte. Lieber nenne ich item nun toggle-on oder sowas und muss es per script "freischalten". Ist das der richtige weg?

      Persönlich finde ich das JS Schrott, das heisst nur für isolierte Demos geeignet.

      Erst mal ist es in einem Dokument eine wiederkehrende Aufgabe ein Element mit aria-expanded attribut zu manipulieren.

      Zweitens gibt es zahlreiche andere Funktionen, die simples Click-handling brauchen.

      Deshalb erzeugen wir einen globalen Click-Manager

      document.body.addEventListener("click", globalClickManager );

      Dann schreiben wir den ClickManager

      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();
      	}
      }
      

      Alles was wir nun noch im Dokument schreiben müssen (egal wo, egal wie oft) ist

      <button id="someid" aria-expanded="true">Buttonlabel</button>
      <div>
        any Content
        <button data-for-id="someid">Sekundärer Schliess-Button</button>
      </div>
      

      und das CSS ist simpel

      [aria-expanded="false"] + * {display:none}
      
      1. Ich weiß nicht wie mir das weiterhilft, zumindest funktioniert jetzt gar nichts mehr. seufZ

        Was muss jetzt weg, und was bleibt. Ich bin da ein Anfänger, menno. einsiedel

      2. Ist mir ein wenig zu abstrakt gehalten, Deine Angabe! seufZ

        Es sind zweierlei Dinge die auch ineinander greifen. Zu einen das Sandwich-Menue das sich auftut wenn das Bildschirmfenster eine bestimmte Breite erreicht hat, dann noch die toggle-Submenues, beides sollte geöffnet bleiben wenn das js "ausgeschaltet ist (dies macht eigentlich Gunnars script). Puuuh wie stelle ich dies nun an, bin überfordert, wie gesagt, ein Anfänger.

        1. hallo

          Ist mir ein wenig zu abstrakt gehalten, Deine Angabe! seufZ

          Es sind zweierlei Dinge die auch ineinander greifen. Zu einen das Sandwich-Menue das sich auftut wenn das Bildschirmfenster eine bestimmte Breite erreicht hat, dann noch die toggle-Submenues, beides sollte geöffnet bleiben wenn das js "ausgeschaltet ist (dies macht eigentlich Gunnars script). Puuuh wie stelle ich dies nun an, bin überfordert, wie gesagt, ein Anfänger.

          Mach mal eine neue Seite mit:

          <!DOCTYPE html>
          <html lang="de">
          <head>
          <title>undefined</title>
          <style>
          [aria-expanded="false"] + * { display:none;}
          
          @media screen and (min-width:30em){
          	nav [aria-expanded]{ display:none }
          	nav [aria-expanded] + * {display:initial}
          }
          </style>
          </head>
          <body>
          <h1>Beispiel</h1>
          
          <nav>
          	<button aria-expanded="">Menu</button>
          	<section>
          		<button aria-expanded="">Sub1</button>
          		<ul>
          			<li>1.1</li>
          			<li>1.2</li>
          		</ul>
          		<button aria-expanded="">Sub2</button>
          		<ul>
          			<li>2.1</li>
          			<li>2.2</li>
          		</ul>
          	</section>
          </nav>
          
          <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();
          	}
          }
          document.body.addEventListener("click",globalClickManager);
          </script>
          </body>
          </html>
          
          

          Das ist ein Minimalbeispiel, das nur das Notwendige beinhaltet.

          Es ist der Tatsache Rechnung getragen, dass bei breiten Bildschirmen nav Buttons überflüssig sind, aber deren kontrollierte Inhalte agezeigt werden müssen.

          1. Ja, FAST, (wird wohl den Schwierigkeitsgrad erhöhen) bei breiten Bildschirmen sollen auch die Untermenue - toggles erst aufklappbar sein, nicht das sofort die Unterpunkte sichtbar sind!

            Ich bitte Dich, ich bezahle dich für eine anschauliche funktionierende Fassung. Irgendwie habe ich heute keine Gedult und einen dicken unlogischen Knoten im Hirn. Daher benötige ich einen laufende Fassung die ich mir anschauen kann, gegen Bezahlung.

            der einsiedelnde

            1. hallo

              Ja, FAST, (wird wohl den Schwierigkeitsgrad erhöhen) bei breiten Bildschirmen sollen auch die Untermenue - toggles erst aufklappbar sein, nicht das sofort die Unterpunkte sichtbar sind!

              Dann ändere

              <style>
              [aria-expanded="false"] + * { display:none;}
              
              @media screen and (min-width:30em){
              	nav [aria-expanded]{ display:none }
              	nav [aria-expanded] + * {display:initial}
              }
              </style>
              

              nach

              <style>
              [aria-expanded="false"] + * { display:none;}
              
              @media screen and (min-width:30em){
              	nav > [aria-expanded]{ display:none }
              	nav > [aria-expanded] + * {display:initial}
              }
              </style>
              

              Es braucht nur 2 >

              1. Fehler über Fehler... für HEUTE geb ich auf, bin genervt... irgendwas stimmt nicht... guck mal: fehlerhafte seite 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

                1. hallo

                  Fehler über Fehler... für HEUTE geb ich auf, bin genervt... irgendwas stimmt nicht... guck mal: fehlerhafte seite 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.

                  <!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.’&#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>
                  
                  1. Vielen vielen Dank Ihnen. Perfekt... +++... - Stimme

                    der einsiedelnde

                    P.S. Ich schau es mir an und versuche alles zu verstehen.

                  2. Habe noch Nachfragen zu dem script:

                    1. Ist das script, das mit botton`s arbeitet auch für Mobile Geräte benutzbar?

                    2. Als ich <botton> ergoogelt habe las ich einmal irgendwo das man in Bezug mit Mobilen Geräten mit tabindexen arbeiten sollte. Also tabindex="1" ... etc... einfügen, ja oder nein?

                    3. Wie positioniere ich nun die Elemente im <botton> Also den Pfeil (::before) und den Text darunter (+ ::after) wenn ich zum Beispiel dem <botton> etwas mehr width gebe? <botton> ist ein inline Element???

                    abendliche Grüße der einsiedlende

                    1. hallo

                      Habe noch Nachfragen zu dem script:

                      1. Ist das script, das mit botton`s arbeitet auch für Mobile Geräte benutzbar?

                      ja

                      1. Als ich <botton> ergoogelt habe las ich einmal irgendwo das man in Bezug mit Mobilen Geräten mit tabindexen arbeiten sollte. Also tabindex="1" ... etc... einfügen, ja oder nein?

                      Besser nicht nach botton googeln! Es heisst button! Und besser testen als glauben.

                      1. Wie positioniere ich nun die Elemente im <botton> Also den Pfeil (::before) und den Text darunter (+ ::after) wenn ich zum Beispiel dem <botton> etwas mehr width gebe?

                      Wie jedes andere Element auch, indem du den geeigneten display-typ verwendest.

                      Sollten die Pseudoelemente zudem noch absolut positioniert werden, muss der button selber ein position:relative aufweisen.

                      1. Ich habe es fast... seufZ Beispiel Seite Nur wie jetzt diese beiden <button> - elemente in der höhe (oben & unten) positionieren.

                        Gruß der einsiedelnde

                        1. hallo

                          Ich habe es fast... seufZ Beispiel Seite Nur wie jetzt diese beiden <button> - elemente in der höhe (oben & unten) positionieren.

                          Indem du Platz vorsiehst (width/height) und dann mittels top/left/btoom/right-eigenschaften die richtige Platzierung vornimmst.

                          Anderseits weiss ich auch nicht, warum du so was kompliziertes versuchst.

                          Meiner Meinung nach hast du noch eine ganz andere Layout-Frage vor dir.

                          Willst du für breite Bildschirme das Menu offen über mehrere Zeilen? Wieviele Zeilen werden es in Zukunft werden? Ich wollt das für mich nicht. Weiter, sollen diese Menupunkte unterteinander angezeigt werden, oder sollen sie nicht besser nebeneinander angezeigt werden? Auch wenn der Desktop-Buildschirm grösser ist, heisst das nämlich noch lange nicht, dass man da so einen Menu-Klotz ständig offen haben will.

                          1. Ich habe eine vage Idee für das zukünftige Design, daher muss ich mir das ein wenig später überlegen, morgen oder so. Ich schaue mir schon die ganze Zeit über Seiten von Kollegen an und prüfe da was ich da gut finde. Nun aber komme ich nicht weiter, wenn ich bei der jetzigen Script-Konstellation top und left oder right setze wandert der Pfeil ganz anders wohin. Das NICHT-Gelingen ärgert mich jetzt dermassen.

                            Abendlicher Gruß der einsiedelnde

                          2. Egal, ich kümmere mich nun um das Design. Ich lass die Beschriftungen: "Menue öffnen / Untermenue schliessen" etc. einfach weg. So etwas (wie diese Beschriftungen) finde ich auf anderen websites nirgendwo. (Anm: Villeicht hätte man es mit display: table; und display: table-cell; beikommen können.

                            Zum Design erstelle ich mal ein einfaches Demo. Dann siehste das es mit dem Menuepunkten-Wust (villeicht) nicht so schlimm ist!

                            Gruß der einsiedelnde

                    2. Hallo einsiedler,

                      Also tabindex="1" ... etc... einfügen, ja oder nein?

                      Nein.

                      Bis demnächst
                      Matthias

                      --
                      Pantoffeltierchen haben keine Hobbys.