Tutorial jQuery CSS3 Accordion Horizontal

Dieses Tutorial ist für fortgeschrittene Benutzer geeignet, die sich bereits gut in CSS auskennen.

Bitte guckt Euch zunächst, zum besseren Verständnis, auch die Skripte und das Beispiel am Link oben an.

Fügt die Verlinkung zu der CSS-Datei, die ich hier verwendet habe, ein. Ich habe diese Datei hier in ein Verzeichnis “css” kopiert. Weiterhin habe Ich hier die Version 1.7.2 der jQuery-Datei verwendet. Fügt also diese Verlinkung zu dieser Datei ebenfalls in den <HEAD> Eurer Seite ein. Kopiert auch die Javascript Funktion, zum Öffnen und Schließen der DIV-Bereiche, mit in den <HEAD> der Seite. Dort tragt Ihr die gleichen Breiten der geöffneten DIVs, wie auch der geschlossenen DIVs aus der CSS Datei ein.

> Layout markieren > Fenster “Layout-Eigenschaften” > “Zwischen Head Tags” einfügen

<link rel="stylesheet" href="./css/accordion.css" type="text/css" media="screen"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
   $(function() {
      $('#accordion > li').hover(
         function () {
            var $this = $(this);
            $this.stop().animate({'width':'480px'},500);
            $('.heading',$this).stop(true,true).fadeOut();
            $('.bgDescription',$this).stop(true,true).slideDown(500);
            $('.description',$this).stop(true,true).fadeIn();
         },
         function () {
            var $this = $(this);
            $this.stop().animate({'width':'120px'},1000);
            $('.heading',$this).stop(true,true).fadeIn();
            $('.description',$this).stop(true,true).fadeOut(500);
            $('.bgDescription',$this).stop(true,true).slideUp(700);
         }
      );
   });
</script>

Hier könnt Ihr Euch meine CSS-Datei downloaden

> Datei > Seite speichern unter

Tragt gleich in der obersten Class den Abstand zum oberen Bildschirm-Rand der absoluten Position dieser Class ein - in meinem Beispiel 300px.

Bemerkung: Die Anweisung right:100px; würde bewirken, dass die Position des Akkordeons 100px vom rechten Bildschirmrand beginnt und die Boxen dann nach links öffnen. Entfernt die Deaktivierung dieser Anweisung vorne /* und hinten */ um das mal auszuprobieren.

ul.accordion{
    list-style:none;  
    position:absolute;
    /*right:100px;*/
    top:300px;
    font-family: Cambria, serif;
    font-size: 16px;
    font-style: italic;
    line-height: 1.5em;
}

Gebt die Breite (width) - hier 120px, sowie die Höhe (height) - hier 480px der geschlossenen Bereiche an.

ul.accordion li{
    float:right;
    width:120px;
    height:480px;

    display:block;
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
    border-top:2px solid #fff;
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center center;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    -moz-box-shadow:1px 3px 15px #555;
    -webkit-box-shadow:1px 3px 15px #555;
    box-shadow:1px 3px 15px #555;
}

Ich habe hier meine Hintergrundbilder der Tierfotos auf eine Größe von 480 x 480 Pixeln erstellt (so wie in der CSS und dem Javascript angegeben). Für diese Bilder habe ich ein Verzeichnis “images” erstellt, die Bilder in dieses Verzeichnis kopiert, auf das ich in der CSS mittels relativer Pfadangabe verlinke.

Kopiert auch den transparenten Hintergrund (bgDescription.png) in dieses Verzeichnis “images”. Hier könnt Ihr Euch diese Grafik downloaden.

ul.accordion li.bg1{
    background-image:url(../images/Loewe.jpg);
}
ul.accordion li.bg2{
    background-image:url(../images/Loewen.jpg);
}
ul.accordion li.bg3{
    background-image:url(../images/Elefant.jpg);
}
ul.accordion li.bg4{
    background-image:url(../images/Vogel.jpg);
}

Die Überschriften und den Text-Inhalt des DIV-Containers, ebenso wie meine Links, habe ich in den HTML-Code Editor eines Textfeldes kopiert und den entsprechenden CSS-Klassen zugeordnet.

> Fenster “Text-Eigenschaften” > mittlere Button oben “Text” > Button “HTML

        <div id="content">
            <ul class="accordion" id="accordion">
                <li class="bg1">
                    <div class="heading">L&ouml;we</div>
                    <div class="bgDescription"></div>
                    <div class="description">
                        <h2>L&ouml;we</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                            ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                            reprehenderit in voluptate velit esse cillum dolore eu fugiat
                            nulla pariatur.</p>
                        <a href="http://www.tommyherrmanndesign.com/nof/jQuery-Accordion/html/horizontal.html" target="_blank">Lite Accordion Master Skript Beispiel &rarr;</a>
                    </div>
                </li>
                <li class="bg2">
                    <div class="heading">L&ouml;wen</div>
                    <div class="bgDescription"></div>
                    <div class="description">
                        <h2>L&ouml;wen</h2>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
                            quae ab illo inventore veritatis et quasi architecto beatae vitae
                            dicta sunt explicabo. </p>
                        <a href="http://www.tommyherrmanndesign.com/nof/jQuery-Accordion/" target="_blank">Vertikales Beispiel &rarr;</a>
                    </div>
                </li>
                <li class="bg3">
                    <div class="heading">Elefant</div>
                    <div class="bgDescription"></div>
                    <div class="description">
                        <h2>Elefant</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                            ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                            reprehenderit in voluptate velit esse cillum dolore eu fugiat
                            nulla pariatur.</p>
                        <a href="http://www.nof-tutorials.com/jQuery-Beispiele/" target="_blank">Weitere Beispiele &rarr;</a>
                    </div>
                </li>
                <li class="bg4 bleft">
                    <div class="heading">Vogel</div>
                    <div class="bgDescription"></div>
                    <div class="description">
                        <h2>Vogel</h2>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
                            quae ab illo inventore veritatis et quasi architecto beatae vitae
                            dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
                            sit aspernatur aut odit aut fugit, sed quia consequuntur magni
                            dolores eos qui ratione voluptatem sequi nesciunt.</p>
                        <a href="http://www.nof-schule.de/forum/" target="_blank">zu unserem Forum &rarr;</a>
                    </div>
                </li>
            </ul>
        </div>

... aus mir noch nicht begreiflichen Gründen, steht der DIV-Container - durch das Textfeld von NOF bedingt - ca. 40 Pixel zu weit rechts. Daher habe ich in den CSS-Eigenschaften des Textfeldes -40px bei “margin-left” angegeben, damit dieser bündig mit meiner Überschrift steht.

Viel Erfolg!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik