nicht angemeldet
Off-Canvas: Wieso funktioniert das Schließen?
0 
Matthias Apsel
0 0 Matthias Apsel
Off-Canvas: Wieso funktioniert das Schließen?
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
-
Om nah hoo pez nyeetz, Siri!
Das "Öffnen" des Canvas kann ich nachvollziehen, nicht aber das "Schließen"... Müsste da nicht ein #closeNav:target auftauchen?
Wenn ich deine Frage richtig verstehe: Nein
Matthias
--
1/z ist kein Blatt Papier.
-
Hallo,
Wenn ich deine Frage richtig verstehe: Nein
Dann muss ich meine Frage anders formulieren ;-)
Wieso wird das Canvas bei Klick auf
<a href="#closeNav" id="closeBtn">Close Navi</a>
ausgeblendet? Wodurch wird die Transition "ausgelöst"? Wo ist die Logik dahinter? Ich kann im CSS nichts erkennen, was auf den Klick reagiert.Viele Grüße
Siri-
Om nah hoo pez nyeetz, Siri!
Wieso wird das Canvas bei Klick auf
<a href="#closeNav" id="closeBtn">Close Navi</a>
ausgeblendet? Wodurch wird die Transition "ausgelöst"? Wo ist die Logik dahinter? Ich kann im CSS nichts erkennen, was auf den Klick reagiert.Das #openNav ist dann nicht mehr "der gerade aktivierte Verweis". Es hat nicht mehr die Pseudoklasse :target. Jeder andere Link hätte die Transition auch ausgelöst.
Matthias
--
1/z ist kein Blatt Papier.
-
Hallo,
Das #openNav ist dann nicht mehr "der gerade aktivierte Verweis". Es hat nicht mehr die Pseudoklasse :target. Jeder andere Link hätte die Transition auch ausgelöst.
Danke! Ob ich und Transitions nochmal Freunde werden...
Es ist z.B. wohl egal, ob ich diese Kombination:
div {
background-color: red;
}
div:hover {
background-color: blue;
transition: background-color 1.5s;
}oder diese Kombination:
div {
background-color: red;
transition: background-color 1.5s;
}
div:hover {
background-color: blue;
}
verwende. Gewöhnungsbedürftig!Viele Grüße
Siri-
Om nah hoo pez nyeetz, Siri!
Es ist z.B. wohl egal, ob ich diese Kombination: [...] verwende
nicht ganz.
<!doctype html> <html> <head> <meta charset = "utf-8"> <title>transitions</title> <style>[code lang=css] div { width: 150px; height: 40px; margin: 20px; background-color: gold;} div:hover { background-color: red; width: 300px;} /* transitions */ #div1 { } #div1:hover { transition: all ease 2.5s;} #div2 { transition: all ease 2.5s; } #div2:hover { } #div3 { transition: all ease 2.5s; } #div3:hover { transition: none;} #div4 { } #div4:hover { } ~~~ </style> </head> <body> <div id="div1">langsam >> schnell</div> <div id="div2">langsam >> langsam</div> <div id="div3">schnell >> langsam</div> <div id="div4">schnell >> schnell</div> </body> </html>[/code] Matthias -- 1/z ist kein Blatt Papier. 
-
-
-
-