mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 20.01.2022 04:00 Benutzername: Passwort: Auto-Login

Thema: Aufklappbox - wieder schließen? vom 07.05.2012


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Aufklappbox - wieder schließen?
Autor Nachricht
Hoffy
Threadersteller

Dabei seit: 29.04.2012
Ort: Niederwerrn
Alter: 33
Geschlecht: Männlich
Verfasst Mo 07.05.2012 07:10
Titel

Aufklappbox - wieder schließen?

Antworten mit Zitat Zum Seitenanfang

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&uuml;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(&Uuml;bergang) dieser funktioniert auch bei Bildern und anderen Medien.</p></div>
         <a href="#acc3">Schlu&szlig;gedanke</a>
         <div id="acc3"><p>Weil der IE- das nicht unterst&uuml;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 *zwinker*
falls das aber nur mit javascript geht dann wird das wohl so gelassen ^^


Zuletzt bearbeitet von Hoffy am Mo 07.05.2012 07:15, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
fyll

Dabei seit: 20.09.2003
Ort: Augsburg
Alter: 37
Geschlecht: Männlich
Verfasst Mo 07.05.2012 07:59
Titel

Antworten mit Zitat Zum Seitenanfang

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 08:08, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
 
Ähnliche Themen browser schließen
Flash Fenster schließen?
Türanimation öffnen und schließen
slide menü wieder schließen
Photoshop > Auswahl schließen
Flash fenster schließen mit einer schaltfläche
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.