filament
Erfahrenes Mitglied
Hallo Leute,
ich habe versucht ein Toggle Menü zu bauen mit der Pseudoklasse :target rein mit CSS, kein Javascript oder Dergleichen...
Es klappt auch alles gut. Nur bekomme ich es nicht hin, dass die Grafik zum Ausklappen auch wieder zum Einklappen benutzt werden kann, oder aber durch eine andere Grafik an selbiger Stelle ersetzt wird.
Mein aktueller Code:
Hatte versucht dem Link oben noch die ID zu geben "login-zu" und eben auch die Klasse .login-zu. Aber das hat nicht funktioniert bzw. nur insoweit, dass der Link zwar funktioniert hat, aber dann nicht mehr angezeigt wurde, wenn ich die normale Datei aufgerufen habe. Sprich ohne das Target einfach nur datei.html.
Jemand einen Lösungsvorschlag?
Danke im Voraus!
Liebe Grüße
Ronny
ich habe versucht ein Toggle Menü zu bauen mit der Pseudoklasse :target rein mit CSS, kein Javascript oder Dergleichen...
Es klappt auch alles gut. Nur bekomme ich es nicht hin, dass die Grafik zum Ausklappen auch wieder zum Einklappen benutzt werden kann, oder aber durch eine andere Grafik an selbiger Stelle ersetzt wird.
Mein aktueller Code:
HTML:
<a href="#d1"><img src="images/icons/menu.png" /></a>
<div id="d1" class="login-details">
<a href="#login-zu"><img src="images/icons/cancel.png" /></a>
<font class="fast-login-schrift">LOGIN</font>
<input class="fast-login" type='text' name="benutzer" placeholder="Benutzer">
<input class="fast-login" type="password" name="passwort" placeholder="Passwort">
<button class="fast-button" type="submit">Login</button>
<a class="pw-vergessen" href="#home">Passwort vergessen?</a>
</div>
CSS:
.login-details {
position: absolute;
left: 0;
top: 35px;
background: #252525;
border-radius: 0 0 5px 5px;
display: none;
}
.login-details:target {
display: block;
}
.login-zu {
position: absolute;
left: 0;
top: 15px;
background: #252525;
border-radius: 0 0 5px 5px;
display: none;
}
.login-zu:target {
display: block;
}
Hatte versucht dem Link oben noch die ID zu geben "login-zu" und eben auch die Klasse .login-zu. Aber das hat nicht funktioniert bzw. nur insoweit, dass der Link zwar funktioniert hat, aber dann nicht mehr angezeigt wurde, wenn ich die normale Datei aufgerufen habe. Sprich ohne das Target einfach nur datei.html.
Jemand einen Lösungsvorschlag?
Danke im Voraus!
Liebe Grüße
Ronny