Liste der Anhänge anzeigen (Anzahl: 1)
erster menüpunkt aufklappen und accordeon wieder schliessen
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:
- beim klick auf die oberste ebene soll sich das accordeon wieder schliessen
- beim laden der seite soll sich der erste menüpunkt gleich aufklappen
weiss jemand, was ich da anpassen darf?
danke und gruss
andi
Liste der Anhänge anzeigen (Anzahl: 3)
Hallo Andi,
folgender Workflow sollte Dir helfen:
1. Erstelle ein neues Templates
moo_accordion_open
Code:
<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 --> Anhang 4653 moo_accordion_open
4. Erweitere dein Stylesheet in folgender Art (Beispiel)
Code:
.ce_accordion .toggler
{
padding:3px 0 3px 30px;
background-color:#deb867;
background-image:url("tl_files/Bilder/accordion_closed.gif");
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("tl_files/Bilder/accordion_open.gif");
}
.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)
Anhang 4654 Anhang 4655
Anhang 4654
Anhang 4655
Nun sollte dein Akkordeon wie gewünscht funktionieren.
Viele Grüße
MiTsch