:target Flyout Menu

by Rolf

HTML

<h1>
Technikbeispiel für Menüs mit :target
</h1>
<main>
<a id="galerie"></a>
<div id="galerieContainer">
<a href="#nogalerie">Schließen</a>
<h2>Galerie</h2>
foo<br>bar<br>foo<br>bar<br>foo<br>bar<br>foo<br>bar<br>foo<br>bar<br>foo<br>bar<br>foo<br>bar<br>foo<br>bar<br>foo<br>bar<br>foo<br>bar<br>foo<br>bar<br>ende
<p><a href="#galerie">Nach oben</a></p>
</div>
<div id="content">
<a href="#galerie">Galerie</a>
<h2>Inhalt</h2>
<p>
Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum 
Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum Lorem Illum 
<p><a href="#">Nach oben</a></p>
</div>
</main>

CSS

main {
  width: 66vw; margin: 1em auto 0 auto;
  border: thin solid red;
  position:relative;
  overflow: hidden;
}

#galerie { position: absolute; top: -1000px; }

#galerieContainer {
  position: absolute;
  transition: left 0.4s ease-in-out;
  width: 100%;
  background-color: #ffc;
  left: -100%;
}
#content {
  position: relative;
  transition: left 0.4s ease-in-out;
  left: 0%;
  background-color: transparent;
}
#galerie:target ~ #galerieContainer {
  position: relative;
  left: 0%;
}

#galerie:target ~ #content {
  position:absolute;
  width: 100%; height: 100%; overflow:hidden;
  left: 100%;
  top: 0;
}