Suche
Teilen
startseite » forum

[Frage] Zweiter Navigation mit geöffneter Unternavigation für Mobilgeräte [Gelöst] TYPO3-Version: 6.2.7

  • jendasek jendasek
    T3PO
    0 x
    10 Beiträge
    0 Hilfreiche Beiträge
    12. 05. 2015, 16:54

    Hallo,

    ich versuche eine Navigation mit geöffneten Unternavigation für die jQuery-Erweiterung mmenu zu erstellen. Allerdings kenn ich mich mit Typo3-Anweisungen noch nicht so viel (ich bin von CMS Contao gewöhnt, diese Sachen wesentlich leichter umsetzen zu können). Daher bitte ich euch um einen Rat.

    Mein momentaner Code in der ts.

    1. ## Mobilmenu
    2. lib.mobilnavigation = HMENU
    3. lib.mainMenu.entryLevel = 0
    4. lib.mobilnavigation.wrap = <ul id="mobilnavi">|</ul>
    5. lib.mobilnavigation.1 = TMENU
    6. lib.mobilnavigation.1 {
    7. 	expAll = 1
    8. 	noBlur = 1
    9. 	NO {
    10. 		subst_elementUid = 1
    11. 		ATagTitle.field = abstract // description // title
    12. 		ATagParams=id="pid{elementUid}
    13. 		ATagBeforeWrap = 1
    14. 		allWrap = <li class="mobilnavi-item">|</li>
    15. 		linkWrap=<span class="mobilnavi-item hide">|</span>
    16. 	}
    17.  
    18. 	ACT < .NO
    19. 	ACT = 1
    20. 	ACT {
    21. 		subst_elementUid = 2
    22. 		ATagTitle.field = abstract // description // title
    23. 		ATagParams=id="pid{elementUid}
    24. 		ATagBeforeWrap = 1
    25. 		allWrap = <li class="mobilnavi-item active">|</li> 
    26. 		linkWrap=<span class="mainnavi-item hide">|</span>
    27. 	}
    28. 	ACTIFESUB < .ACT
    29. 	ACTIFESUB = 1
    30. 	lib.mobilnavigation.2 = TMENU
    31. 	lib.mobilnavigation.2.wrap = <ul class="submenu">|</ul>
    32.  
    33. 	lib.mobilnavigation.2.NO {
    34. 	allWrap = <LI class="subitem">|</LI>
    35. 	}
    36.  
    37. 	lib.mobilnavigation.2.ACT {
    38. 	allWrap = <li class="subitem active">|</li>
    39. }
    40. }

    Hier ist die Seite - um die Mobilversion zu sehen, bitte das Fenster verkleinern. [url]http://dev.hee-rechtsanwaelte.de/kontakt/anschrift-rufnummern.html[/url]

    Hier der Link zur Erweiterung [url]http://mmenu.frebsite.nl[/url]

  • jendasek jendasek
    T3PO
    0 x
    10 Beiträge
    0 Hilfreiche Beiträge
    18. 05. 2015, 17:37 - Lösung

    Vielen Dank für eure Hilfe. Ich habe es auch schon gelöst. Hier ist noch einmal meine Lösung für alle, die es brauchen werden:

    [b]Die Navigation für die mobile Version[/b]

    1. ## Mobilmenu
    2. lib.mobilnavigation = HMENU
    3. lib.mainMenu.entryLevel = 0
    4. lib.mobilnavigation.wrap = <ul id="mobilnavi">|</ul>
    5. lib.mobilnavigation.1 = TMENU
    6. lib.mobilnavigation.1 {
    7. 	expAll = 1
    8. 	noBlur = 1
    9. 	NO {
    10. 		subst_elementUid = 1
    11. 		ATagTitle.field = abstract // description // title
    12. 		ATagParams=id="pid{elementUid}
    13. 		ATagBeforeWrap = 1
    14. 		allWrap = <li class="mobilnavi-item">|</li>
    15. 		linkWrap=<span class="mobilnavi-item hide">|</span>
    16. 	}
    17. 	IFSUB < .NO
    18. 	IFSUB = 1
    20. 		allWrap = <li class="mobilnavi-item">|
    21. 	}
    22. 	ACT < .NO
    23. 	ACT = 1
    24. 	ACT {
    25. 		allWrap = <li class="mobilnavi-item active">|</li>
    26. 	}
    30. 		allWrap = <li class="mobilnavi-item active">|
    31. 	}
    32. }
    33. lib.mobilnavigation.2 = TMENU
    34. lib.mobilnavigation.2 {
    35. 	expAll = 1
    36. 	noBlur = 1
    37. 	wrap = <ul class="leve_2">|</ul></li>
    38. 	NO {
    39. 		subst_elementUid = 1
    40. 		ATagTitle.field = abstract // description // title
    41. 		ATagParams=id="pid{elementUid}
    42. 		ATagBeforeWrap = 1
    43. 		allWrap = <li>|</li> |*| <li>|</li>
    44. 	}
    45. 	ACT < .NO
    46. 	ACT = 1
    47. 	ACT {
    48. 		allWrap = <li class="active">|</li> |*| <li class="active">|</li>
    49. 	}
    50. }

    [b]Der Code, um die mmenu-Erweiterung anzusteuern[/b]

    1. <script>
    2. (function($){var $mmenu=$('#mobilnavi-wrapper');$(document).ready(function(){$mmenu.mmenu({isMenu: true,classes: "mm-fullscreen mm-slide mm-black",extensions: ["theme-dark"],offCanvas: {moveBackground: false,position: "top",zposition: "front"},searchfield: {add: true,search: true,placeholder: "Suchen",noResults: "Keine Ergebnisse gefunden.",showLinksOnly: true},dragOpen: {open: true}},{classNames: {selected: "active"}}).removeClass('invisible');});})(jQuery); </script>

    Und sonst natürlich alles anbinden und einfügen, was zu der mmenu-Erweiterung gehört ([i]jQuery[/i], [i]mmenu.js[/i] und [i]mmenu.css[/i]).

    Viel Spaß damit! Liebe Grüße,
    Jan

  • 1
  • freeatweb freeatweb
    Jedi-Meister
    0 x
    267 Beiträge
    4 Hilfreiche Beiträge
    18. 05. 2015, 09:46

    Hallo,

    ich glaube du hast einen Klammer-Fehler drinnen, probiers mal so:

    1. lib.mobilnavigation = HMENU
    2. lib.mobilnavigation {
    3.        special = directory
    4.        entryLevel = 0
    5.  
    6.        1 = TMENU
    7.        1 {
    8.               ...
    9.        }
    10.        2 < .1
    11.        3 < .2
    12.  
    13.  
    14. }

  • Chrissli Chrissli
    Jedi-General
    0 x
    1016 Beiträge
    28 Hilfreiche Beiträge
    18. 05. 2015, 10:46

    Das Ding heisst übrigens "ACTIFSUB" nicht "ACTIFESUB"

    Ohne dir blöd kommen zu wollen: Vielleicht sagts du dazu was die Ausgangsstellung ist und was du möchtest ( von Seiten der HTML-Ausgabe ) dann müssen sich potenzielle Helfer nicht erst die Anleitung für das Plugin durchlesen :p

    God's in his heaven, all's right with the world

  • jendasek jendasek
    T3PO
    0 x
    10 Beiträge
    0 Hilfreiche Beiträge
    18. 05. 2015, 17:37

    Vielen Dank für eure Hilfe. Ich habe es auch schon gelöst. Hier ist noch einmal meine Lösung für alle, die es brauchen werden:

    [b]Die Navigation für die mobile Version[/b]

    1. ## Mobilmenu
    2. lib.mobilnavigation = HMENU
    3. lib.mainMenu.entryLevel = 0
    4. lib.mobilnavigation.wrap = <ul id="mobilnavi">|</ul>
    5. lib.mobilnavigation.1 = TMENU
    6. lib.mobilnavigation.1 {
    7. 	expAll = 1
    8. 	noBlur = 1
    9. 	NO {
    10. 		subst_elementUid = 1
    11. 		ATagTitle.field = abstract // description // title
    12. 		ATagParams=id="pid{elementUid}
    13. 		ATagBeforeWrap = 1
    14. 		allWrap = <li class="mobilnavi-item">|</li>
    15. 		linkWrap=<span class="mobilnavi-item hide">|</span>
    16. 	}
    17. 	IFSUB < .NO
    18. 	IFSUB = 1
    20. 		allWrap = <li class="mobilnavi-item">|
    21. 	}
    22. 	ACT < .NO
    23. 	ACT = 1
    24. 	ACT {
    25. 		allWrap = <li class="mobilnavi-item active">|</li>
    26. 	}
    30. 		allWrap = <li class="mobilnavi-item active">|
    31. 	}
    32. }
    33. lib.mobilnavigation.2 = TMENU
    34. lib.mobilnavigation.2 {
    35. 	expAll = 1
    36. 	noBlur = 1
    37. 	wrap = <ul class="leve_2">|</ul></li>
    38. 	NO {
    39. 		subst_elementUid = 1
    40. 		ATagTitle.field = abstract // description // title
    41. 		ATagParams=id="pid{elementUid}
    42. 		ATagBeforeWrap = 1
    43. 		allWrap = <li>|</li> |*| <li>|</li>
    44. 	}
    45. 	ACT < .NO
    46. 	ACT = 1
    47. 	ACT {
    48. 		allWrap = <li class="active">|</li> |*| <li class="active">|</li>
    49. 	}
    50. }

    [b]Der Code, um die mmenu-Erweiterung anzusteuern[/b]

    1. <script>
    2. (function($){var $mmenu=$('#mobilnavi-wrapper');$(document).ready(function(){$mmenu.mmenu({isMenu: true,classes: "mm-fullscreen mm-slide mm-black",extensions: ["theme-dark"],offCanvas: {moveBackground: false,position: "top",zposition: "front"},searchfield: {add: true,search: true,placeholder: "Suchen",noResults: "Keine Ergebnisse gefunden.",showLinksOnly: true},dragOpen: {open: true}},{classNames: {selected: "active"}}).removeClass('invisible');});})(jQuery); </script>

    Und sonst natürlich alles anbinden und einfügen, was zu der mmenu-Erweiterung gehört ([i]jQuery[/i], [i]mmenu.js[/i] und [i]mmenu.css[/i]).

    Viel Spaß damit! Liebe Grüße,
    Jan

  • 1
Präsentiert von
Mittwald
Nützliche Links
TYPO3 Dokumentation
eStrategy
webworker Magazin