✔ CSS: Pseudoklasse :target Grafiken austauschen?

[filament]

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:

<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>

.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

 

[Sp1r1t]

Hallo,

ich hab mir mal deinen Code angeschaut und bin zur Erkenntnis gekommen, dass ich das mit meinem Kenntnisstand mit JavaScript bzw. Jquery lösen würde.
Ich habe daran gedacht evtl. den Menü-Button zu tauschen. Das hat sich aber mit "id" erledigt. Ich würde einfach Jquery mit "toggle" empfehlen.

Aber vlt. hat ja noch jemand anderes eine Idee wie man das ganze in rein CSS lösen könnte.

Mit freundlichen Grüßen

Sp1r1t

 

[filament]

Das ist mir bewusst dass das einfach mit jQuery ginge. Aber eigentlich möchte ich weitestgehend auf JS verzichten, damit es eben auch bei Usern funktioniert, die es nicht aktiviert haben etc. Einen Fallback möchte ich nämlich vermeiden. Danke trotzdem für Deinen Post

 

[Sp1r1t]

Hallo filament,

das größte Problem an solchen Sache ist, dass man nichts konkretes abfragen kann (Ausgeklappt oder nicht) bzw. einen Button doppelt belegen kann.
Ich kann auch deinen Punkt im Bereich "no JS" verstehen. Ich versuche meine Projekte auch so zu verwirklichen, das man sie ohne JS nutzen kann.

Ein wichtiger Punkt ist auch, das CSS eigentlich nur eine Styling Sprache mit vielen Möglichkeiten ist. Sobald es komplexer wird kommt man sehr schlecht weiter.

Mit freundlichen Grüßen

Sp1r1t

 

[Jan-Frederik Stieler]

Hi,
Es gibt die Möglichkeit das ganze mit checkbox und labels zu bauen. Da kannst Du dann per CSS abfragen ob die checkbox gecheckt ist oder nicht.

Auf codepen gibt's dafür genug Beispiele.

Gruß

 

[filament]

Die Lösung war relativ einfach. Ich habe das ausgeklappte Div Element einfach über das andere gelegt und damit das Bild verdeckt.