Contao Camp 2019 in München - Save the date!
Ergebnis 1 bis 18 von 18

Thema: Akkordeon sinnvoll stylen

  1. #1
    Contao-Fan
    Registriert seit
    28.11.2009.
    Ort
    Remscheid
    Beiträge
    320

    Standard Akkordeon sinnvoll stylen

    Hallo,

    ich zerbreche mir gerade den Kopf, wie ich ein Akkordeon so style, dass es sich dem Besucher ohne Erklärung erschließt wie es funktioniert und sich auch ins Design der Seite einfügt.

    Zielgruppe: 40+

    Die Seite: https://www.bergischer24stundenlauf.de/geschichte.html

    Freue mich über jede Idee.

    Neelix

  2. #2
    Contao-Urgestein
    Registriert seit
    22.10.2013.
    Beiträge
    7.778
    User beschenken
    Wunschliste

    Standard

    Ich mache das normalerweise so, wie im Contao-Backend z.B. bei der Dateiverwaltung, also mit + und - Symbol.

  3. #3
    Contao-Fan
    Registriert seit
    28.11.2009.
    Ort
    Remscheid
    Beiträge
    320

    Standard

    Welche Schriftart nimmst Du denn für die Symbole?

  4. #4
    Contao-Fan
    Registriert seit
    05.11.2009.
    Ort
    Liebschützberg (Sachsen)
    Beiträge
    441

    Standard

    das geht relativ easy mit css:

    Code:
    .toggler.active::before {
        content: "+";
    }
    .toggler::before {
        content: "-";
    }

  5. #5
    Contao-Fan
    Registriert seit
    28.11.2009.
    Ort
    Remscheid
    Beiträge
    320

    Standard

    Ja, das CSS ist nicht das Problem.

    Mein Problem ist die Optik und das die Leute die Überschriften nicht anklicken. Ich bekomme dann immer die Frage "Wo sind denn die alten Ergebnisse" und muss dann erklären, dass man den Text anklicken muss, damit die Tabelle ausklappt.

    Und da suche ich halt eine optische Lösung, die das begreiflich macht.

    Ich habe jetzt mal die simplen "+,-" genommen, aber es sieht halt aus wie eine Aufzählung ohne Inhalt.

  6. #6
    Community-Moderator Avatar von stefan-at-work
    Registriert seit
    05.06.2009.
    Ort
    Bad Segeberg
    Beiträge
    1.585
    Partner-ID
    634

    Standard

    z.B. so: https://codepen.io/raubaca/pen/PZzpVe


    Gesendet von iPhone mit Tapatalk

  7. #7
    Contao-Fan
    Registriert seit
    28.11.2009.
    Ort
    Remscheid
    Beiträge
    320

    Standard

    könnte vielleicht klappen. Mal schauen, wie das ins Contao CSS passt.

  8. #8
    Contao-Fan
    Registriert seit
    28.11.2009.
    Ort
    Remscheid
    Beiträge
    320

    Standard

    Hm, das Toogle-Div hat einen Inline-Style. Wo kommt der her?

    EDIT: OK, gefunden. Jetzt muss ich noch schauen, wie ich die Tabelle etwas eingerückt bekomme. Da ist auch ein Inline-CSS...
    Geändert von neelix (12.05.2019 um 16:08 Uhr)

  9. #9
    Contao-Fan
    Registriert seit
    05.05.2011.
    Beiträge
    485

    Standard

    Hm, für deine Zielgruppe würde ich die Doppelpfeile durch die Worte "einblenden" und "ausblenden" ersetzen.
    Kaum macht mans richtig, funktionierts.

  10. #10
    Contao-Fan
    Registriert seit
    28.11.2009.
    Ort
    Remscheid
    Beiträge
    320

    Standard

    Das sieht dann ja direkt aus wie für Blöde.

    Ich probier's mal so.

    Hast Du eine Idee, wo das Inline-CSS für das Div herkommen könnte?

  11. #11
    Contao-Fan
    Registriert seit
    05.05.2011.
    Beiträge
    485

    Standard

    Das sieht dann ja direkt aus wie für Blöde.
    Nein, es beschreibt die Funktion des Akkordeons, und damit lediglich was passiert, wenn ein bestimmter Bereich geklickt wird. Das ist eine hilfreiche Information für all die Besucher, die noch nicht erfahren haben wie ein Akkordeon funktioniert und häufig ausgezeichnet wird. Ob diese Besucher deswegen blöde sind ...?
    Kaum macht mans richtig, funktionierts.

  12. #12
    Contao-Nutzer
    Registriert seit
    03.05.2019.
    Beiträge
    49

    Standard

    Ich habe da einen Pfeil gemacht der nach unten zeigt. Wenn man den "Hovert" hüpft er animiert leicht nach unten. Wenn geklickt wird, dreht sich der Pfeil nach oben.

  13. #13
    Contao-Fan
    Registriert seit
    28.11.2009.
    Ort
    Remscheid
    Beiträge
    320

    Standard

    @Googlebug: Wie lässt du den hüpfen?

    Ich hat auch schon überlegt, ob ich da irgendwie ein Tooltip generieren kann mit einem Hinweis "Zum Einblenden klicken".

  14. #14
    Contao-Nutzer
    Registriert seit
    03.05.2019.
    Beiträge
    49

    Standard

    Zitat Zitat von neelix Beitrag anzeigen
    @Googlebug: Wie lässt du den hüpfen?

    Ich hat auch schon überlegt, ob ich da irgendwie ein Tooltip generieren kann mit einem Hinweis "Zum Einblenden klicken".
    Code:
    #deinID:hover {
    Transform: translateX(-4em);
        animation-name: bounce;
        animation-timing-function: ease-in;
        animation-duration: .5s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }
    #deinID:hover:before {
    content:"bitte klicken oder so";
    }

  15. #15
    Contao-Nutzer
    Registriert seit
    03.05.2019.
    Beiträge
    49

    Standard

    den Tooltip kannst du dann freilich noch designen mit "border" blubs etc.

  16. #16
    Contao-Nutzer
    Registriert seit
    03.05.2019.
    Beiträge
    49

    Standard

    Kannst auch mal hier schauen: https://www.b2b-web.de/sebbb/

    da siehst du unten links den Pfeil hüpfen. Musst du dann wie oben beschrieben nur bei :hover machen.

  17. #17
    Contao-Nutzer Avatar von Nightwing
    Registriert seit
    29.05.2013.
    Beiträge
    170

    Standard

    Hallo,

    ich persönlich nutze die umrandeten + und - Icons von Feathericons (sollte dadurch auch intuitiv sein?!), dazu hab ich mir die Templates für News und Events zum Akkordeon umgeschrieben: click me
    CSS dazu:
    Code:
    /* Akkordeon Inhalt */
    .accordion {
        padding-left:2em;
    }
    
    /* Akkordeon Toggler */
    .toggler {
        padding-left:2em;
        vertical-align:middle;
        background-image:url("files/layout/svg_icons/plus-square.svg");
        background-position:left center;
        background-repeat:no-repeat;
        background-size: 18px;
        cursor: pointer;
        /* WebKit */ -webkit-transition: color 500ms ease-in-out;
        /* Firefox */ -moz-transition: color 500ms ease-in-out;
        /* Opera */ -o-transition: color 500ms ease-in-out;
        /* Standard */ transition: color 500ms ease-in-out;
    }
    
    /* Akkordeon Toggler Hover */
    .toggler:hover {
        color:#f60;
        /* WebKit */ -webkit-transition: color 500ms ease-in-out;
        /* Firefox */ -moz-transition: color 500ms ease-in-out;
        /* Opera */ -o-transition: color 500ms ease-in-out;
        /* Standard */ transition: color 500ms ease-in-out;
    }
    
    /* Akkordeon Toggler Aktiv */
    .toggler.active {
        background-image:url("files/layout/svg_icons/minus-square.svg");
        background-position:left center;
        background-repeat:no-repeat;
        background-size: 18px;
    }
    Man köönte das Icon evtl auch noch pulsierend animieren?

    ToM
    Mein kleiner Contao Spielplatz - Status: Portierung von 2.11.17 auf 4.7.x in Arbyte... Fertsch :-)

  18. #18
    Contao-Nutzer
    Registriert seit
    03.05.2019.
    Beiträge
    49

    Standard

    Zitat Zitat von Nightwing Beitrag anzeigen
    Man köönte das Icon evtl auch noch pulsierend animieren?
    ToM
    Eventuell mit zoom oder rotate bei hover.....

    Code:
    yourClass {
        width: 14px;
        height: 14px;
        border-radius: 9px;
        -moz-border-radius: 9px;
        -webkit-border-radius: 9px;
        border: 2px solid #ffaf04;
        display: block;
        position: absolute;
        left: -4px;
        top: -4px;
        -webkit-animation: pulsate 1s ease-out;
        -webkit-animation-iteration-count: infinite; 
        opacity: 0.0
    }
    @-webkit-keyframes pulsate {
        0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
        50% {opacity: 1.0;}
        100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
    }
    z.B.

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
  •