✔ Akkordeonmenue selber programmieren

N

Noeden

Erfahrenes Mitglied
Hallo!

Ich versuche ein verschachteltes Akkordeonmenü selber zu programmieren, aber es will nicht so recht. Es wäre nett, würde sich jemand die Mühe machen, sich den Code mal anzusehen. Wenn ich auf den JuraButton klicke, dann macht der Das Menü 2mail zu und wieder auf und ruckelt dabei. Woran liegt beides? Habt ihr eine Idee, das besser zu lösen. War schon nen Gewurschtel und richtig funktionieren tut es ja auch nicht und viel Arbeit hätte ich auch noch vor mir.


Code: 
<script type="text/javascript">

var Animation=0;
var AkkordeonOffen = new Array();
$(document).ready( function() {
    
    $(".AkkordeonJuraButton").bind("click", function() {

        if (Animation==0){
            Animation = 1;

            $("[class*=AkkordeonButtoninnen]").animate({width: "0px"}, 1000);
            $("[class*=Banner]").animate({width:"0px"}, 1000);
            $("[class*=AkkordeonJuraSlide]").animate({width:"50px"}, 1000);
            $("[class*=AkkordeonJuraBanner]").animate({width:"430px"}, 1000);
            Animation = 0;
        }
    });
});
</script>




<div class="AkkordeonButton AkkordeonJuraButton">
    <img class="AkkordeonButton AkkordeonJuraButton" src="bilder/Akkordeon/AkkordeonJuraButton.png" />
</div>

        <div class="AkkordeonButtoninnen AkkordeonJuraSlide AkkordeonJuraEinfuehrung">
            <img class="AkkordeonButtoninnen AkkordeonJuraSlide AkkordeonJuraEinfuehrung" src="bilder/Akkordeon/E.png" />
        </div>
            <div class="AkkordeonJuraEinfuehrungbanner">
                <img class="AkkordeonJuraEinfuehrungBanner" src="bilder/Akkordeon/Einfuehrung.png" />
            </div>
        
        <div class="AkkordeonButtoninnen AkkordeonJuraSlide  AkkordeonJuraZivilrecht">
            <img class="AkkordeonButtoninnen AkkordeonJuraSlide  AkkordeonJuraZivilrecht" src="bilder/Akkordeon/Z.png" />
        </div>
            <div class="AkkordeonJuraZivilrechtbanner">
                <img class="AkkordeonJuraZivilrechtBanner" src="bilder/Akkordeon/Zivilrecht.png" />
            </div>
        
        <div class="AkkordeonButtoninnen AkkordeonJuraSlide  AkkordeonJuraStrafrecht">
            <img class="AkkordeonButtoninnen AkkordeonJuraSlide  AkkordeonJuraStrafrecht" src="bilder/Akkordeon/S.png" />
        </div>
            <div class="AkkordeonJuraStrafrechtbanner">
                <img class="AkkordeonJuraStrafrechtBanner" src="bilder/Akkordeon/Strafrecht.png" />
            </div>
        
        <div class="AkkordeonButtoninnen AkkordeonJuraSlide  AkkordeonJuraOeffrecht">
            <img class="AkkordeonButtoninnen AkkordeonJuraSlide  AkkordeonJuraOeffrecht" src="bilder/Akkordeon/Oe.png" />
        </div>
            <div class="AkkordeonJuraOeffrechtbanner">
                <img class="AkkordeonJuraOeffrechtBanner" src="bilder/Akkordeon/OeffentlichesR.png" />
            </div>
        
        <div class="AkkordeonButtoninnen AkkordeonJuraSlide AkkordeonJuraMethodenlehre">
            <img class="AkkordeonButtoninnen AkkordeonJuraSlide AkkordeonJuraMethodenlehre" src="bilder/Akkordeon/M.png" />
        </div>
            <div class="AkkordeonJuraMethodenlehrebanner">
                <img class="AkkordeonJuraMethodenlehreBanner" src="bilder/Akkordeon/Methodenlehre.png" />
            </div>
        
        <div class="AkkordeonJuraBanner">
            <img class="AkkordeonJuraBanner" src="bilder/Akkordeon/Jurabanner.png" />
        </div>


