find-templates

Akkordeon 2

zurück zur Übersicht

Akkordeon (2) / ohne Javascript


Viele tolle jQuery-Effekte haben den Nachteil, das sie sich gegenseitig "beissen".
Aus diesem Grund hier den "Akkordeon-Effekt" mit reinem CSS erstellt

- Breite und Höhe anpassbar
- Hintergrundfarbe anpassbar
- Hover-Farbe anpassbar
- Fahre mit der Maus auf ein Thema:

Thema 1

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages beschloß eine Zeile Blindtext hinaus zu gehen in die weite Grammatik. weiterlesen

Thema 2

Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren. Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe und Parole betrunken machten und es dann in ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder mißbrauchten. weiterlesen

Thema 3

Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Weiter zur Seite XY

Thema 4

Ebenso möchte ich Ihnen dafür danken, dass Sie mich bis zum Ende gelesen haben. Meine Mission ist erfüllt. Ich werde hier noch die Stellung halten, bis der geplante Text eintrifft. Ich wünsche Ihnen noch einen schönen Tag. Und arbeiten Sie nicht zuviel!Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. weiter zur Seite XY

Schritt 1: Der HTML-Code

- auf "Eigene Seiten editieren"
- Seite auswählen, wo Akkordeon hinein soll
- im Editor (Werkzeugleiste) oben links auf "Quellcode"
- und an gewünschter Stelle diesen HTML-Code einfügen:

<div id="accordeon">

 <div id="spalte1">
   <h3>Thema 1</h3>
   <img alt="Bildinfo" class="pic" src="GRAFIKADRESSE 1" />
   <p> Hier Dein Artikel 1 einfügen <a href="/Seite.htm">weiterlesen</a> </p>
 </div>

<div id="spalte2">
   <h3>Thema 2</h3>
   <img alt="Bildinfo" class="pic" src="GRAFIKADRESSE 2" />
   <p> Hier Dein Artikel 2 einfügen <a href="/Seite.htm">weiterlesen</a> </p>
 </div>

<div id="spalte3">
   <h3>Thema 3</h3>
   <img alt="Bildinfo" class="pic" src="GRAFIKADRESSE 3" />
   <p> Hier Dein Artikel 3 einfügen <a href="/Seite.htm">weiterlesen</a> </p>
 </div>

<div id="spalte4">
   <h3>Thema 4</h3>
   <img alt="Bildinfo" class="pic" src="GRAFIKADRESSE 4" />
   <p>Hier Dein Artikel 4 einfügen <a href="/Seite.htm">weiterlesen</a> </p>
 </div>

 <div style="float: none; clear: both; height: 0;"> </div>

</div>


Erklärung:

- bei GRAFIKADRESSE deine BILD-URL einfügen
- dazu das Bild im Baukasten hochladen (bei "Bilder verwalten")
- danach die URL https://img.webme.com/pic/x/xxxxx/bildname.jpg vom Bild kopieren
- und im Code an markierter Stelle einfügen
- bei /Seite.htm den Link zur Seite einfügen, auf die Verlinkt werden soll


Schritt 2: Der CSS-Code 

<style type="text/css">
<!--

#accordeon {
   width: 550px;
   margin: 50px 0px 30px 0px; }

#accordeon div { 
   transition: all 0.5s linear 0s ;
   float: left;
   width: 25%;
   height: 300px;
   overflow: hidden;}

#accordeon:hover div {
   width: 20px; }

#accordeon:hover div:hover {
   width: 440px;
   overflow: hidden;}

#spalte1 {
   background-color: #CCE0B6;
   transition: all 0.5s linear 0s; }

#spalte2 {
   background-color: #FF6633; 
   transition: all 0.5s linear 0s; }

#spalte3 {
   background-color: #FFCC00;
   transition: all 0.5s linear 0s; }

#spalte4 {
   background-color: #9CA9BC; 
   transition: all 0.5s linear 0s; }

#spalte1:hover, #spalte2:hover, #spalte3:hover, #spalte4:hover {background-color: #eaeaea; }

#accordeon div h3 {
   font-size: 150%;
   margin: 20px; }

img.pic {
  width: 103px; 
  height: 80px; 
  float: left;
  margin: 0px 10px 10px 20px; }

#accordeon div p {margin: 20px; }

-->
</style>


Beschreibung wird gleich weiter geführt (Teepause )



Heute: 2 Besucher