Suche
Teilen
startseite » forum

[Frage] Typo3 6.2 - Bootstrap - Typo übernimmt Menügestaltung nicht TYPO3-Version: -

  • jet_black jet_black
    Typ im Roten Hemd
    0 x
    2 Beiträge
    0 Hilfreiche Beiträge
    05. 06. 2014, 08:15

    Aloha Leute,

    ich weiß absolut nicht mehr weiter.
    Ich betreue, bzw. erstelle eine Typo3-Seite für einen Kunden und als Gestaltungsvorlage habe ich das Bootstrap mit abgeändertem Modern-Business Theme bekommen.
    Jetzt verzweifel ich aber daran, das Layout der Navigation im Typoscript genau so zu übernehmen. An der CSS liegt es definitiv nicht, denn die ist unverändert zur funktionierenden Nicht-Typo-Version.

    Bilder sind angehangen. Eins wie es nun aussieht, eins wie es aussehen soll.

    Die HTML-Struktur meiner Navi:

    1. <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    2. <div class="container">
    3. <div class="navbar-header">
    4. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
    5. <span class="sr-only">Toggle navigation</span>
    6. <span class="icon-bar"></span>
    7. <span class="icon-bar"></span>
    8. <span class="icon-bar"></span>
    10. <!-- You'll want to use a responsive image option so this logo looks good on devices - I recommend using something like retina.js (do a quick Google search for it and you'll find it) -->
    11. <div id="logo">###LOGO###</div>
    12. </div>
    13.  
    14. <!-- Collect the nav links, forms, and other content for toggling -->
    15. <div class="collapse navbar-collapse navbar-ex1-collapse">
    16. ###NAVIGATION###
    17. </div>
    18. <!-- /.navbar-collapse -->
    19. </div>
    20. <!-- /.container -->
    21. </nav>

    Die original Navi-Struktur:

    1. <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    2. <div class="container">
    3. <div class="navbar-header">
    4. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
    5. <span class="sr-only">Toggle navigation</span>
    6. <span class="icon-bar"></span>
    7. <span class="icon-bar"></span>
    8. <span class="icon-bar"></span>
    10. <!-- You'll want to use a responsive image option so this logo looks good on devices - I recommend using something like retina.js (do a quick Google search for it and you'll find it) -->
    11. <a class="navbar-brand" href="index.html"><img src="images/Platzhalter_logo.png" width="238" height="110" alt="xxxxxxxxxxxx"></a>
    12. </div>
    13.  
    14. <!-- Collect the nav links, forms, and other content for toggling -->
    15. <div class="collapse navbar-collapse navbar-ex1-collapse">
    16. <ul class="nav navbar-nav navbar-right">
    17. <li><a href="index.html">HOME</a>
    18. </li>
    19. <li class="dropdown">
    20. <a href="#" class="dropdown-toggle" data-toggle="dropdown">LEISTUNGEN <b class="caret"></b></a>
    21. <ul class="dropdown-menu">
    22. <li><a href="index.html">dasfsadf</a>
    23. </li>
    24. <li><a href="index.html">adsfsfdaf</a>
    25. </li>
    26. <li><a href="index.html">dsafsdf</a>
    27. </li>
    28. <li><a href="index.html">dsafsd</a>
    29. </li>
    30. <li><a href="index.html">dsaffadsfdsf</a>
    31. </li>
    32. <li><a href="index.html">dsafsdfds</a>
    33. </li>
    34. </ul>
    35. </li>
    36. <li class="dropdown">
    37. <a href="#" class="dropdown-toggle" data-toggle="dropdown">ÜBER UNS <b class="caret"></b></a>
    38. <ul class="dropdown-menu">
    39. <li><a href="index.html">sdafdsa</a>
    40. </li>
    41. <li><a href="index.html">dsaf</a>
    42. </li>
    43. <li><a href="index.html">asdf</a>
    44. </li>
    45. <li><a href="index.html">asdf</a>
    46. </li>
    47. <li><a href="anfahrt.html">Anfahrt</a>
    48. </li>
    49. <li><a href="index.html">asdfs</a>
    50. </li>
    51. <li><a href="index.html">dfasfsdf</a>
    52. </li>
    53. </ul>
    54. </li>
    55. <li><a href="index.html">XXX</a>
    56. </li>
    57. <li><a href="index.html">XXX</a>
    58. </li>
    59. <li><a href="index.html">XXX</a>
    60. </li>
    61. </ul>
    62. </div>
    63. <!-- /.navbar-collapse -->
    64. </div>
    65. <!-- /.container -->
    66. </nav>

    Mein Navigationsrelevantes Typoscript:

    1. lib.navitop= HMENU
    2. lib.navitop {
    3. special = directory
    4. special.value = 1
    5. # excludeUidList = 5,18,21,20
    6. 1 = TMENU
    7. 1 {
    8. wrap = <ul class="nav navbar-nav navbar-right">|</ul>
    9. noBlur = 1
    10. expAll = 1
    11. # NO.before.dataWrap = <li id="pageUid_{field:uid}"><img class="menuicon" src="fileadmin/template/img/bicon.png"> |
    12. # NO.allWrap = |&nbsp; |*|&bull;&nbsp;|&nbsp;|*|&bull;&nbsp;|
    13. NO.wrapItemAndSub = <li class="dropdown">|</li>
    14. NO.ATagParams = class="dropdown-toggle" data-toggle="dropdown"
    15.  
    16. NO.ATagTitle.field = title // nav_title
    17. ACT < .NO
    18. ACT = 1
    19. ACT.ATagParams = class="active"
    20. }
    21.  
    22. #ATagParams = |*||*|||class="last_line"
    23. #allWrap = <li>|</li>
    24.  
    25. 2 = TMENU
    26. 2 {
    27. wrap = <ul class="dropdown-menu">|</ul>
    28. expAll = 1
    29. #NO.before.dataWrap = <li id="pageUid_{field:uid}"> |
    30. NO.wrapItemAndSub = <li>|</li>
    31. NO.ATagTitle.field = title // nav_title
    32. ACT < .NO
    33. ACT = 1
    34. ACT.ATagParams = class="active"
    35. }
    36. }

    Wie gesagt, die CSS ist bei beiden Versionen definitiv zu 100% dieselbe Datei mit gleichem Inhalt.
    Es muss sich also ein Fehler in einem der Bereiche eingeschlichen haben, die ich oben geposted habe.

    Verwendetes Framework ist das von "startbootstrap.com" mit dem "Modern Business"-Theme.

    Seit über 2 Stunden hänge ich nun schon über diesem Problem und bekomme es einfach nicht gelöst.

    Ich würde mich freuen, wenn mir hier jemand hilfreich zur Seite stehen kann und einen Lösungsvorschlag hat :)

    Mit freundlichen Grüßen,
    jet_black

    Anhänge (2)
    rebo-screenshot_final.jpg image/jpeg 0,00 B 247 heruntergeladen
    rebo-screenshot_work.jpg image/jpeg 0,00 B 238 heruntergeladen
    Tags: Typo3 6.2 , Bootstrap , Tmenu
  • 1
  • jet_black jet_black
    Typ im Roten Hemd
    0 x
    2 Beiträge
    0 Hilfreiche Beiträge
    05. 06. 2014, 08:53

    Es sieht ja schon fast so aus, bis auf die Pfeile rechts daneben (sind im orig. HTML b-tags mit einer klasse. Wenn ich die im TS beim wrappen hinter die Pipe packe erscheinen sie zwar im Frontend, aber zerschießen mir das ganze Menülayout). Und die Funktionalität ist nicht gegeben.

    Das ganze funktioniert mit einem ändern der Link-Klasse bei "onClick". Nur habe ich noch nie mit onClick-Events, bzw. einem ändern der zugewiesenen Klasse bei onClick gearbeitet und kenne mich damit null aus.

  • Julian.Hofmann Julian.Ho...
    Flash Gordon
    0 x
    2849 Beiträge
    105 Hilfreiche Beiträge
    06. 06. 2014, 16:18

    Zitiert von: jet_black
    Wenn ich die im TS beim wrappen hinter die Pipe packe (...)
    Bei welchem Wrap?

    Sollte tun mit 

    1. ACTIFSUB.stdWrap.noTrimWrap = || <b class="caret">|

    Die Unterscheidung von ACT und ACTIFSUB macht hier IMHO auch Sinn, da ansonsten dem JavaSceipt das zugehörige Menü fehlen wird, falls es keine Unterpunkte gibt.

    Viele Grüße
    Julian

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