English Version medianotions.de RSS-Feed abonnieren

23.03.2008

MooTools: Verschachteltes Accordion

Themen: JavaScript, MooTools, AJAX | zuletzt bearbeitet: 30.06.2009


Update: 03. September 2008

Zunächst möchte ich mich für die vielen positiven Rückmeldungen bedanken, ich habe nicht mit so einer großen Resonanz gerechnet. Im folgenden einige wichtige Hinweise zu Fragen die immer wieder gestellt werden:

Kompatibilität mit MooTools 1.2

Das verschachtelte Accordion läuft ohne Anpassungen auch mit MooTools 1.2. Ich habe den Bereich Demo und Download um Versionen mit MooTools 1.2 aktualisiert

Entwicklung und Support

Das verschachtelte Accordion ist im Rahmen eines Kundenprojekts entstanden und ich teile das Know-How und den Quelltext gerne mit allen die daran interessiert sind. Der Code wird von mir aber nicht weiter entwickelt oder mit neuen Funktionen ausgebaut und ich biete dafür auch keinen Support an.

Anwendung

Bitte verwendet das verschachtelte Accordion nicht um komplette Websites damit aufzubauen. Eure Besucher können sonst keine Unterseiten als Bookmark ablegen, in Browser-Tabs öffnen oder als Link versenden.

Vor Kurzem hatte ich die Herausforderung ein verschachteltes MooTools-Accordion umzusetzen, das sich zudem semantisch korrekt als HTML-DL-Liste aufbaut. Da ich in Sachen MooTools und objektorientierter JavaScript-Programmierung eher ein Neuling bin, machte ich mich auf die Suche nach fertigen Lösungen und wurde auf dem Blog von Ryan Jauregui teilweise fündig.

Eigene Anpassungen

Was mir jetzt noch fehlte war die HTML-DL-Liste und einige Modifikationen am JavaScript um das Accordion mehr meinen Vorstellungen entsprechen zu lassen. Nach einigem probieren und studieren ist ein beliebig tief schachtelbares Accordion herausgekommen, das mit DL-, DT-, und DL-Tags und einer Hand voll CSS-Klassen auskommt. Dabei ist das JavaScript so aufgebaut, dass es keinerlei Anpassungen bedarf, wenn eine weitere Schachtelungs-Ebene hinzukommt. Beim Aufbau des HTML sind allerdings die CSS-Klassen zu beachten.

Zur Demo

Die Plus- und Minus-Icons sind Teil der Silk-Icon-Serie von Mark James. Die Farbgebung ist von dem Farbset „sandy stone beach ocean diver“ auf Adobes kuler-Web-Applikation inspiriert. Ach ja und die Kategorien sind Wikipedia geschuldet und natürlich nicht vollständig.

HTML | index.html

		

		
			
				

				Verschachteltes Mootols-Accordion

						
				

					
				

				
				
			

			

				

Verschachteltes
Mootols-Accordion

Fische
Knochenfische
Aalartige

Beispiel-Inhalt: Aalartige

Barschartige

Beispiel-Inhalt: Barschartige

Hechtartige

Beispiel-Inhalt: Hechtartige

Störartige

Beispiel-Inhalt: Störartige

Knorpelfische
Ammenhaiartige

Beispiel-Inhalt: Ammenhaiartige

Grundhaie

Beispiel-Inhalt: Grundhaie

Makrelenhaiartige

Beispiel-Inhalt: Makrelenhaiartige

Rochen

Beispiel-Inhalt: Rochen

Süßwasserfische

Beispiel-Inhalt: Süßwasserfische

Vögel
Eisvogelartige

Beispiel-Inhalt: Eisvogelartige

Eulen
Eigentliche Eulen

Beispiel-Inhalt: Eigentliche Eulen

Schleiereulen

Beispiel-Inhalt: Schleiereulen

Gänsevögel
Entenvögel
Gänserasse

Beispiel-Inhalt: Gänserasse

Hausentenrassen

Beispiel-Inhalt: Hausentenrassen

Greifvögel
Falkenartige

Beispiel-Inhalt: Falkenartige

Habichtartige

Beispiel-Inhalt: Habichtartige

Reptilien

Beispiel-Inhalt: Hier hatte ich dann doch keine Lust mehr, Zusendungen erwünscht.

Säugetiere

Beispiel-Inhalt: Hier hatte ich dann doch keine Lust mehr, Zusendungen erwünscht.

JavaScript | functions.js

		window.addEvent('domready', function() {

			// Anpassung IE6
			if(window.ie6) var heightValue='100%';
			else var heightValue='';

			// Selektoren der Container für Schalter und Inhalt
			var togglerName='dt.accordion_toggler_';
			var contentName='dd.accordion_content_';


			// Selektoren setzen
			var counter=1;	
			var toggler=$$(togglerName+counter);
			var content=$$(contentName+counter);

			while(toggler.length>0)
			{
				// Accordion anwenden
				new Accordion(toggler, content, {
					opacity: false,
					display: -1,
					alwaysHide: true,
					onComplete: function() { 
						var element=$(this.elements[this.previous]);
						if(element && element.offsetHeight>0) element.setStyle('height', heightValue);			
					},
					onActive: function(toggler, content) {
						toggler.addClass('open');
					},
					onBackground: function(toggler, content) {
						toggler.removeClass('open');
					}
				});

				// Selektoren für nächstes Level setzen
				counter++;
				toggler=$$(togglerName+counter);
				content=$$(contentName+counter);
			}
		});
	

CSS | styles.css

		/* @group Reset */

		*
		{
			margin: 0;
			padding: 0;

			font-family: verdana, arial, sans-serif;
			font-size: 11px;
			line-height: 15px;
		}

		/* @end */

		/* @group Allgemeine Definitionen */

		body
		{
			margin: 20px auto;
			padding: 20px;

			width: 250px;
			border: 1px solid #509bba;
		}

		h1 
		{
			margin-bottom: 15px;

			font-size: 20px;
			line-height: 22px;
			font-weight: normal;

			color: #509bba;
		}

		/* @end */

		/* @group Accordion */

		dl.accordion
		{
			width: 250px;

			border-left: 1px solid #e6e2af;
			border-right: 1px solid #e6e2af;
			border-bottom: 1px solid #e6e2af;
		}

		/* @group Ebene 1 */

		dl.accordion dt
		{
			position: relative;
			height: 20px;
			padding: 5px 0 2px 25px;

			font-weight: bold;

			color: white;
			background: #00506c url(icon_accordion_closed.png) no-repeat 5px 5px;

			cursor: pointer;
			border-top: 1px solid #e6e2af;
		}

		* html dl.accordion dt
		{
			cursor: hand;
		}

		dl.accordion dt.open
		{
			background-image: url(icon_accordion_open.png);
		}

		dl.accordion dd
		{
			background: #efecca;
		}

		/* @group Inhalt */

		dl.accordion dd.sub_accordion
		{

		}

		dl.accordion dd.accordion_content
		{
			padding: 0 10px 0 25px;
		}

		dl.accordion dd.accordion_content p
		{
			padding: 5px 0 7px 0;
		}

		/* @end */

		/* @end */

		/* @group Ebene 2 */

		dl.accordion dd dl dt
		{
			padding-left: 45px;
			background-color: #217492;
			background-position: 25px 5px;
		}

		dl.accordion dd dl dd.accordion_content
		{
			padding-left: 45px;
		}

		/* @end */

		/* @group Ebene 3 */

		dl.accordion dd dl dd dl dt
		{
			padding-left: 65px;
			background-color: #509bba;
			background-position: 45px 5px;
		}

		dl.accordion dd dl dd dl dd.accordion_content
		{
			padding-left: 65px;
		}

		/* @end */

		/* @group Ebene 4 */

		dl.accordion dd dl dd dl dd dl dt
		{
			padding-left: 85px;
			background-color: #7bc3e4;
			background-position: 65px 5px;
		}

		dl.accordion dd dl dd dl dd dl dd.accordion_content
		{
			padding-left: 85px;
		}

		/* @end */

		/* @end */
	

Die CSS-Klassen

accordion
Bezeichnung des DL-Hauptcontainers.

accordion_toggler_X
Bezeichnung des Schalters gefolgt von der Schachtelungstiefe.

accordion_content_X
Bezeichnung des Inhalts gefolgt von der Schachtelungstiefe.

sub_accordion
Bezeichnung des DL-Containers wenn dieser weitere Accordions enthält – optional.

accordion_content
Bezeichnung des DL-Containers wenn dieser Inhalte enthält – optional.


Bookmark setzen oder Seite empfehlen

Kommentar schreiben

Die Kommentarfunktion ist nicht mehr aktiv

62 Kommentare

Andreas Griebl

08.03.2013 12:51:39

Hmpf,–- grrr. Trick 17 mit Selbstüberlistung…

Bei der Datei functions.js habe ich das s vergessen…

Tja, wenn man nicht genau hinschaut!

Andreas zur Website

08.03.2013 12:50:04

Moin, moin aus dem Norden!

ich habe ein kleines Problem mit Ihrem Skript - welches ich nicht richtig verstehe:

Wenn ich mir die Demo anschaue, funktioniert es hervorragend und so wie ich es gebrauchen kann - jedoch, wenn ich mir die einzelnen Teile dementsprechend erzeuge, erhalte ich ein Menü, welches komplett aufgeklappt ist und sich weder schließen noch öffnen lässt.

ich habe mir auch die mootools-1.2.js erzeugt (Webdeveloper -> code anzeigen, copy/paste).
Wenn ich die einzelnen Dateien mir anschaue, sind alle Verknüpfungen und Inhalte gleich, alle Dateien liegen im lokalen Root-Verzeichnis und die Icons funktionieren auch… nur will das einfach nicht öffnen/schließen.

Eine Ahnung, woran das liegen könnte?

Über eine Hilfe wäre ich sehr dankbar!

Sailee

27.05.2011 10:15:35

Hallo

Vielen Dank für dieses Skript.
Ich möchte fragen: wie sollte ich Zeitverzögerung für mousehover/mouseenter und mouseleave hinzufügen? Jetzt ist es zu schnell.
Bitte helfen! Ich würde es begrüßen!
Entschuldigen Sie mich für mein schlechtes Deutsch.
Ich war in Deutschland als Austauschschuelerin 11 Jahre her, deshalb habe ich vieles verlernt!!

Danke im Voraus

Sailee aus Indien

Seo Matrix zur Website

19.04.2011 18:11:50

Ich setze sowohl Mootools ein als auch Z.b. Flash Akkordions - in jedem Fall eine feine Sache und macht vom Layout viel her.

Bogdan Günther zur Website

04.03.2011 17:39:31

Hallo Thomas,

ich vermute, dass auf deinem Produktiv-System die Pfade zu den zum Accordion gehörenden Skripten nicht mehr passen und diese erst gar nicht geladen werden. Das würde ich als erstes prüfen.

Viel Erfolg,
Bogdan

Thomas zur Website

04.03.2011 14:11:53

Hallo allerseits,

das Accordion ist super, funktioniert auf meinem Demo-Server auch hervorstechend - nur am Produktiv-Server bei UPC gehts nicht - die Accordions gehen dort überhaupt nicht auf.

Hat Mootools irgendwelche Voraussetzungen, die man noch providerseitig freischalten müssten?

lg Thomas

Lopez

27.01.2011 10:22:01

Leider eignet ich der Code nicht für automatische/rekursive Funkionen zum Aufbauen von verschachtelten Daten (zB Verzeichnisse). Schade.

monica

20.12.2010 15:55:04

Hallo

Vielen Dank für diesen tollen Code für ein verschachteltes Accordion. Er ist eine wirklich wervolle Hilfe für mich!!

Vielen Dank und frohe Weihnachten!
lg, monica

a zur Website

25.11.2010 14:09:30

S

Alex

05.11.2010 14:21:29

Hi,

danke für die Hinweise.
Falls es für den ein oder anderen noch interessant ist:
seit Mootools 1.2 müssen Browser anders abgefragt werden, daher funkioniert das nicht mehr:
if(window.ie6) var heightValue=’100%’;

Stattdessen muss es
if(Browser.Engine.trident4) var heightValue=’100%’;
heißen.

LG,
Alex

Bogdan zur Website

04.11.2010 10:13:59

Hallo Alex,

es freut mich, dass dir das Accordion-Menü gefällt. Ich biete allerdings wie oben beschrieben, keinen Support dafür, deswegen nur kurz:

zu 1)
Dir Original-Version mit MooTools 1.11 funktioniert im IE6 ohne Probleme, die Version mit MooTools 1.2 leider nicht mehr. Hier hat es in MooTools-Framework scheinbar Änderungen gegeben, welche die Funktionsweise im IE6 beeinträchtigen.

zu 2)
Das sollte man mit entsprechendem JavaScript / CSS eigentlich hinbekommen, ist aber nicht in der Originalversion vorgesehen.

zu 3)
Einträge wie diese:

* html dl.accordion dt
{
cursor: hand;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’icon_accordion_closed.png’, sizingMethod=’crop’);
background-image: none;
}

Viel Erfolg und schöne Grüße

Bogdan

Alex

03.11.2010 17:45:40

Hallo Bogdan,

nettes Menu, danke für die Mühe. Ich würde es gerne auf einer Seite einsetzen. Allerdings habe ich drei Fragen:

1) im IE6 sehe ich nach Aufklappen einer Root-Ebene die Sublinks nur ganz kurz, danach ist der gesamte aufgeklappte Bereich gelblich eingefärbt (mit background-color: #efecca;) und es können keine Sublinks angeklickt werden. Gibt es da ne Lösung?

2) kann man es bewerkstelligen, dass das Menu nach dem Neuladen einer Seite _keinen_ Accordion- Effekt mehr hat, sondern die übergeordneten Ebenen fest ausgeklappt sind? Grund: Wenn ein Besucher auf der dritten Ebene einen Link anklickt, wird die Seite neu geladen. Direkt nach dem Laden der Seite beginnen die einzelnen Ebenen mit Accordion Effekt auszuklappen. Das Ganze wirkt etwas unruhig, da der Besucher auf den Inhalt fixiert ist und dann zusätzlich am Rand dreimal der Accordion-Effekt ausgelöst wird.

3) ich habe das CSS überflogen, kann aber keine CSS Hacks finden, die du weiter unten in den Kommentaren erwähnt hast. Was meinst du damit?

Danke für Info und schöne Grüße,
Alex

Bogdan zur Website

25.05.2010 10:43:54

Hallo Vitali,

es freut mich, dass du das Accordion nützlich findest. Was das valide CSS angeht, habe ich in der Tat einige IE-Hacks drin. Diese kannst du aber leicht in einer separaten CSS-Datei auslagern uns mit Conditional Comments einbinden. Damit wäre dann auch das CSS valide.

Schöne Grüße

Bogdan

Vitali

23.05.2010 16:23:05

Hi Bogdan,

vielen Dank für deine Mühe, werde dafür sicher Verwendung finden. Ist auch easy zu implementieren un anzupassen.

Einziges Manko von meiner Seite ist, dass man keine CSS-valide Site bekommen.

Big THX

Bogdan zur Website

01.01.2010 13:25:50

Hi Marcus,

I am afraid you need some HTML and JavaScript skills to adapt the script as you need it. I am sorry, but at the moment I don’t have the time to provide you a ready to use solution.

Bogdan

Marcus zur Website

29.12.2009 18:11:30

And how should I do that? what is the main idea ?

Bogdan zur Website

28.12.2009 11:11:48

Hi Marcus,

yes you could modify the accordion open version of the script to not only open the first level but also the next ones.

Bogdan

Marcus zur Website

27.12.2009 22:57:55

Hi, how to trigger meniu if it is multilevel and I need to trigger for example third or fourtht level meniu item ? becouse I need trigger all above levels… i think

mic zur Website

18.12.2009 10:50:03

Hab es schon gelöst :)

Typo lässt grüssen.

Danke.

Bogdan zur Website

15.12.2009 19:02:15

Hallo mic,

sei mir nicht böse, wenn ich das so direkt sage, aber:

a) Du hast dir nicht einmal die Mühe gemacht dein Problem mit Opera genauer zu beschreiben. Warum sollte sich jemand die Mühe machen darauf zu antworten, wenn nicht einmal das Problem klar umrissen ist.

b) Wie am Anfang des Artikels beschrieben, biete ich für dieses Skript keinen aktiven Support.

Danke für dein Verständnis

Bogdan

mic zur Website

15.12.2009 18:31:48

schade, scheint wohl tot zu sein hier :(

mic

01.12.2009 09:24:34

hallo.

habe ein kleines problem mit dem opera 10 und könnte etwas hilfe gebrauchen.

:-)

gruß,

mic

Bogdan zur Website

16.10.2009 09:39:01

Hallo Simon,

der JavaScript-Code den du ansprichst dient ja dazu ein Accordion-Element per Voreinstellung zu öffnen und ist bereits in die Version „Accordion offen“ des Skripts eingeflossen. Du musst diese Version also nur runter laden und entsprechend anpassen, weitere Änderungen am JavaScript-Quelltext sind eigentlich nicht notwendig.

Viel Erfolg

Bogdan

Simon

15.10.2009 18:11:08

Hallo Bogdan,

auch von mir nochmals ein großes Lob, für das schöne Menü.
Ich würde es gerne auf einer Webseite einsetzen und komme auch nach mehrmaligem durchlesen der Kommentare und der darin enthaltenen Hilfestellung deinerseits nicht weiter mit der Funktion

$(‘open_accordion_entry’).fireEvent(‘click’);

