erster menüpunkt aufklappen und accordeon wieder schliessen

[aportmann]

hallo zusammen

ich benutze mootoolsnav nicht für eine klassische navigation sonder als grosse listennavigation innerhalb einer seite, das ganze sieht dann so aus wie im anhang.

optisch habe ich die navigation bereits angepasst. auch habe ich den den mouseover-effekt zu einem onclick-effekt gewandelt. was mir jedoch noch fehlt – und da weiss ich zurzeit auch nicht weiter:

1. beim klick auf die oberste ebene soll sich das accordeon wieder schliessen
2. beim laden der seite soll sich der erste menüpunkt gleich aufklappen

weiss jemand, was ich da anpassen darf?


danke und gruss

andi

[andreas.schempp]

Hallo Andi,

Was du wohl brauchst ist eine Kombination aus dem (alten) moo_close_all Template, aber die erste Ebene öffnen. Soweit ich weis gibt es dafür Möglichkeiten im Accordion.

http://mootools.net/docs/more/Fx/Fx.Accordion

Ich würde es mit den Optionen "display" und "alwasyHide" versuchen.

[aportmann]

sali andreas

genau diese beiden waren es. besten dank!


gruss andi

[MiTsch]

Hallo Andi,

folgender Workflow sollte Dir helfen:

1. Erstelle ein neues Templates
moo_accordion_open

<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function()
{
    new Accordion($$('div.toggler'), $$('div.accordion'), 
    {
        alwaysHide: true,
        opacity: (window.ie ? false : true),
     onActive: function(toggler, i)
    {
     toggler.getFirst() ? toggler.addClass('active') : toggler.addClass('active');
     toggler.getFirst() ? toggler.removeClass('inactive') : toggler.removeClass('inactive');
    },
 
    onBackground: function(toggler, i)
    {
     toggler.getFirst() ? toggler.removeClass('active') : toggler.removeClass('active');
     toggler.getFirst() ? toggler.addClass('inactive') : toggler.addClass('inactive');
    }
 });
});
//--><!]]>
</script>

2. Erstelle unter Artikel (auf der Seite deiner Wahl) mehrere Akkordeonelemente wie folgt
Elementtyp: Akkordeon
Betriebsart: Einzelnes Element
Bereichsüberschrift: Beispiel 1, 2, 3, usw.
Text: Beispieltext 1, 2, 3, usw.

3. Wähle unter Seitenlayout das erstellte Template aus
Skript-Einstellungen --> moo_accordion_open

4. Erweitere dein Stylesheet in folgender Art (Beispiel)

.ce_accordion .toggler
{
 padding:3px 0 3px 30px;
 background-color:#deb867;
 background-image:url("[COLOR=blue]tl_files/Bilder/accordion_closed.gif[/COLOR]");
 background-repeat:no-repeat;
 color:#050505;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 cursor:pointer;
 background-position: 6px center;
}
 
 
.ce_accordion .toggler.active
{
 background-image:url("[COLOR=blue]tl_files/Bilder/accordion_open.gif[/COLOR]");
}
 
 
.toggler_first
{
 color:#a84204;
}
 
 
.toggler_first:hover
{
 text-decoration:underline;
 color:#a84204;
 cursor:pointer;
}
 
 
.accordion div
{
 padding:6px 0 8px;
 line-height:16px;
}

5. Füge wenn gewünscht, für das Öffnen und Schließen der toggler Grafiken ein
Wie in den Stylesheet (Blau markiert) definiert erstelle ein Ordner für
das Öffnen und Schließen der Aktiven / Passiven Akkordeons
(Ich habe zwei Beispielgrafiken beigefügt)






Nun sollte dein Akkordeon wie gewünscht funktionieren.

Viele Grüße
MiTsch

[aportmann]

lieber mitsch

besten dank für die ausführliche anleitung. da bei mir eine navigation aus seiten erstellt werden muss, kommt das inhaltselement ce_accordeon nicht in frage.

aus diesem grund setze ich die erweiterung mootoolsnav ein und habe mein anliegen hier gepostet.

bin mir aber sicher, dass die anleitung jemandem anders weiterhilft.


gruss andi

[MiTsch]

Hallo Andi,

ich hatte die Anleitung geschrieben bevor Du auf andreas Tipp hin geantwortet hattest.
Aber danke fürs Feedback, und viel Erfolg bei deinem Projekt!

Viele Grüße
MiTsch