nicht angemeldet
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.’ ”</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>
Matthias Apsel