Siri: Off-Canvas: Wieso funktioniert das Schließen?

Beitrag lesen

SELF-Forum

Off-Canvas: Wieso funktioniert das Schließen?

Siri
– Informationen zu den Bewertungsregeln

Hallo,

ich habe hier das folgende Beispiel gefunden:

<!Doctype html>  
<html>  
  <head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <style type="text/css">

* {  
	margin:0;  
	padding:0;  
}  
html, body {  
	height:100%;  
	overflow-x:hidden;  
}  
.navMain, #content {  
	-webkit-transition: all .3s ease-in-out;  
	-moz-transition: all .3s ease-in-out;  
	-ms-transition: all .3s ease-in-out;  
	-o-transition: all .3s ease-in-out;  
	transition: all .3s ease-in-out;  
}  
.navMain {  
	width:240px;  
	height:100%;  
	position:fixed;  
	left:-240px;  
	background:gray;  
}  
#content {  
	margin-left:20px;  
	padding-top:20px;  
}  
#openBtn, #closeBtn {  
	width:40px;  
	height:40px;  
	margin:0 0 20px 0;  
	color:white;  
	padding:10px;  
}  
#openBtn {  
	background:green;  
	display:block;  
}  
#closeBtn {  
  display:none;  
}  
#openNav:target .navMain {  
  left:0;  
}  
#openNav:target #content {  
	margin-left:260px;  
	position:fixed;  
}  
#openNav:target #openBtn {display:none;}  
#openNav:target #closeBtn {  
	display:block;  
	background:red;  
}

    </style>  
    <title>Off-Canvas-Navigation</title>  
  </head>  
  
  <body id="openNav">  
    <div class="navMain"></div>  
  
    <div id="content">  
  
      <a href="#openNav" id="openBtn">Open Navi</a>  
      <a href="#closeNav" id="closeBtn">Close Navi</a>  
  
      <h1>Off-Canvas mit :target</h1>  
      <p>Hier steht der Inhalt</p>  
    </div>  
  </body>  
</html>

Das "Öffnen" des Canvas kann ich nachvollziehen, nicht aber das "Schließen"... Müsste da nicht ein #closeNav:target auftauchen?

Viele Grüße
Siri

Beitrag melden
–
Informationen zu den Bewertungsregeln