• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS3 Animation bei :active

M

Mutschas

Neues Mitglied
Hallo Community,

ich möchte eine Sidebar erstellen, die sich beim Laden der Seite öffnet und beim Klick auf "Schließen" wieder schließt.

Das Öffnen habe ich hin bekommen. Beim Schließen stehe ich vor einem Problem. Und zwar möchte ich, dass wenn der Benutzer auf das Schließen-Div klickt, dass dann eine Animation ausgelöst wird, die die Sidebar wieder nach links schiebt. Nur leider wird die ganze Zeit beim Klick auf das Div nicht die Schließen (steht in :active), sondern die Öffnen-Animation ausgelöst.

Wie könnte ich das beheben?

http://jsfiddle.net/nhsgnta4/

Danke.
 
Werbung:
Wenn es unbedingt mit css sein soll, dann probier mal diese Alternative.
HTML: 
<!doctype html>
<html>
<head>
<title>Lenovo</title>
<meta charset="UTF-8">
<style>
 * {
 margin:0;
 padding:0;
}


#sidebar_container {
 position:fixed;
 top:0;
 bottom:0;
}

#sidebar_container br {
 display:none;
}

#sidebar_container a.auf , #sidebar_container a.zu {
 position:absolute;
 top:-1px;
 right:-28px;
 padding:10px 0;
 width:30px;
 text-decoration:none;
 text-align:center;
 font-weight:bold;
 background:#ada;
 color:#000;
}

#sidebar {
 width:200px;
 left:0;
 min-height:100%;
 padding:10px;
 float:left;
 position:relative;
 background:#ada;
 transition:left 1s;
}

#auf:target ~ #sidebar {
 left:2px;
}

#zu:target ~ #sidebar {
 left:-218px;
}

#auf:target ~ #sidebar a.auf  {
 display:none;
}
#zu:target ~ #sidebar a.zu , #zu:target ~ #sidebar nav {
 display:none;
}
#auf:target ~ #sidebar nav  {
 display:block;
}
</style>
</head>
<body>

<div id="sidebar_container">
<br id="auf">
<br id="zu">

<div id="sidebar">
<p>
<a class="auf" href="#auf">+</a>
<a class="zu" href="#zu">-</a>
</p>
<nav>
<a href="#test">link</a>
</nav>
</div>
</div>

</body>
</html>
 
Hi,

danke dir. Das sieht schonmal echt super aus :)
Wenn ich auf den von dir erstellten Link klicke, dann verschiebt sich die Sidebar um wenige Pixel nach links. Ist das bei dir auch so?
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben