Erledigt: [JS] Akkordeon-Effekt

Webentwicklung Ajax
 
Ich bekomme es nicht hin. Helft mir.

Ich habe folgenden Code:
  1. <div id="navigation">
  2. <ul class="menu">
  3. <li class="main-nav"><a href="#">abc</a>
  4. <ul class="sub-menu">
  5. <li><a href="#">abc1</a></li>
  6. <li><a href="#">abc2</a></li>
  7. </ul>
  8. </li>
  9. <li class="main-nav"><a href="#">efg</a>
  10. <ul class="sub-menu">
  11. <li><a href="#">efg1</a></li>
  12. <li><a href="#">efg2</a></li>
  13. <li><a href="#">efg3</a></li>
  14. <li><a href="#">efg4</a></li>
  15. </ul>
  16. </li>
  17. <li class="main-nav"><a href="#">hik</a></li>
  18. <li class="main-nav"><a href="#">lmn</a>
  19. <ul class="sub-menu">
  20. <li><a href="#">lmn1</a></li>
  21. <li><a href="#">lmn2</a></li>
  22. <li><a href="#">lmn3</a></li>
  23. </ul>
  24. </li>
  25. </ul>
  26. </div><!-- #avigation -->
Quelltext in Zwischenablage kopieren

Ich hätte jetzt gerne einen Akkordeon-Effekt. Zu Beginn sollen alle Hauptpunkte zugeklappt sein, per Klick soll sich das jeweilige Submenü öffnen.

Womit mache ich das? moo.tools? scriptalicious? j.query? Und wie sähe der Code dazu aus?

Habe von Javascript keine Ahnung. pee
Link zu diesem Beitrag in die Zwischenablage kopieren
Mister Ad
Werbung
Schon mal bei Saturn, DaWanda oder notebooksbilliger.de geguckt? Vielleicht wirst du dort fuendig.

 
marx schrieb am 14.02.11, 16:14 Uhr:

Womit mache ich das? moo.tools? scriptalicious? j.query?

schau dir an was du sonst noch brauchst und wähle dann die bibliothek. toni
Link zu diesem Beitrag in die Zwischenablage kopieren
wähle wählst du jQuery: anleitung

kurzanleitung:
jquery und ui einbinden:


<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js“ type=“text/javascript“></script>
<script src=“http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js“ type=“text/javascript“></script>

Id vergeben.
Link zu diesem Beitrag in die Zwischenablage kopieren
Editiert: 08.08.12, 22:01 Uhr
Dieser Beitrag wurde vom Mitglied gelöscht.
Link zu diesem Beitrag in die Zwischenablage kopieren
Toadward schrieb am 14.02.11, 16:34 Uhr:

was hat das mit ajax zu tun?
...

sagt wer?

ich hab lediglich die links zur bibliothek bei google gepostet. jQuery halte ich bei Personen ohne javascript-erfahrung für leichter verständlich.
Link zu diesem Beitrag in die Zwischenablage kopieren
Also meiner Erfahrung nach ist jQuery zwar einfacher zu schreiben, aber mootools «performt» besser.

Wir nutzen immer das Mootools Accordion.
Link zu diesem Beitrag in die Zwischenablage kopieren
Editiert: 08.08.12, 22:01 Uhr
Dieser Beitrag wurde vom Mitglied gelöscht.
Link zu diesem Beitrag in die Zwischenablage kopieren
Irrelevanter Beitrag (anzeigen):

Link zu diesem Beitrag in die Zwischenablage kopieren
Irrelevanter Beitrag (anzeigen):

Link zu diesem Beitrag in die Zwischenablage kopieren
Toadward schrieb am 14.02.11, 16:41 Uhr:

dirk d. schrieb am 14.02.11, 16:40 Uhr:

Toadward schrieb am 14.02.11, 16:34 Uhr:

was hat das mit ajax zu tun?
...

sagt wer?