<div class="AkkordeonButton AkkordeonProgrammierenButton">
    <img class="AkkordeonButton AkkordeonProgrammierenButton" src="bilder/Akkordeon/AkkordeonProgrammierenButton.png" />
</div>
    <div class="AkkordeonButtoninnen AkkordeonProgrammierenSlide AkkordeonProgrammierenAllgemein">
        <img class="AkkordeonButtoninnen AkkordeonProgrammierenSlide AkkordeonProgrammierenAllgemein" src="bilder/Akkordeon/A.png" />
    </div>
        <div class="AkkordeonProgrammierenAllgemeinBanner">
            <img class="AkkordeonProgrammierenAllgemeinBanner" src="bilder/Akkordeon/Allgemein.png" />
        </div>
        
    <div class="AkkordeonButtoninnen AkkordeonProgrammierenSlide AkkordeonProgrammierenWebsite">
        <img src="bilder/Akkordeon/W.png" class="AkkordeonButtoninnen AkkordeonProgrammierenSlide AkkordeonProgrammierenWebsite" />
    </div>
        <div class="AkkordeonProgrammierenWebsiteBanner">
            <img class="AkkordeonProgrammierenWebsiteBanner" src="bilder/Akkordeon/Website.png" />
        </div>
        
    <div class="AkkordeonButtoninnen AkkordeonProgrammierenSlide AkkordeonProgrammierenLinux">
        <img class="AkkordeonButtoninnen AkkordeonProgrammierenSlide AkkordeonProgrammierenLinux" src="bilder/Akkordeon/L.png" />
    </div>
        <div class="AkkordeonProgrammierenLinuxBanner">
            <img class="AkkordeonProgrammierenLinuxBanner" src="bilder/Akkordeon/Linux.png" />
        </div>
        
        
        <div class="AkkordeonProgrammierenBanner">
            <img class="AkkordeonProgrammierenBanner" src="bilder/Akkordeon/Programmieren.png" />
        </div>
        
        
<div class="AkkordeonButton AkkordeonGeschichteButton">
    <img class="AkkordeonButton AkkordeonGeschichteButton" src="bilder/Akkordeon/AkkordeonGeschichteButton.png" />
</div>
    <div class="AkkordeonButtoninnen AkkordeonGeschichteSlide AkkordeonGeschichteDeutsche">
        <img class="AkkordeonButtoninnen AkkordeonGeschichteSlide AkkordeonGeschichteDeutsche" src="bilder/Akkordeon/D.png" />
    </div>
        <div class="AkkordeonGeschichteDeutscheBanner">
            <img class="AkkordeonGeschichteDeutscheBanner" src="bilder/Akkordeon/Deutsche.png" />
        </div>

    <div class="AkkordeonButtoninnen AkkordeonGeschichteSlide AkkordeonGeschichteEuropa">
        <img class="AkkordeonButtoninnen AkkordeonGeschichteSlide AkkordeonGeschichteEuropa" src="bilder/Akkordeon/E.png" />
    </div>
        <div class="AkkordeonGeschichteEuropaBanner">
            <img class="AkkordeonGeschichteEuropaBanner" src="bilder/Akkordeon/Europa.png" />
        </div>

    <div class="AkkordeonButtoninnen AkkordeonGeschichteSlide AkkordeonGeschichteWelt">
        <img class="AkkordeonButtoninnen AkkordeonGeschichteSlide AkkordeonGeschichteWelt" src="bilder/Akkordeon/W.png" />
    </div>
        <div class="AkkordeonGeschichteWeltBanner">
            <img class="AkkordeonGeschichteWeltBanner" src="bilder/Akkordeon/Welt.png" />
        </div>
        
    <div class="AkkordeonButtoninnen AkkordeonGeschichteSlide AkkordeonGeschichteGeister">
        <img class="AkkordeonButtoninnen AkkordeonGeschichteSlide AkkordeonGeschichteGeister" src="bilder/Akkordeon/G.png" />
    </div>
        <div class="AkkordeonGeschichteGeisterBanner">
            <img class="AkkordeonGeschichteGeisterBanner" src="bilder/Akkordeon/Geister.png" />
        </div>
        
        
        
        <div class="AkkordeonGeschichteBanner">
            <img class="AkkordeonGeschichteBanner" src="bilder/Akkordeon/Geschichte.png" />
        </div>
        
        
        