sobald ich diese ans Ende der funktion.js setze klappt das ganze Menü auf. Ich dachte ich habe es verstanden, wie man einem item eine id gibt, die sobald die Seite geladen ist das Event „abfeuert“, so dass nur dieses Element ausgeklappt bleibt.

Die letzten Zeilen meiner (deiner) funktion.js sind wie folgt:

..

// Selektoren für nächstes Level setzen
counter++;
toggler=$$(togglerName+counter);
content=$$(contentName+counter);
}

$(‘open_accordion_entry’).fireEvent(‘click’);

});

Leider gibt er mir in der verknüpften html-Seite einen Syntaxfehler.
Unten schreibst du, dass du evtl. eine Beispieldatei o.ä. hättest.

Wäre es möglich diese Beipieldatei einzusehen oder hast du noch andere Ideen?

Danke Simon

Bogdan zur Website

22.09.2009 23:34:20

Hallo Ashkan,

du kannst das Accordion frei benutzen, auch für kommerzielle Websites. Wenn du irgendwo auf der Website hier auf meinen Blog verlinken würdest, würde ich mich natürlich freuen.

Viel Spaß mit dem MooTools Accordion

Bogdan

AShkan zur Website

22.09.2009 21:56:58

hallo. Super geile Arbeit. Darf ich das in eine Kommerzielle Seite einbauen, oder ist es von Dir nicht erlaubt. Ich finde keine Lizenz Informationen.
Danke

Hallo Vanessa zur Website

01.09.2009 09:48:48

Hallo Vanessa,

jetzt verstehe ich was du meist :-)

Leider kann man diese beiden Eigenschaften soweit ich das Überblicke mit diesem Skript nicht kombinieren. Du musst dich also für eine Variante entscheiden, sorry.

Schöne Grüße
Bogdan

Vanessa

01.09.2009 09:09:47

Guten Morgen Bogdan,

danke erstmal für deine schnelle Reaktion. :)

Wenn ich bei der Demo "Accordion offen" z.B. den Container "Vögel" öffne und danach nochmal auf "Vögel" klicke, schließt sich dieser Container nicht. Das ist scheinbar nur bei der "Accordion standard" Version möglich. Ich würde jetzt gerne beide Versionen miteinander kombinieren und den ersten Container standardmäßig offen lassen, aber auch wieder schließen können, sobald ich auf ihn klicke.^^

Ist das irgendwie möglich?

LG
Vanessa

Bogdan zur Website

01.09.2009 08:51:23

Hallo Vanessa,

die in der Demo "Accordion offen" lassen sich die Container auch problemlos wieder schließen, von daher verstehe ich das Problem nicht ganz. Reicht die Funktonalität des "Accordion offen" nicht aus?

Schöne Grüße
Bogdan

Vanessa

31.08.2009 19:53:06

Du hast mich mit diesem Script gerettet! :D
Allerdings habe ich trotzdem noch eine Frage. :)

Ich habe auf einer Seite mehrere Container. Ich möchte, dass der erste Container standardmäßig geöffnet ist. Wenn ich diesem Container id="open_accordion_entry" zuweise und auch den entsprechenden Javascript Schnipsel hinzufüge, klappt zwar alles wunderbar, aber die Container lassen sich nun nicht mehr schließen. Sobald ich im JS Code "alwaysHide: true" hinzufüge, lassen sich alle wieder öffnen und schließen aber der erste Container ist wieder geschlossen.

Ich hoffe, du verstehst was ich meine… xD
Gibt es da eine Lösung für dieses Problem?

LG Vanessa

Bogdan zur Website

24.07.2009 10:18:46

Hallo Alex,

vermutlich ein Problem beim einbinden über Include. Kannst du mir einen Link per Mail senden (bogdan.guenther@medianotions.de) wo ich mir das mal ansehen kann?

Schöne Grüße

Bogdan

Alex zur Website

23.07.2009 17:10:39

Hey,

Danke für dieses super Menü.
Ich habe leider ein Problem, ich habe eine index.php und lade das menü und den inhalt via include und switch.

Nun bleibt leider das menü immer auf.
Irgendeine idee?

LG
Alex

Mike zur Website

14.05.2009 19:32:26

Hey, ziemlich cool - werde mal sehen ob ich dafür Verwendung finde.
Auch sonst eine sehr interessante Seite,
werde wohl ab und an mal wieder reinschauen.

Gruß Mike.

Camar

11.05.2009 10:31:23

Hallo Bogdan,

vielen Dank für die schenlle Antwort.
Das Einrücken nach Link habe ich im CSS geändert und mit IE6-Problem kann man leider nichts machen.

Vielen Dank für deine unterstützung.
EINFACH KLASSE

lg. Camar

Bogdan zur Website

11.05.2009 10:20:33

Hallo Camar,

freut mich, dass dir das Accordion gefällt.

Zu Frage 1: Anpassungen am Layout nimmst du am besten im CSS vor. Die entsprechenden CSS-Klassen sind dort ziemlich einfach zu finden.

Zu Frage 2: Das Problem, dass du beschreibst tritt nur im Internet Explorer 6 auf. Da ich das Skript aktuell nicht weiter entwickle wird es wohl auch dabei bleiben. Hoffen wir mal, dass der IE6 als größte Plage für moderne Webdesigner bald unter einem relevanten Marktanteil rutscht!

Schöne Grüße und viel Erfolg

Bogdan

Bogdan zur Website

11.05.2009 10:11:09

Hallo Sven,

nun ja, dass niemand einen Kommentar hinterlassen hat kann man nicht sagen, immerhin sind es jetzt 26 Kommentare. Aber es stimmt schon auf der englischsprachigen Version gibt es deutlich mehr Feedback. Deutsche Besucher sind einfach zu schüchtern :-)

Schöne Grüße

Bogdan

Camar

10.05.2009 23:13:49

Hi, vielen dank dür das Accordion, den ich momentan anpasse.
Ich möchte zwei Änderungen vornehmen, aber leider alle meine Versuche waren Erfolglos.
Hier:
1- wo kann ich der Abstand der Accordion Inhalt nach Links verringern (accordion_toggler, accordion_content und p)?
2- wenn man auf einem Schalter in der 3. Ebene klinkt, erscheint der Inhalt, was man unter p eingetragen hat. Wenn man auf den nächsten klickt, geht der Accordion zuerst nach Unten, dann nach oben. es schein, das dieses Effekt ansichtlich ist. Wie kann ich so es verhindern?

ich bitte um Hilfe. Vielen Dank im Voraus

lg. Camar

Sven - Chongqing zur Website

08.05.2009 20:52:29

Hi,

schade das noch keiner einen Kommentar hinterlassen hat. Vielen vielen Dank für das Script! Genau sowas suchte ich für eine FAQ, da hier die Bereiche auch vom Überbegriff hin zum Speziellen gehen sollen. Sehr sehr cool!

Beste Grüße,
Sven

Bogdan zur Website

11.03.2009 20:49:15

Hallo Sebastian,

schreib mir doch einfach eine E-Mail an bg@medianotions.de, dann sende ich dir ein Beispiel.

Schöne Grüße

Bogdan

Sebastian

11.03.2009 19:59:13

Hallo Bogdan

leider habe ich es immer noch nicht geschafft, das Menü dazu zu bewegen, an der gewünschten Stelle offen zu sein. Ich werde hier einen Link posten, sobald das Projekt online ist, es wäre toll, wenn du mir dann auf die Sprünge helfen könntest.

Sebastian

Bogdan zur Website

11.03.2009 15:26:43

Hallo Sebastian,

der Schnipsel kommt in die functions.js ans Ende der Domready-Funktion:

window.addEvent(‘domready’, function() {
[…]
$(‘open_accordion_entry’).fireEvent(‘click’);
)};

Das bewirkt, dass nach dem alles aufgebaut ist das Accordion mit der id="open_accordion_entry" via JavaScript ein Klick-Event abfeuert und sich somit öffnet.

Schöne Grüße

Bogdan

Sebastian

10.03.2009 19:42:37

Hallo Bogdan

danke, im Nachhinein habe ich auch gesehen, dass diese Lösung unten schon stand. Leider bin ich daraus nicht sehr schlau geworden, wo soll den der Javascript-Schnippsel hin?

In den HTML-Quellcode, oder in die functions.js?

Sebastian

Bogdan zur Website

10.03.2009 09:52:09

Hallo Sebastian,

schön, dass du das Menü für deine Website benutzt. Eine eingebaute Möglichkeit ein bestimmten Eintrag im Menü zu öffnen gibt es nicht, aber du kannst eine entsprechende ID setzen id="open_accordion_entry" und dann mit $(‘open_accordion_entry’).fireEvent(‘click’); das öffnen realisieren.

Viel Erfolg!

Bogdan

Sebastian

08.03.2009 20:25:57

Vielen Dank für das tolle Menü, ich habe es für mich auf UL-Listen umgebaut und es funktioniert trotzdem tadellos!

Kennst du irgendeine Möglichkeit, den Teil des Menüs, in dem die aktive Seite liegt, standardmäßig zu öffnen, sodass der Nutzer erkennt, wo er sich gerade befindet und auch leicht auf Seiten der gleichen Ebene wechseln kann?

Sebastian

Bogdan zur Website

26.02.2009 15:23:49

Hall Andy,

danke für die Blumen! Zu deinem Problem fällt mir spontan leider nichts ein, hast du eine Test-Seite auf der ich mir das mal ansehen kann?

Schöne Grüße

Bogdan

Andy

26.02.2009 12:52:57

Hallo Bogdan,

ich bastel schon ein paar Tage mit Deinem Accordionmenü, gefällt mir sehr gut.

Eine Frage habe ich allerdings noch:

Wenn sich im Untermenü´s ein Link befindet, welcher einen Content in einen entsprechenden Container auf der Website anzeigen soll, wird beim Klick auf den Link das Menü vollständig geschlossen.

Was lässt sich da machen ?

Gruss Andy

Bogdan zur Website

20.01.2009 11:21:52

Ich merke gerade, dass ich einen Teil des Snippets unterschlagen habe, hier noch mal komplett:

<dt class="accordion_toggler_1"><a href="#" class="navi_1" id="open_accordion_entry">Gemeinde</a></dt>
<dd class=" accordion_content_1">
<a href="/gemeinde/index.php" class="navi_2">Ortsteile</a><br />
<a href="/gemeinde/sprechzeiten.php" class="navi_2">Sprechzeiten</a>
</dd>



window.addEvent(‘load’, function() {
$(‘open_accordion_entry’).fireEvent(‘click’);
});

Viel Erfolg!

Bogdan zur Website

19.01.2009 14:02:47

Hast du einen Link für mich wo ich mir das ganze live ansehen kann?

Danke,
Bogdan

Aro zur Website

19.01.2009 13:17:02

Hallo,
danke für die Hilfe - aber leider klappt das nicht, die Navi bleibt geschlossen und wird erst auf tatsächlichen Klick geöffnet :-(
Muss ich in der CSS-Datei noch was ändern?
Tschau
Aro

Bogdan zur Website

19.01.2009 10:48:53

Hallo Aro,

es freut mich, dass du mein verschachteltes Accordion für deine Website benutzt. Es gibt leider keine eingebaute Funktion um einen Eintrag per Voreinstellung zu öffnen, aber du kannst einfach einen Click-Event nach dem laden der Website auslösen, so als hätte ein Benutzer auf den entsprechenden Eintrag geklickt:

<dt class="accordion_toggler_1"><a href="#" class="navi_1" id="open_accordion_entry">Gemeinde</a></dt>
<dd class=" accordion_content_1">
<a href="/gemeinde/index.php" class="navi_2">Ortsteile</a><br />
<a href="/gemeinde/sprechzeiten.php" class="navi_2">Sprechzeiten</a>
</dd>





Viel Erfolg!

Aro Kuhrt zur Website

19.01.2009 10:37:03

Moin,
habe in den vergangenen Tagen zahlreiche Akkordionmenüs für eine neues Projekt ausprobiert, aber entweder sie waren für mich JS-Laien zu kompliziert oder haben aus verschiedenen Gründen nicht funktioniert. Aber mit diesem hier habe ich endlich das richtige gefunden und ab nächster Woche ist die Website mit dem Menü auch online :-)
Eine Frage habe ich aber dazu: Gibt es eine Möglichkeit, dass beim Laden der Seite einer der Menüpunkt bereits geöffnet ist? Da müsste wahrscheinlich irgendwo hier was eingefügt werden, aber was:

<dt class="accordion_toggler_1"><a href="#" class="navi_1">Gemeinde</a></dt>
<dd class=" accordion_content_1">
<a href="/gemeinde/index.php" class="navi_2">Ortsteile</a><br />
<a href="/gemeinde/sprechzeiten.php" class="navi_2">Sprechzeiten</a>
</dd>

Hast Du die Lösung? Das wäre klasse.
Tschüss
Aro

MC

04.11.2008 17:12:49

Hi,
nett, aber ist es auch möglich die ausgewählten Unterkategorien bei einem Wechsel zu einer anderen Hauptkategorie auszublenden?

Jakov zur Website

13.09.2008 20:35:25

Hi!
Ich bastle gerade an einem verschachtelten accordion für emcools.com. Bisher hatte ich <UL>s mit <LI>s verwendet und keine <DL> um eine Ordnerstruktur darzustellen, was aber keinen großen unterschie macht, mit einer kleinen adaption, hat das gleich hingehauen:

// der toggler ist ein link innerhalb des <li>, damit auch
// browser ohne javascript zurechtkommen
var togglerName = ‘li a.accordion_toggler_’;
var contentName = ‘li ul.accordion_content_’;

was mir aber später aufgefallen ist: was, wenn z. B. nur ein einziges item in "ebene 4" vordringt, d.h. es gibt nur ein einziges accordion_toggler_4-accordion_content_4-Paar. Mit einem einzigen funktioniert das accordion aber nicht. Für eine Explorer-like Ordnerstruktur, wo man per +/- expand und collapse machen kann ist es eher doof, wenn dann ein Ordner einfach schon offen ist.

Falls ich eine schöne Lösung finde werd ich sie posten.

Lg,
Jakob

Bogdan zur Website

03.09.2008 12:44:43

Hallo István,

ich habe eine Demo und einen Download mit Mootools 1.2 hinzugefügt, ich hoffe das hilft dir weiter. Beachte bitte auch die Hinweise oben unter „Update: 03. September 2008“.

István zur Website

03.09.2008 09:57:47

Sorry, hab das Teil bei mir ausprobiert und es funktioniert einfach nicht. Kann es an Mootools 1.2 liegen? Muss ich da die Plugins, für Accordion, etc. einschließen?

Bogdan zur Website

14.08.2008 12:37:47

Hallo Manuel,

nein tut mir leid damit kann ich nicht dienen. Aber danke für die Anfrage, das ist vielleicht eine Projekt-Idee für das Sommerloch :)

Manuel Merz zur Website

12.08.2008 20:22:13

Halli Hallo

Hast du evtl. auch eine fertige MODx Lösung dafür bereit stehen? Mich würde der Einsatz mit dem Wayfinder interessieren :)

mike

16.05.2008 14:38:58

einfach!super

Bogdan Günther zur Website

29.03.2008 09:02:58

Hallo Sebastian,
schön dass es dir hier gefällt!

Danke für den Hinweis, ich hatte vor lauter JavaScript die IE6-Anpassung der Demo ganz vergessen. Ist nun eingefügt und jetzt läuft die Demo bis auch kleine Abweichungen auch im IE6 problemlos.

Reine CSS-Lösungen gibt es natürlich auch wobei Suckerfish Dropdowns ja nicht dazugehören, weil diese auch JavaScript einsetzen.

Was die HTML-Definitionslisten angeht werden diese natürlich seltener verwendet als einfache Nicht-Numerierte-Listen, sind aber eigentlich für alle Listenarten mit Überschrift und Inhaltsbereich die semantisch besser Lösung.

Letztlich läuft es wie immer darauf hinaus, welchen Schwerpunkt man wählt und welche Zielgruppe man hat. Ich habe dieses Blog zum Beispiel ganz absichtlich frei von IE6-Altlasten entwickelt (das war befreiend sage ich dir!) und bisher hat es scheinbar noch niemand gemerkt :-)

Sebastian zur Website

28.03.2008 23:34:03

Hallo Bogdan,

schönen Block hast du hier :)
Auch ich habe mir dieses Menü mal näher angeschaut. Der Aufbau ist schon ganz sauber und die Funktion im Firefox einwandfrei nutzbar. Das es im IE 5.5 nicht formatiert ist, ist sicherlich zu verkraften, den denn benutzen nur noch Wenige. Aber der IE6 (zumindest meiner unter WIN XP Pro ServicePack 3) hat massive Darstellungsprobleme. Möglicherweise ist es rein mittels CSS zu lösen, doch ohne eine Lösung würde ich dieses Menü nicht auf einer Website einsetzen wollen. Ist halt doch schon recht experimentell das Ganze. Hast du schon mal was von Suckerfish gehört? Vielleicht ist das eine sauberer Basis für diese Funktionen, weil die Entwicklung der reinen CSS-Drodowns schon seit Jahren läuft und daher schon relativ ausgereift ist, wohingehen HTML-Definitionslisten als Menüs eher wenig verbreitet sind.

Schöne Grüße,
Sebastian

Alex zur Website

27.03.2008 19:07:18

Cool. Sauber umgesetzt. :) Habe ich mir gerade mal runtergesaugt und werde es an geeigneter Stelle testen.

LG aus Freiburg, Alex

Manuel Merz zur Website

24.03.2008 00:07:09

Sauber :) Kann man sicherlich mal gebrauchen und mit den MooTools komm ich sowieso nicht klar :(