TYPO3-Testaccount
Testen Sie die aktuellste TYPO3-Version kostenlos und unverbindlich für einen Monat!

Jetzt testen!

Schulungen

jetzt buchen
Forum » TYPO3 CMS: TypoScript » Menüs

Navigation per Javascript OnClick-Event


Autor Nachricht
Verfasst am: 18. 04. 2012 [10:51]
TheJoker
Themenersteller
Dabei seit: 04.01.2011
Beiträge: 31
 Guten Tag allerseits

Ich steh mal wieder total aufm Schlauch und verzweifle fast.

Ich hab folgende Menüstruktur:
HTML
- 0
  - 1
  - 2
  - 3
    - 3.1
    - 3.2
    - 3.3
  - 4
    - 4.1
    - 4.2
  - 5
etc.

Die Navigation beginnt erst im Layer 2, sprich "0" wird nicht angezeigt.
Das Ziel ist es, dass man am Anfang nur die Punkte 1,2,3,4,5 sieht, aber per OnClick auf 3 die Elemente 3.1 -3.3 ein bzw. wieder ausblendet.
Also eigentlich ein ganz einfachen
JAVASCRIPT
getElementById('xy').style.display=block;


Mein Problem ist jetzt, ich krieg das im TS net gebacken. Es passiert eigentlich einfach gar nichts.

Mein TS für die Navi(Basis, ohne irgendwelche Tests für die OnClick-Sache):

TYPOSCRIPT
subparts.navi = HMENU
  subparts.navi.entryLevel =1 
  subparts.navi {
  1 = TMENU
    1 {
      wrap = <ul class="menu">|</ul>
      expAll = 1
      NO.wrapItemAndSub = <li class="nav">|</li>
 
      ACT < .NO
      ACT = 1
    }
    # Zweite Ebene 
    2 = TMENU
    2 {
      wrap = <ul class="subnav">|</ul>
      NO.allWrap = <li class="nav">|</li>
    }
  }


Im CSS ist die Class subnav auf Display:none gestellt.

Ich hab auch schon über "id={elementUid}" perobiert, allerdings schreibt er es mir so direkt als id="{elementUid}" innen Quellcode.
Auch mit Dr. Google bin ich zu keinem Ergebis gekommen.

Ich hoffe Ihr könnt mir weiterhelfen.

lg Pascal

mfg Pasal
Profil
Verfasst am: 18. 04. 2012 [23:35]
karlchen
Dabei seit: 19.10.2006
Beiträge: 1002
 ich würde dir die Integration von jQuery empfehlen, damit macht sich der ganze JavaScript kram m einiges einfacher icon_smile.gif

das folgende wäre dann z.B. ein Ausgangspunkt

TYPOSCRIPT
page.includeJSlibs.jquery = //ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
page.includeJSlibs.jquery{
  external = 1
  disableCompression = 1
  excludeFromConcatenation = 1
}
 
page.jsInline.10 = TEXT
page.jsInline.10.value(
	$('document').ready(function(){
		$('li.nav').on('click', function(e){
			var subnav = $(this).find('ul.subnav');
			if(subnav.length > 0){
                                e.preventDefault();
				subnav.slideToggle();
			}
 
		});
	});
)


kurze Erläuterung: erst wird jQuery von einem google CDN geholt, so ist es schön klein superfix und eventuell bei deinem Besucher schon im browsercache, weil es andere Seite auch so einbinden.

und dann binden wir unter page.jsInline.10 inline Javascript im Kopf der Seite ein und registrieren einen eventhandler beim click auf die li's mit der class nav, somit musst du nicht in jeden Link innerhalb eines li einen OnClick handler schreiben. "$('li.nav').on('click', function(){ ..."
Danach suchen wir innerhalb des li-tags nach einem ul mit der class subnav und
und wenn es wirklich eines gibt, dann soll es auf sliden bzw. nach einem zu sliden. Also in der Theorie sollte es funktionieren.

Wenn du bei reinem Javascript bleiben willst, musst du den Links natürlich noch den Oncklick handler mitgeben und die Links dein UL muss auch noch die ID bekommenm damit du es mit getElementByID auch findest.

[Dieser Beitrag wurde 2mal bearbeitet, zuletzt am 18.04.2012 um 23:37.]
Profil
Verfasst am: 27. 04. 2012 [08:06]
TheJoker
Themenersteller
Dabei seit: 04.01.2011
Beiträge: 31
 Wow besten Dank. Das ists.

Bitte entschuldige, dass ich mich erst jetzt melde, aber ich war noch im Urlaub icon_wink.gif

Daran, dass ganze per JQuery zu lösen hab ich gar nicht erst gedacht. Es funktioniert jetzt fast so, wie es sollte. Leider klappt es auch bei einem Klick auf die Subnav zu, aber das krieg ich selber hin, warscheinlich muss ich kurz die Klassen anpassen icon_biggrin.gif

Besten dank und einen schönen Tag

lg Pascal


€dit:

Ok so ganz Trivial ist das Problem scheinbar doch nicht.

Das Problem ist, dass sobald die navigation geöffnet wird, bei einem Klick auf einen Untermenüpunkt der Effekt wieder getoggelt wird.
Ich habe auch schon versucht den Toggle durch einen slideDown zu ersetzten, jedoch funktionieren auch so die Links nicht. Erst per Rechtsklick->Öffnen kann ich mir den Inhalt anzeigen lassen.

Ich nehme an es ist, weil der Effekt auf den LI-Tag geht, und die Subnav ja ein Child-Element davon ist. Das OnClick Event wird demnach schon vom jQuery übernommen, auch wenn es dies gar nicht sollte.

Kennt jemand dafür die Lösung?

Danke LG Pascal

[Dieser Beitrag wurde 1mal bearbeitet, zuletzt am 27.04.2012 um 16:28.]
mfg Pasal
Profil
Verfasst am: 27. 04. 2012 [17:38]
TheJoker
Themenersteller
Dabei seit: 04.01.2011
Beiträge: 31
 So ich hab das Problem gelöst.

Für alle die auch mal vor dem gleichen Problem stehen:
Der Toggleeffekt wird durch einen Klick auf einen <a> - Tag aufgerufen.
HTML
page.jsInline.10 = TEXT
page.jsInline.10.value(
  $('document').ready(function(){
    $("a&quot<img src="typo3conf/ext/mm_forum//res/smilies/icon_wink.gif" alt="icon_wink.gif" />.click(function(){
    if($(this).next("ul.subnav&quot<img src="typo3conf/ext/mm_forum//res/smilies/icon_wink.gif" alt="icon_wink.gif" />.length > 0)
      {
      $(this).next("ul.subnav&quot<img src="typo3conf/ext/mm_forum//res/smilies/icon_wink.gif" alt="icon_wink.gif" />.slideToggle();
        return false;
      }
    });
});
)


Besten Dank und ein schönes Wochenende

lg Pascal

[Dieser Beitrag wurde 1mal bearbeitet, zuletzt am 27.04.2012 um 17:39.]
mfg Pasal
Profil
Verfasst am: 30. 04. 2012 [10:10]
TheJoker
Themenersteller
Dabei seit: 04.01.2011
Beiträge: 31
 Ein Kleiner Nachtrag meiner Seits:

Ich hatte das Problem, dass die Navi nicht offen blieb, wenn eine Neue Seite geladen wurde.

Dieses Problem habe ich nun nach etwa 4 Stunden endlich gelöst.
Um euch die Ewige Sucherei zu ersparen hier das TS:

TYPOSCRIPT
[...]
page.jsInline.10 = TEXT
page.jsInline.10.value(
  $('document').ready(function(){
    $( "ul.subnav" ).hide();
    $(this).find('a.active').parent().parent().show();
    $( "a" ).click(function(){
    if($(this).next( "ul.subnav" ).length > 0)
      {
      $(this).next( "ul.subnav" ).slideToggle();
        return false;
      }
    });
});
)
[...]
subparts.navi = HMENU
  subparts.navi.entryLevel =1 
  subparts.navi {
  1 = TMENU
    1 {
      wrap = <ul class="menu active">|</ul>
      expAll = 1
      NO.wrapItemAndSub = <li class="nav">|</li>
      NO.ATagParams = class = "topnav"
      ACT < .NO
      ACT = 1  
      #ACT.allWrap = <span class="active">|</span>
      #ACT.ATagParams = class="active"
    }
    # Zweite Ebene 
    2 = TMENU
    2 {
      wrap = <ul class="subnav">|</ul>
      NO.allWrap = <li class="subnavLI">|</li>
      ACT < .NO 
      ACT = 1
      ACT.ATagParams = class="active"
 
    }
  }


Ich weiss, es ist vielleicht nicht die Schöneste Methode, aber es Funktioniert icon_wink.gif

In diesem Sinne

Schönen Tag und ich hoffe ich kann damit jemanden viele Stunden arbeit ersparen icon_smile.gif

lg Pascal

Edit:
Btw: Hier gibts nen Bug mit der Codeanzeige. Es werden Codefragmente durch smilies ersetzt icon_wink.gif

[Dieser Beitrag wurde 2mal bearbeitet, zuletzt am 30.04.2012 um 10:15.]
mfg Pasal
Profil