Hoffy
Threadersteller
Dabei seit: 29.04.2012
Ort: Niederwerrn
Alter: 36
Geschlecht: 
|
Verfasst Mo 07.05.2012 08:10
Titel Aufklappbox - wieder schließen? |
  |
|
Hi ihr
ich hab da mal ne frage
ich beschäftige mich schon ein bischen mit css3 und html 5
und ich hab eine Aufklappbox geschrieben
Hier mal der code:
| Code: |
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Aufklappbox</title>
<link rel="stylesheet" type="text/css" href="/CSS/reset.css">
<link rel="stylesheet" type="text/css" href="/CSS/clickme.css">
</head>
<body>
<div id="alles">
<h1>Dies ist meine HTML5 und CSS3 Test-Seite</h1>
<h2>Hier werde ich eine Leiste bauen,<br>die beim anklicken aufgeht</h2>
<div class="aufklappmenue">
<a href="#acc1">Anklicken für mehr Infos</a>
<div id="acc1"><p>Diese Aufklappbox wurde nur mit CSS- geschrieben</p></div>
<a href="#acc2">Welche Technik steckt dahinter?</a>
<div id="acc2"><p>Hierhinter verbirgt sich eine Transition(Übergang) dieser funktioniert auch bei Bildern und anderen Medien.</p></div>
<a href="#acc3">Schlußgedanke</a>
<div id="acc3"><p>Weil der IE- das nicht unterstützt sollte man ein Java-script Fall-back einbauen.</p></div>
</div>
<nav>
<ul>
<li><a href="/index.html">Startseite</a></li>
</ul>
</nav>
</div>
</body>
</html>
|
und in der css steht folgendes:
| Code: |
@charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
}
#alles {
/*GROESSE*/
width:800px;
height:800px;
overflow-y:scroll;
/*ABSTAENDE*/
margin:0 auto;
margin-top:15px;
/*HINTERGRUND*/
background:#CCCCCC;
/*SCHATTEN*/
-webkit-box-shadow:rgba(102,102,102,1) 1px 1px 5px;
-moz-box-shadow:rgba(102,102,102,1) 1px 1px 5px;
-ms-box-shadow:rgba(102,102,102,1) 1px 1px 5px;
-o-box-shadow:rgba(102,102,102,1) 1px 1px 5px;
box-shadow:rgba(102,102,102,1) 1px 1px 5px;
/*RAHMEN*/
-webkit-border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
/*SCHRIFT*/
font-family:Tahoma, Geneva, sans-serif;
}
h1 {
margin-top:20px;
font-size:30px;
font-weight:bold;
color:rgba(255,255,255,1);
}
h2 {
margin-top:15px;
margin-bottom:20px;
font-size:25px;
font-style:italic;
color:rgba(255,255,255,1);
}
h3 {
text-align:left;
margin-top:15px;
margin-bottom:20px;
margin-left:30px;
font-size:15px;
text-decoration:underline;
color:rgba(0,0,0,1);
}
p {
margin:0 auto;
margin-top:15px;
margin-bottom:5px;
font-size:14px;
text-align:left;
color:rgba(0,0,0,1);
width:750px;
}
nav ul {
margin-top: 10px;
margin-left:30px;
margin-right:30px;
margin-bottom:20px;
}
nav ul li {
margin-bottom:5px;
}
nav ul li a {
display:block;
width:200px;
font-size:15px;
color:rgba(0,0,0,1);
margin-bottom:5px;
text-decoration:none;
padding-top:7px;
padding-left:20px;
padding-bottom:7px;
}
nav ul li a:hover {
background:rgba(255,255,255,.50);
text-decoration:underline;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
.floatl {
float:left;
}
.floatr {
float:right;
}
.aufklappmenue > a {
/*Hintergrund*/
background: none repeat scroll 0 0 rgba(150,150,150,1);
/*Schrift*/
text-decoration: none;
text-shadow: 2px 1px 2px rgba(0, 0, 0, 0.7);
text-transform: capitalize;
font-size: 0.8em;
color: #FFFFFF;
/*Abstaende*/
margin-bottom: 1px;
padding: 5px;
/*Rest*/
display: block;
}
/*Menue Geschlossen*/
.aufklappmenue div {
/*Uebergang*/
-webkit-transition: height 500ms ease 0s;
-moz-transition: height 500ms ease 0s;
-ms-transition: height 500ms ease 0s;
-o-transition: height 500ms ease 0s;
transition: height 500ms ease 0s;
/*Schrift*/
font-size: 0.9em;
/*Hoehe*/
height:0;
overflow: hidden;
}
/*Menue Angeklickt*/
.aufklappmenue div:target {
height: 105px;
}
|
das sind 3 boxen die beim anklicken des anchors aufgehen
soviel ist klar.
(mir ging es beim schreiben vorrangig dass ich den ease-effekt mal teste)
meine frage ist nun:
wie kann ich das machen, dass wenn ich eine box zb: "Anklicken für mehr infos" durch erneutes anklicken wieder schließen kann??
geht das auch nur mit css3 oda brauch ich dafür javascript??
ich möchte nicht sofort einen fertig geschriebenen code
lediglich erstmal nen denkanstoß damit ich selber rumprobieren kann 
falls das aber nur mit javascript geht dann wird das wohl so gelassen ^^
Zuletzt bearbeitet von Hoffy am Mo 07.05.2012 08:15, insgesamt 1-mal bearbeitet
|
|
fyll
Dabei seit: 20.09.2003
Ort: Augsburg
Alter: 39
Geschlecht:
|
Verfasst Mo 07.05.2012 08:59
Titel
|
|
|
In dem Fall brauchst JS.
Könntest es aber anderster baun und nicht :target benutzen, sondern unsichtbare Checkboxen und den :checked > child pseudo-status nehmen - wenn du das so machst, gehn dann aber halt die Anderen beim Klick nicht mehr automatisch zu.
// edit: quatsch - nciht :checked > child, sondern :checked ~ sibling
.. montag morgen ^^
Zuletzt bearbeitet von fyll am Mo 07.05.2012 09:08, insgesamt 1-mal bearbeitet
|
|
Willkommen auf dem Portal für Mediengestalter
