[GELÖST] Aufzählungsliste mit dropdown bzw. onklick Blättereffekt

langweilo · 13. Januar 2012 20:25

Hallo ihr, in der letzten Zeit häufen sich meine Fragen, tut mir Leid!

Ich such was wo ich nicht mal weiß wie man es nennt... habe Google und sämtliche Foren gequält und nichts gefunden.

ich möchte eine übliche Aufzählung wie die folgende auf- und einklappen können:

Hier klicken, um den Code zum Kopieren zu markieren

[== html ==]
<ul>
 <li>Überschrift
  <ul>
   <li>Menüpunkt 1</li>
   <li>Menüpunkt 2</li>
   <li>Menüpunkt 3</li>
   <li>Menüpunkt 4</li>
  </ul>
 </li>
</ul>

Sozusagen soll nur die Überschrift zu lesen sein, wenn man diese dann anklickt sollen die Unterpunkte erscheinen.
des weiteren wünsche ich mir das es ohne jquery oder js funktioniert, nach Möglichkeit wie die üblichen MouseOver Menüs nur mit CSS.

kennt jemand so was oder hat er einen Ansatz für mich wie ich das umsetzen könnte?

Geht darum, ich suche für eine Seite die mit CMSMS erstellte ist und welche viele Auszählungen hat eine Möglichkeit diese Übersichtlicher zu gestalten.

Danke für eure Hilfe.

EDIT:
Hab beim CMS Contao was gefunden was sich Accordion nennt, das wäre so ziemlich das was ich suche.
gibt es sowas vür CMSMS als Modul wie für Contao?

Beitrag geändert von langweilo (13. Januar 2012 20:43)

nicmare · 13. Januar 2012 20:33

dropdown/select menü?! das ist ein formularelement

Beitrag geändert von nicmare (13. Januar 2012 20:34)

langweilo · 13. Januar 2012 20:50

NEIN! ich suche kein INPUT Feld sondern ich möchte wirklich eine Übliche aufzählung auf- und zuklappen.

also ich habe z.b. die Überschrift Gummibärchen
darunter stehen dann folgende Punkte: wie Saure Stäbchen, Vitamin Bären, Saft Bären, Wein Gummis usw.

•Gummibärchen
· Saure Stäbchen
· Vitamin Bären
· Wein Gummis
· ...

•Chips
· Kartoffelchips
· Erdnuss Flips
· Käse Chips

ich möchte nun das die unteren nur zu sehen sind wenn man auf den Hauptpunkt der Aufzählung (im Beispiel auf Gummibärchen oder Chips) klickt.

sonst sieht es einfach nur so aus:

•Gummibärchen

•Chips

Beitrag geändert von langweilo (13. Januar 2012 20:54)

nicmare · 13. Januar 2012 20:55

ja das geht aber nur mit Javascript!!

langweilo · 13. Januar 2012 21:00

Danke zunächst,
also komm ich um JS nicht herum...
naja setzen wir da mal an.

gibt es da ein Modul für cmsms was solche ausklappbaren listen ermöglicht?

piratos · 13. Januar 2012 21:03

Nix JS CSS reicht - Beispiel hier : http://www.paulrhayes.com/2009-06/accor … -only-css/

Habe ich in ähnlicher Form auch einige Male im Einsatz.

langweilo · 13. Januar 2012 21:09

piratos schrieb:

Nix JS CSS reicht - Beispiel hier : http://www.paulrhayes.com/2009-06/accor … -only-css/
Habe ich in ähnlicher Form auch einige Male im Einsatz.

... ja, das kommt dem schon sehr nahe.

leider soll es aber von Haus aus zugeklappt sein, also keine der Untereinträge sichtbar sein.
auch ist die fixe höhe in dem Beispiel von immer 100px nicht sehr sinnvoll, da leider die Aufzählungen immer unterschiedlich lang sind.
und eine Scrolbar im Aufgeklappten Element fände ich nicht so schön.

langweilo · 13. Januar 2012 21:12

ich hab eben was gefunden was meiner Vorstellung recht gut entspricht:
http://www.web-toolbox.net/webtoolbox/m … lappen.htm

schade das es nicht so ein schönes Modul wie das Accordium bei Contao CMS gibt, aber ich versuche das mal einzubinden. freu mich natürlich wenn wer noch eine Idee hat.

Beitrag geändert von langweilo (13. Januar 2012 21:13)

piratos · 13. Januar 2012 21:28

Also ...

Menüs nur mit CSS und mit 1 aufgeklappten oder keinen gibt es zu hunderten man sollte mal nach accordion css menus suchen.

Weiteres Beispiel: http://webstandard.kulando.de/static/css3-accordionMenu

Für so etwas wird überhaupt kein weiteres Module benötigt, Template und CSS reichen.

Beitrag geändert von piratos (13. Januar 2012 21:29)

Andynium · 13. Januar 2012 21:31

Hier gibt's noch mehr Beispiele

http://www.1stwebdesigner.com/freebies/ … tutorials/

Und das mit dem zusammen geklappt sein wird meistens über einen Parameter collapse festgelegt wink .

langweilo · 13. Januar 2012 21:37

danke, ja grundsätzlich schon, aber auch dieses Beispiel hat pro aufklapeffeckt immer die selbe fixe Höhe, wenn die Aufzählung mal länger ist kommt eine scrollbar rein, das finde ich nicht schon.

ich komm natürlich auch mit dem HTML und CMS klar, mir geht es aber um meinen kunden, der hat null Dunst von HTML.
ich hatte mir es so gedacht das er einfach eine Aufzählung in einem Modul erstellt und letztlich nur noch die smaty variable auf der gewünschten Seite einfügen muss.

wird also wohl doch ewas mehr erklärung als ich dachte :-( mal sehen wie ich dem Kunden das nahe bringe...

Andynium · 13. Januar 2012 21:42

Für Aufzählungen ein eigenes Modul zu verwenden ist IMHO etwas überdimensioniert, aber letzten Endes kannst du ListItExtended verwenden und dort ein entsprechendes Template bereitstellen, der den ganzen Formatierungs-Kram übernimmt, so dass du deinem Kunden eigentlich (fast) nix erklären musst.

langweilo · 14. Januar 2012 00:25

Danke an alle, ich habe es jetzt doch mit jquery gelöst.

habe die Version "4a. Accordion 1" von folgender seite genommen
http://www.webdesignerwall.com/demo/jquery/

konnte ich mit css gut meinem style anpassen zudem arbeitet es ohne großartige befehle.
mein Kunde muss nur innerhalb eines div mit ID die <h3>Überschrift</u> und den <p>Inhalt</p> deklarieren, fertig.

Forum für CMS/made simple

#1 13. Januar 2012 20:25

[GELÖST] Aufzählungsliste mit dropdown bzw. onklick Blättereffekt

#2 13. Januar 2012 20:33

Re: [GELÖST] Aufzählungsliste mit dropdown bzw. onklick Blättereffekt

#3 13. Januar 2012 20:50

Re: [GELÖST] Aufzählungsliste mit dropdown bzw. onklick Blättereffekt

#4 13. Januar 2012 20:55

Re: [GELÖST] Aufzählungsliste mit dropdown bzw. onklick Blättereffekt

#5 13. Januar 2012 21:00

Re: [GELÖST] Aufzählungsliste mit dropdown bzw. onklick Blättereffekt

#6 13. Januar 2012 21:03

Re: [GELÖST] Aufzählungsliste mit dropdown bzw. onklick Blättereffekt

#7 13. Januar 2012 21:09

Re: [GELÖST] Aufzählungsliste mit dropdown bzw. onklick Blättereffekt

#8 13. Januar 2012 21:12

Re: [GELÖST] Aufzählungsliste mit dropdown bzw. onklick Blättereffekt

#9 13. Januar 2012 21:28

Re: [GELÖST] Aufzählungsliste mit dropdown bzw. onklick Blättereffekt

#10 13. Januar 2012 21:31

Re: [GELÖST] Aufzählungsliste mit dropdown bzw. onklick Blättereffekt

#11 13. Januar 2012 21:37

Re: [GELÖST] Aufzählungsliste mit dropdown bzw. onklick Blättereffekt

#12 13. Januar 2012 21:42

Re: [GELÖST] Aufzählungsliste mit dropdown bzw. onklick Blättereffekt

#13 14. Januar 2012 00:25

Re: [GELÖST] Aufzählungsliste mit dropdown bzw. onklick Blättereffekt

Fußzeile des Forums