<div class="AkkordeonButton AkkordeonPhysikButton">
    <img class="AkkordeonButton AkkordeonPhysikButton" src="bilder/Akkordeon/AkkordeonPhysikButton.png" />
</div>
    
    <div class="AkkordeonButtoninnen AkkordeonPhysikSlide AkkordeonPhysikMechanik">
        <img class="AkkordeonButtoninnen AkkordeonPhysikSlide AkkordeonPhysikMechanik" src="bilder/Akkordeon/Mech.png" />
    </div>
        <div class="AkkordeonPhysikMechanikBanner">
            <img class="AkkordeonPhysikMechanikBanner" src="bilder/Akkordeon/Mechanik.png" />
        </div>
        
    <div class="AkkordeonButtoninnen AkkordeonPhysikSlide AkkordeonPhysikElektro">
        <img class="AkkordeonButtoninnen AkkordeonPhysikSlide AkkordeonPhysikElektro" src="bilder/Akkordeon/E.png" />
    </div>
        <div class="AkkordeonPhysikElektroBanner">
            <img class="AkkordeonPhysikMechanikBanner" src="bilder/Akkordeon/Elektro.png" />
        </div>
        
    <div class="AkkordeonButtoninnen AkkordeonPhysikSlide AkkordeonPhysikOptik">
        <img class="AkkordeonButtoninnen AkkordeonPhysikSlide AkkordeonPhysikOptik" src="bilder/Akkordeon/O.png" />
    </div>
        <div class="AkkordeonPhysikOptikBanner">
            <img class="AkkordeonPhysikOptikBanner" src="bilder/Akkordeon/Optik.png" />
        </div>
        
    <div class="AkkordeonButtoninnen AkkordeonPhysikSlide AkkordeonPhysikMagnetismus">
        <img class="AkkordeonButtoninnen AkkordeonPhysikSlide AkkordeonPhysikMagnetismus" src="bilder/Akkordeon/M.png" />
    </div>
        <div class="AkkordeonPhysikMagnetismusBanner">
            <img class="AkkordeonPhysikMagnetismusBanner" src="bilder/Akkordeon/Magnetismus.png" />
        </div>

        
        <div class="AkkordeonPhysikBanner">
            <img class="AkkordeonPhysikBanner" src="bilder/Akkordeon/Physik.png" />
        </div>
        
        

<div class="AkkordeonBanner">
    <img src="bilder/Akkordeon/AkkordeonWillkommen.png" class="AkkordeonBanner" />
</div>


Wenn ich den Css-Code auch posten soll, sagt Bescheid.

Ich habe halt 4 Übergebiete: Jura, Programmieren, Geschichte und Physik. Die haben diverse Unterthemen. Ich möchte, dass am Anfang die 4 Oberpunkte gezeigt werden nebeneinenader und dahinter ein Willkommensbanner. Wenn man auf einen Oberpunkt klickt, dann verkleinert sich das Willkommensbanner bis es verschwindet und es zeigen sich hinter dem angeklickten Oberpunkt die Unterpunkte. (Die Oberpunkte hinter dem Angeklickten verschieben dich nach rechts)
Hinter den Unterpunkten zeigt sich ein Banner das Oberpunktes. BSP:


JURA | Einführung | Zivilrecht | Strafrecht | Öffentliches Recht | Methodenlehre | JURA-BANNER | Andere Oberpunkte ....



Wenn man dann auf einen Unterpunkt klickt, verschwindet das Banner vom Oberpunkt und hinter dem angeklickten Unterpunkt erscheint ein Banner des Unterpunktes.

Ich hoffe ihr versthet was ich meine.


Danke schonmal! Das macht mich wahnsinnig :-D wahrscheinlich geht das viel einfacher.


Wie so oft: Den ganzen Tag probiert, dann um Hilfe gebeten und es endlich gefunden. Hat sich erledigt. SORRY
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück