Toggle-Navigation mit CSS :target Experiment
Hallo liebe Forumer,
ich unternehme gerade eine Toggle-Navigation mit CSS :Target Experiment,
um eventuell (wenn es klappt oder sinnvoll erscheint!) dies in meine bisherige Website zu erweitern.
Aber lasst mich erst einmal erläutern, weshalb ich dies bräuchte (wenn es eben Sinn ergeben würde!)
Folgende Problemstellung:
BISHER ist es so, wenn ich den Hauptmenü-Punkt „Arbeiten“ angeklickt habe (waagerechtes Menü oben, blau unterlegt!) ,
dann eines der Bilder Icons (darunter) anklicke, meinetwegen "Driftens,2012", dann anklicke, dann öffnet sich ein neues Fenster und
Die entsprechende Dokumentation zu dieser Arbeit erscheint. Bisher bestens (Vielen Dank MrMurphy für Deine Unterstützung!!)
Was ist aber nun, wenn ich eine andere Arbeit, meinetwegen die nächste "Waldfrieden,2006" anklicken möchte,
dann muss ich ja oben im blau unterlegten Hauptmenü wieder „Arbeiten“ anklicken um zu dem Bilder-icon-Menue zu kommen.
Das finde ich ein wenig umständlich (oder ist das so normal von der Abfolge her?)
Der hier verwendete Code
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Bildvergrösserung</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css_webseite/all.css">
<![endif]-->
<style>
* {
margin:0;
padding:0;
}
html,body {
display: flex;
align-items: center;
justify-content: center;
}
.mainBox {
display:block;
width: 80vw;
height:100vh;
overflow-x:hidden;
border: 2px dotted red;
}
.mainBox:before{
content:'';
width:9.2vw;
position:absolute;
z-index:10;
top:0;
left:0;
height:100vw;
background:white;
display:block;
}
.mainBox:after{
content:'';
width:9.2vw;
position:absolute;
z-index:10;
top:0;
right:0;
height:100vw;
background:white;
display:block;
}
p {
font-size: 1.1em;
}
.contentbox {
margin-left: 6.5vw;
}
.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;
opacity:1;
}
.navMain {
width: 80vw;
height:100vh;
padding: 0.5vw;
position:absolute;
left:-100%;
overflow:auto;
background-color: hsla(0, 100%, 50%, 0.5);
}
#content {
margin-left:1.7vw;
padding-top:1vw;
}
#openBtn,
#closeBtn {
width:4.5vw;
height:4.5vw;
margin:0 0 0.3vw 0;
color:white;
padding:0.3vw;
}
#openBtn {
background:green;
display:block;
}
#closeBtn {display:block;}
/* if nav open */
#openNav:target .navMain {
left:10vw;
overflow-x:scroll;
}
#openNav:target #content {
margin-left:100%;
width:80vw;
padding:10px;
position:fixed;
z-index:4;
pointer-events:none;
}
#openNav:target #openBtn {display:block;}
#openNav:target #closeBtn {
display:block;
background:red;
margin-left:-0%;
}
#openNav:target .contentbox{
opacity:1.2;
padding-top:0;
}
</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">
<a href="#openNav" id="openBtn">Open Navi</a>
<div class="contentbox">
<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>