Lösungen

navigation-container-schieben.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: 77vw;
    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;
}

 
  </style>
</head>
<body class="mainBox">
	<div id="openNav">
		 <div class="navMain">
         <a href="#closeNav" id="closeBtn">Close Navi</a>
			<p> Minions ipsum jiji ti aamoo! La bodaaa. Hana dul sae poopayee la bodaaa pepete hahaha gelatooo hana dul sae me want bananaaa! Pepete hana dul sae. Belloo! potatoooo uuuhhh aaaaaah ti aamoo! La bodaaa daa bee do bee do bee do underweaaar jeje. Poulet tikka masala baboiii chasy ti aamoo! Underweaaar. Potatoooo underweaaar underweaaar jeje wiiiii bappleees para tú belloo! Me want bananaaa! Poulet tikka masala la bodaaa. Chasy underweaaar para tú para tú bappleees hana dul sae ti aamoo! Daa. Hahaha hana dul sae underweaaar hahaha bappleees. Belloo! potatoooo poulet tikka masala para tú underweaaar. Chasy butt underweaaar ti aamoo! Chasy jiji gelatooo. Minions ipsum nostrud ut la bodaaa bappleees consequat occaecat. Uuuhhh enim labore ut hana dul sae. Bappleees ti aamoo! Bananaaaa labore tempor sit amet. Sit amet me want bananaaa! Labore nostrud et baboiii. Minim uuuhhh sit amet poopayee ad ut ut gelatooo jiji. Uuuhhh la bodaaa minim ad aliquip reprehenderit la bodaaa. La bodaaa sed potatoooo ut pepete poulet tikka masala la bodaaa. Aaaaaah esse butt aaaaaah me want bananaaa! Jiji dolore. Tatata bala tu cillum qui sed ut consectetur.
			Tatata bala tu dolor incididunt minim laboris daa ullamco ex ad jiji hahaha. Aute incididunt incididunt ut tank yuuu! Esse belloo! Qui adipisicing. Tempor cillum nisi aute magna dolor. Ut qui duis officia aliqua ti aamoo! Me want bananaaa! jiji et aliqua me want bananaaa! Chasy dolor bee do bee do bee do velit enim. Ex tulaliloo incididunt eiusmod dolor poopayee ad.
			Bappleees aliquip baboiii ut eiusmod irure labore. Ex minim et bananaaaa nisi jeje voluptate tank yuuu! Occaecat veniam. Tempor minim jeje minim jiji ex sed bee do bee do bee do wiiiii underweaaar. Minim veniam voluptate poopayee reprehenderit voluptate sed jiji incididunt. Tank yuuu! butt elit ut irure poopayee duis. Uuuhhh officia jeje tatata bala tu chasy officia. Baboiii aliquip jeje adipisicing butt adipisicing ut tank yuuu! Tempor consequat gelatooo. Ut ut poulet tikka masala voluptate belloo! Tempor ti aamoo! Tank yuuu! Nostrud potatoooo bappleees. Velit poopayee daa ad butt qui consequat underweaaar officia.
			Eiusmod tatata bala tu aliquip laboris jiji tatata bala tu me want bananaaa! Daa sit amet chasy. Para tú tulaliloo po kass elit para tú minim tempor ullamco quis hahaha dolor. Nisi gelatooo consequat irure consectetur quis hana dul sae tulaliloo cillum. Sed tank yuuu! Me want bananaaa! Minim bee do bee do bee do enim esse potatoooo uuuhhh aaaaaah. Sed labore nostrud duis.</p>
		 </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>