navigation_rechts_links.php
Quell Code
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Container schieben</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
margin:0;
padding:0;
}
.mainBox {
display:block;
width: 80vw;
height:100vh;
overflow:auto;
border: 2px dotted red;
margin: 0 10vw 0 10vw;
}
.mainBox:before{
content:'';
width:9.9vw;
position:absolute;
z-index:10;
top:0;
left:0;
height:100vw;
background:white;
display:block;
}
.mainBox:after{
content:'';
width: 7.8vw;
position:absolute;
z-index:10;
top:0;
right:0;
height:100vw;
background:white;
display:block;
}
p {
font-size: 1.1em;
}
.navMain, #content {
-webkit-transition: all 1.2s ease-in-out;
-moz-transition: all 1.2s ease-in-out;
-ms-transition: all 1.2s ease-in-out;
-o-transition: all 1.2s ease-in-out;
transition: all 1.2s ease-in-out;
}
.navMain {
width:200px;
height: calc(100vh - 40px);
padding:20px;
position:absolute;
left:-100vw;
overflow:auto;
background-color: hsla(0, 100%, 50%, 0.5);
}
.contentbox {
padding:0px 20px 20px 20px;
}
#openBtn, #closeBtn {
width:4.5vw;
height:4.5vw;
margin:0 0 0.3vw 0;
color:white;
padding:0.3vw;
display:block;
}
#openBtn {
background:green;
}
#closeBtn {
background:red;
}
#openNav:target .navMain {
left:10vw;
overflow-x:auto;
}
#openNav:target #content {
margin-left:100vw;
width:80vw;
padding:10px;
position:fixed;
}
#content{
padding:10px;
}
figure > img{
width:150px;
}
</style>
</head>
<body class="mainBox">
<div id="openNav">
<div class="navMain">
<a href="#closeNav" id="closeBtn">Close Navi</a>
<article class="arbeiten-galerie">
<h4>Galerien</h4>
<div>
<section>
<a class="a-modul" href="arbeit01.html">
<h4 class="header-tabelle">
<span class="table-row">
<span class="table-cell"> <div id="test">fjzguh</div>
Drifters, 2012
</span>
</span>
</h4>
<figure>
<img src="http://misanthrop.bplaced.net/mediaordner/media-01/arbeit01/01-00.jpg" alt="Drifters, 2012">
</figure>
</a>
<p>Performance</p>
<p>Kunsthalle Münster,</p>
<p>Speicher II, Münster</p>
</section>
<section>
<a class="a-modul" href="arbeit02.html">
<h4 class="header-tabelle">
<span class="table-row">
<span class="table-cell">
Waldfrieden, 2006
</span>
</span>
</h4>
<figure>
<img src="http://misanthrop.bplaced.net/mediaordner/media-01/arbeit02/02-00.jpg" alt="Waldfrieden, 2006">
</figure>
</a>
<p>Rauminstallation</p>
<p>MARTa - Kapelle,</p>
<p> Museum MARTa, Herford</p>
</section>
<section>
<a class="a-modul" href="arbeit03.html">
<h4 class="header-tabelle">
<span class="table-row">
<span class="table-cell">
Eremitage für Paris, 2006
</span>
</span>
</h4>
<figure>
<img src="http://misanthrop.bplaced.net/mediaordner/media-01/arbeit03/03-00.jpg" alt="Eremitage für Paris, 2006">
</figure>
</a>
<p>Rauminstallation</p>
<p>Cité Internationale des Arts, Paris</p>
</section>
<section>
<a class="a-modul" href="arbeit04.html">
<h4 class="header-tabelle">
<span class="table-row">
<span class="table-cell">
Der Bau, 2007
</span>
</span>
</h4>
<figure>
<img src="http://misanthrop.bplaced.net/mediaordner/media-01/arbeit04/04-00.jpg" alt="Der bau, 2007">
</figure>
</a>
<p>Rauminstallation</p>
<p>Büro für Kunstvermittlung, Münster</p>
</section>
<section>
<a class="a-modul" href="arbeit05.html">
<h4 class="header-tabelle">
<span class="table-row">
<span class="table-cell">
Utopia Planetia, 2005
</span>
</span>
</h4>
<figure>
<img src="http://misanthrop.bplaced.net/mediaordner/media-01/arbeit05/05-00.jpg" alt="Utopia Planetia, 2005">
</figure>
</a>
<p>Rauminstallation</p>
<p>Cubus Kunsthalle, Duisburg</p>
</section>
<section>
<a class="a-modul" href="arbeit06.html">
<h4 class="header-tabelle">
<span class="table-row">
<span class="table-cell">
Kellerräume, 2012 - 2015
</span>
</span>
</h4>
<figure>
<img src="http://misanthrop.bplaced.net/mediaordner/media-01/arbeit06/06-00.jpg" alt="Kellerräume, 2012 - 2015">
</figure>
</a>
<p>Rauminstallationen</p>
<p>Kunsthalle Münster, Speicher II, Münster</p>
</section>
<section>
<a class="a-modul" href="arbeit07.html">
<h4 class="header-tabelle">
<span class="table-row">
<span class="table-cell">
Bunker / Maquetten, 2012 - 2016
</span>
</span>
</h4>
<figure>
<img src="http://misanthrop.bplaced.net/mediaordner/media-01/arbeit07/07-00.jpg" alt="Wohnsärge, 2012 - 2015">
</figure>
</a>
<p>Rauminstallationen</p>
<p>Kunsthalle Münster,</p>
<p>Speicher II, Münster</p>
</section>
<section>
<a class="a-modul" href="arbeit08.html">
<h4 class="header-tabelle">
<span class="table-row">
<span class="table-cell">
Take Shelter, 2015
</span>
</span>
</h4>
<figure>
<img src="http://misanthrop.bplaced.net/mediaordner/media-01/arbeit08/08-00.jpg" alt="Take Shelter, 2015">
</figure>
</a>
<p>Rauminstallation</p>
<p>Kunsthalle Münster</p>
</section>
<section>
<a class="a-modul" href="arbeit09.html">
<h4 class="header-tabelle">
<span class="table-row">
<span class="table-cell">
Refugium Moguntia, 2009
</span>
</span>
</h4>
<figure>
<img src="http://misanthrop.bplaced.net/mediaordner/media-01/arbeit09/09-00.jpg" alt="Refugium Moguntia, 2009">
</figure>
</a>
<p>Rauminstallation</p>
<p>Kunstverein Walpodenstrasse 21 e.V.,</p>
<p>Walpodenakademie, Mainz</p>
</section>
<section>
<a class="a-modul" href="arbeit10.html">
<h4 class="header-tabelle">
<span class="table-row">
<span class="table-cell">
Eremitage für Schöppingen, 2008
</span>
</span>
<span class="table-row">
<span class="table-cell">
Berge versetzen, 2009
</span>
</span>
</h4>
<figure>
<img src="http://misanthrop.bplaced.net/mediaordner/media-01/arbeit10/10-00.jpg" alt="Eremitage für Schöppingen, 2008">
</figure>
</a>
<p>Rauminstallation</p>
<p>Stiftung Künstlerdorf Schöppingen, Schöppingen</p>
</section>
<section>
<a class="a-modul" href="arbeit11.html">
<h4 class="header-tabelle">
<span class="table-row">
<span class="table-cell">
Stiegenhausexil, 2010
</span>
</span>
</h4>
<figure>
<img src="http://misanthrop.bplaced.net/mediaordner/media-01/arbeit11/11-00.jpg" alt="Stiegenhausexil, 2010">
</figure>
</a>
<p>Rauminstallation</p>
<p>TomA, Münster</p>
</section>
</div>
</article>
</div>
<div id="content">
<div class="contentbox">
<a href="#openNav" id="openBtn">Open Navi</a>
<h1>Off-Canvas mit :target</h1>
<p>Hier steht der Inhalt</p>
<p> Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit??, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead
Cum horribilem walking dead resurgere de crazed sepulcris creaturis, zombie sicut de grave feeding iride et serpens. Pestilentia, shaun ofthe dead scythe animated corpses ipsa screams. Pestilentia est plague haec decaying ambulabat mortuos. Sicut zeder apathetic malus voodoo. Aenean a dolor plan et terror soulless vulnerum contagium accedunt, mortui iam vivam unlife. Qui tardius moveri, brid eof reanimator sed in magna copia sint terribiles undeath legionis. Alii missing oculis aliorum sicut serpere crabs nostram. Putridi braindead odores kill and infect, aere implent left four dead.</p>
</div>
</div>
</div>
</body>
</html>
Comments