ich hab lediglich die links zur bibliothek bei google gepostet. jQuery halte ich bei Personen ohne javascript-erfahrung für leichter verständlich.

ne du warst gar net gemeint, der thread ist unter ajax statt richtigerweise javascript gepostet
ok, sorry. hast recht. admin verschieben bitte.
Link zu diesem Beitrag in die Zwischenablage kopieren
Hab folgendes eingebunden:

  1. <script src="mootools-core-1.3-full-compat-yc.js" type="text/javascript"></script>
  2.  
  3. <script type="text/javascript">
  4. window.addEvent('domready', function(){
  5. new Fx.Accordion($('accordion'), '#navigation .main-nav', '#navigation .sub-menu');
  6. });
  7. </script>
Quelltext in Zwischenablage kopieren

Ändert nichts. Wo liegt der Fehler?

heul
Link zu diesem Beitrag in die Zwischenablage kopieren
Das Mootools Accordion braucht DIVs, ausser es wurde mittlerweile angepasst.
Link zu diesem Beitrag in die Zwischenablage kopieren
Hab jetzt die Grundfunktionalität mit jquery hinbekommen (danke dirk danke).

Jetzt brauche ich nur noch einen Hinweis, wie ich es hinbekomme, dass alle Submenüs zu Beginn geschlossen sind und warum mir jquery bei allen Submenüs per CSS eine Höhe von 100px reinschmeißt.
Link zu diesem Beitrag in die Zwischenablage kopieren
schaust du hier: no-auto-height
Link zu diesem Beitrag in die Zwischenablage kopieren
Editiert: 14.02.11, 18:17 Uhr
Ah super. Hab jetzt per active:false noch erreicht, dass beim start kein submenü offen ist. Aber jetzt kann ich nur eins öffnen, danach passiert nichts mehr. kann dann keins mehr öffnen oder schließen
brain

E: Habs hinbekommen.

Weiß jemand wie ich den merkwürdigen Rahmen loswerde, den er um die Header packt, wenn man draufklickt? Mit CSS bekomme ich den nicht zu fassen.



E2: Okay hab auch das. Es fehlte noch ein class=“header“.
Link zu diesem Beitrag in die Zwischenablage kopieren
Editiert: 08.08.12, 22:01 Uhr
Dieser Beitrag wurde vom Mitglied gelöscht.
Link zu diesem Beitrag in die Zwischenablage kopieren
Geil. Schaue ich mir auf jeden Fall mal an. Danke.
Link zu diesem Beitrag in die Zwischenablage kopieren
Editiert: 08.08.12, 22:01 Uhr
Dieser Beitrag wurde vom Mitglied gelöscht.
Link zu diesem Beitrag in die Zwischenablage kopieren
nimmste halt das hier:

http://razorjack.net/quicksand/

cheer
Link zu diesem Beitrag in die Zwischenablage kopieren
Das filtert ja nur. Oder?

Aber kommerziell wird das nicht werden, von daher … aber erstmal schauen ob ich das überhaupt will.
Link zu diesem Beitrag in die Zwischenablage kopieren
Irrelevanter Beitrag (anzeigen):

Link zu diesem Beitrag in die Zwischenablage kopieren
Irrelevanter Beitrag (anzeigen):

Link zu diesem Beitrag in die Zwischenablage kopieren
Irrelevanter Beitrag (anzeigen):

Link zu diesem Beitrag in die Zwischenablage kopieren
Irrelevanter Beitrag (anzeigen):

Link zu diesem Beitrag in die Zwischenablage kopieren
Irrelevanter Beitrag (anzeigen):

Link zu diesem Beitrag in die Zwischenablage kopieren
Irrelevanter Beitrag (anzeigen):

Link zu diesem Beitrag in die Zwischenablage kopieren
Irrelevanter Beitrag (anzeigen):

Link zu diesem Beitrag in die Zwischenablage kopieren
#