mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: So 28.04.2024 23:30 Benutzername: Passwort: Auto-Login

Thema: Menü per jquery animieren vom 20.12.2011


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Menü per jquery animieren
Autor Nachricht
bongartz
Threadersteller

Dabei seit: 05.01.2007
Ort: Uerdingen / Ingolstadt
Alter: 38
Geschlecht: Männlich
Verfasst Di 20.12.2011 14:09
Titel

Menü per jquery animieren

 Antworten mit Zitat Zum Seitenanfang
Hallo,

ich versuche schon seit Tagen ein mit contao erzeugtes Menü mit jquery zu animieren. Wie auf dem Bild zu ersehen ist, besteht mein Menü aus vier verschieden Spalten, wobei das „Menü 1“ mein Hauptmenü ist und alle restlichen („Menü 2 - 4“) Untermenüs sind. Die Animation ist eigentlich sehr einfach, es sollen nur die unterschiedlichen Untermenüs ein und aus gefadet werden.





Contao baut das Menü wie folgt auf auf:

Code:
<ul class="level_1">
<li class="submenu sibling first"><a href="aktuelles.html" title="Aktuelles" class="submenu sibling first">Aktuelles</a>
<ul class="level_2">
<li class="submenu first last"><a href="test.html" title="Test" class="submenu first last">Test</a>
<ul class="level_3">
<li class="first last"><a href="test-sub2.html" title="Test" class="first last">Test sub2</a></li>
</ul>
</li>
</ul>
</li>
<li class="active"><span class="active">Projekte</span></li>
<li class="sibling"><a href="kraftraum.html" title="Kraft.Raum." class="sibling">Kraft.Raum.</a></li>
<li class="sibling last"><a href="kontakt.html" title="Kontakt" class="sibling last">Kontakt</a></li>
</ul>


Wie zu sehen ist gibt es immer ein UL-Objekt mit dem Level des Menüs und da ein LI-Objekt in dem die links bzw. weiteren Untermenüs verschachtelt sind.
Mein Problem besteht jetzt dadrin zuerkennen welches Untermenü eingebelden bzw. ausgebendet werden muss.

Ich habe mir schon einen Code in jquery erarbeiten in dem ich abfragen kann, welches UL Objekt geklickt wurde, nur jetzt fehlt mir die Info welches Untermenü ich animieren muss.

Code:
/*prüfen ob es ein submenu auf der ersten ebene gibt*/
   $('#footer nav ul.level_1 a').click(
      function(){   
      linkName = $(this);
      if (linkName.hasClass('submenu')) {
         event.preventDefault(); /* damit wid der link deaktiviert*/
         /*hier kommtm al die annimation rein*/
      }
   });
   
   /*prüfen ob es ein submenu auf der zweiten ebene gibt*/
   $('#footer nav ul.level_2 a').click(
      function(){   
      linkName = $(this);
      if (linkName.hasClass('submenu')) {
         event.preventDefault(); /* damit wid der link deaktiviert*/
         /*hier kommtm al die annimation rein*/
      }
   });


Ich hoffe ich konnte mein Problem halbwegs verständlich darlegen.
  View user's profile Private Nachricht senden
DesignKater

Dabei seit: 26.06.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 20.12.2011 14:34
Titel

Antworten mit Zitat Zum Seitenanfang
ungetestet:

Code:

$('ul li').click(function(){
  $(this).next().fadeIn();
},function(){
  $(this).next().fadeOut();
});


In die Richtung sollte es gehen.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
SimonDerDude

Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht: Männlich
Verfasst Di 20.12.2011 14:41
Titel

Antworten mit Zitat Zum Seitenanfang
ebenfalls ungetestet

Code:

function initMenu(){
   $('ul > li > a').click(function(){
      if($(this).attr('class') != 'active'){
         $('ul li ul').fadeOut();
         $(this).next().fadeToggle();
         $('ul li a').removeClass('active');
         $(this).addClass('active');
      }
   });
}
$(window).load(function(){
   initMenu();
});
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
bongartz
Threadersteller

Dabei seit: 05.01.2007
Ort: Uerdingen / Ingolstadt
Alter: 38
Geschlecht: Männlich
Verfasst Di 20.12.2011 15:17
Titel

Antworten mit Zitat Zum Seitenanfang
Ich danke euch beiden!! Die next Methode war genau das was ich gesucht habe. Jetzt kann ich weiter machen.

Kanke noch mal!!

Zuletzt bearbeitet von bongartz am Di 20.12.2011 15:18, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
SimonDerDude

Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht: Männlich
Verfasst Di 20.12.2011 15:19
Titel

Antworten mit Zitat Zum Seitenanfang
bongartz hat geschrieben:
Ich danke euch beiden!! Die next Methode war genau das was ich gesucht habe. Jetzt kann ich weiter machen.

Kanke noch mal!!

Kitte!!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen jQuery: Ein Bild rotieren und animieren
jquery Menü funzt nicht in IE6 und 8
Img fade in CSS gestyltem Menü? (jQuery/JS)
jquery slidetoggle menü problem
Problem mit Jquery Akkordeon Menü
jQuery - "appended" Element animieren?
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB