Contao-Camp 2024
Ergebnis 1 bis 6 von 6

Thema: erster menüpunkt aufklappen und accordeon wieder schliessen

  1. #1
    Contao-Fan Avatar von aportmann
    Registriert seit
    19.06.2009.
    Ort
    schweiz
    Beiträge
    422
    Partner-ID
    5934

    Standard 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:

    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
    Angehängte Grafiken Angehängte Grafiken
    Gruss Andi

  2. #2
    Contao Core-Team
    Association Vorstand
    Avatar von andreas.schempp
    Registriert seit
    15.06.2009.
    Ort
    Lyss
    Beiträge
    5.613
    Partner-ID
    8667
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.
    terminal42 gmbh
    Wir sind Contao Premium-Partner! Für Modulwünsche oder Programmierungen kannst du uns gerne kontaktieren.
    Hilfe für Isotope eCommerce kann man auch kaufen: Isotope Circle

  3. #3
    Contao-Fan Avatar von aportmann
    Registriert seit
    19.06.2009.
    Ort
    schweiz
    Beiträge
    422
    Partner-ID
    5934

    Standard

    sali andreas

    genau diese beiden waren es. besten dank!


    gruss andi
    Gruss Andi

  4. #4
    Alter Contao-Hase
    Registriert seit
    10.05.2010.
    Ort
    Andernach / Rlp
    Beiträge
    1.158
    User beschenken
    Wunschliste

    Standard

    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 --> Angeklickt_01.png 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)
    accordion_closed.gif accordion_open.gif
    accordion_closed.gif
    accordion_open.gif



    Nun sollte dein Akkordeon wie gewünscht funktionieren.

    Viele Grüße
    MiTsch
    Geändert von MiTsch (12.07.2011 um 10:43 Uhr)
    Wer nichts weiss muss alles Glauben !

  5. #5
    Contao-Fan Avatar von aportmann
    Registriert seit
    19.06.2009.
    Ort
    schweiz
    Beiträge
    422
    Partner-ID
    5934

    Standard

    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
    Gruss Andi

  6. #6
    Alter Contao-Hase
    Registriert seit
    10.05.2010.
    Ort
    Andernach / Rlp
    Beiträge
    1.158
    User beschenken
    Wunschliste

    Standard

    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
    Wer nichts weiss muss alles Glauben !

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •