Hilfe zu "Accordion Menü"

  • Hallo,

    ich habe an sich nur ein kleines Problem, jedoch komme ich ums Verrecken auf keine Lösung:
    Ich habe ein simples Accordion Menü erstellt, funktioniert auch soweit, wie gewünscht. Jedoch! Wenn ich auf einen Button klicke, bei dem Unterpunkte aufgleiten sollen, "scrollt" es immer bis zu dem Punkt runter wo sich der Button befindet. Ich möchte aber, dass alleine die Unterpunkte aufgleiten, ohne dass es herunterscrollt. Der "Standpunkt", an dem die Seite war, soll also bleiben.
    Hier mal der simple Aufbau (ich hab Dinge über und unter das Menü gesetzt, um es zu veranschaulichen):

    ...und das zugehörige CSS...

    Vielen Dank, schonmal im Vorraus :D


  • eine Verständnisfrage: Suchst du ein Akkordeon rein auf CSS-Basis darf auch JavaScript / jQuery im Spiel sein?


    Naja Vorzugsweise mit CSS und Javascript. Wenns unbedingt mit jQuery sein muss, dann meinetwegen auch.

    Das Komische ist, wenn ich mein Menu blanko (also ohne Textinhalt in meiner Website) teste, funktioniert alles einwandfrei. Alleine wenn ich Text unter dem "Accordion Menü" habe oder daneben, fängt es an, dorthin zu scrollen. Warum???? :confused:

    Einmal editiert, zuletzt von elmaex (17. April 2014 um 13:01)

  • Hallo,

    erst mal eine Seite mit deinen Angaben:

    http://foreninfo.bplaced.net/seiten_fremdpr…_accordeon.html

    Ich habe selbst eine reine css-Lösung gesucht. Und bin dann auf folgende gestoßen. Der Quelltext beinhaltet alle Angaben, alle css-Angaben befinden sich im head-Bereich:

    http://foreninfo.bplaced.net/seiten_fremdpr…_accordeon.html

    Ich habe das css so unterteilt, das die Angaben zum Layout und zur Funktion unterteilt sind.

    Der Öffnungseffekt funktioniert nur, wenn die Höhe das aufzuklappenden Bereichs fest vorgegeben ist. Wenn Einträge hinzugefügt werden muss also auch das css angepasst werden. Deshalb habe ich auch eine Version erstellt, deren Öffnungsbereich sich dem jeweiligen Inhalt anpasst:

    http://foreninfo.bplaced.net/seiten_fremdpr…_accordeon.html

    Das Layout habe ich so belassen, wie ich es im Internet gefunden haben. Die Farben, Größen, Abstände u.s.w. können natürlich beliebig angepasst werden. Zum Test habe ich mal eine Datei ohne Layout erstellt. Im css befinden sich also nur die Angaben, die zur Funktion benötigt werden. Zum Aufklappen muss auf den Text "Menu1" geklickt werden:

    http://foreninfo.bplaced.net/seiten_fremdpr…_accordeon.html

    Und dann noch mal ein Beispiel mit mehreren aufklappbaren Bereichen und Text dazwischen.

    http://foreninfo.bplaced.net/seiten_fremdpr…_accordeon.html

    Mir gefällt zum einen, das man frei bestimmen kann, ob die einzelnen Bereiche geöffnet oder geschlossen sind. Es wird also nicht zwangsweise ein Bereich geschlossen, wenn ein anderer geöffnet wird.

    Un zum andern bleibt der Bereich, auf den geklickt werden muss, um Bereiche zu öffnen oder zu schließen, an seiner Position am Bildschirm. Der Besucher muss also nicht suchen oder gar scrollen um direkt weiterlesen zu können.

    Getestet habe ich das unter IE11, die aktuellen FF, Chrome und Opera. Außerdem auf einem Samsung Smartphone.

    Etwas rumgezickt hat die Aufklappfunktion und Optik unter dem Safari, wobei ich unter Windows nur eine relativ alte Version habe. Das Problem ist, das die Auf- und Zuklappfunktion nach dem Klicken erst aktiv wird, wenn der Mauszeiger außerhalb des klickbaren Bereichs gezogen wird. Es wäre schön wenn jemand berichten würde, wie das beim aktuellen Safari besser funktioniert. Und auch auf ipad und iphone.

    Gruss

    MrMurphy