Suche
Teilen
startseite » forum

[Frage] Typo3 Bootstrap 3.3.5 und responsive design Menu auf Smartphone nicht sichtbar TYPO3-Version: 6.2.7

  • 0 x
    25 Beiträge
    0 Hilfreiche Beiträge
    13. 10. 2015, 14:45

    Basis: Typo3 6.2 und Bootstrap 3.3.5

    Problem: Responsive Menu auf Smartphone nicht sichtbar.

    Ich suchte nach eine Lösung, das Menu von Bootstrap auf kleinen Geräten anzuzeigen, meine das mit den drei Strichen untereinander. Dabei bin ich auf folgende Lösung gestoßen:

    1. # Main-Navigation
    2.  
    3. lib.field_topmenu = HMENU
    4. lib.field_topmenu.wrap (
    5.  
    6. <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    7.   <div class="container">
    8.     <div class="navbar-header">
    9.       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
    10.         <span class="sr-only">Toggle navigation</span>
    11.         <span class="icon-bar"></span>
    12.         <span class="icon-bar"></span>
    13.         <span class="icon-bar"></span>
    14.       </button>
    15.       <a class="navbar-brand" href="http://www.example.com">Your Company Name or Logo</a>
    16.     </div>
    17.     <div class="collapse navbar-collapse" id="navbar-collapse">
    18.       <ul class="nav navbar-nav">|</ul>
    19.     </div><!-- /.navbar-collapse -->
    20.   </div><!-- /.container -->
    21. </nav>
    22.  
    23.   )
    24. lib.field_topmenu.entryLevel = 0
    25. lib.field_topmenu {
    26.     1 = TMENU
    27.     1 {
    28.     expAll = 1
    29.  
    30.     NO.allWrap = <li>|</li>
    31.     NO.ATagTitle.field = abstract // description // title
    32.  
    33.     ACT = 1
    34.     ACT.wrapItemAndSub = <li class="active">|</li>
    35.     ACT.ATagTitle.field = abstract // description // title
    36.  
    37.     IFSUB = 1
    38.     IFSUB.before = <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    39.     IFSUB.after = <b class="caret"></b></a>
    40.     IFSUB.doNotLinkIt = 1
    41.     IFSUB.wrapItemAndSub = <li class="dropdown">|</li>
    42.     IFSUB.ATagTitle.field = abstract // description // title
    43.  
    45.     ACTIFSUB.before = <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    46.     ACTIFSUB.after = <b class="caret"></b></a>
    47.     ACTIFSUB.doNotLinkIt = 1
    48.     ACTIFSUB.wrapItemAndSub = <li class="dropdown active">|</li>
    49.     ACTIFSUB.ATagTitle.field = abstract // description // title
    50.  
    51.     }
    52.  
    53.     2 = TMENU
    54.     2 {
    55.     expAll = 1
    56.  
    57.     ACT = 1
    58.     ACT.wrapItemAndSub = <li class="active">|</li>
    59.     ACT.ATagTitle.field = abstract // description // title
    60.  
    62.     ACTIFSUB.wrapItemAndSub = |
    63.     ACTIFSUB.before = <li class="divider"></li><li class="nav-header">
    64.     ACTIFSUB.after = </li>
    65.     ACTIFSUB.doNotLinkIt = 1
    66.     ACTIFSUB.ATagTitle.field = abstract // description // title
    67.  
    68.     NO.allWrap = <li>|</li>
    69.     NO.ATagTitle.field = abstract // description // title
    70.  
    71.     IFSUB = 1
    72.     IFSUB.before = <li class="divider"></li><li class="nav-header">
    73.     IFSUB.after = </li>
    74.     IFSUB.doNotLinkIt = 1
    75.     IFSUB.ATagTitle.field = abstract // description // title
    76.  
    77.     SPC = 1
    78.     SPC.allWrap = <li class="divider"></li><li class="nav-header">|</li>
    79.  
    80.     wrap = <ul class="dropdown-menu">|</ul>
    81.     }
    82.  
    83.     3 = TMENU
    84.     3 {
    85.     NO.allWrap = <li>|</li>
    86.     NO.ATagTitle.field = abstract // description // title
    87.  
    88.     ACT = 1
    89.     ACT.wrapItemAndSub = <li class="active">|</li>
    90.     ACT.ATagTitle.field = abstract // description // title
    91.     }
    92.   }

    Ergebnis:
    1. Das normale Menü wird angezeigt :)
    2. Wenn ich auf dem PC, die Seite zusammen schiebe wird das responsive Menu angezeigt :)
    3. Wenn ich auf dem Smartphone oder Tablet schaue, wird nur das normale Menu angezeigt und nicht das responsive Menü :(

    FRAGEN:
    1) Jemand eine Idee, woran das liegen kann bzw. welches des ausschlaggebende Befehl ist?

    2) Hat das zufällig jemand auch schon mal mit Nav Pills gemacht? Habe zwar folgenden Lösungsansatz dafür gefunden http://stackoverflow.com/questions/23109704/makes-nav-pills-collapsable-just-like-nav-bar-in-bootstrap , aber das führte nicht wirklich zum gewünschten Ergebnis. (Wollte das Responsive Menu auf Basis dieser Vorlage umsetzen: http://holdirbootstrap.de/examples/jumbotron-narrow/ sprich class="nav nav-pills pull-right"

    Vielen Dank im Voraus!

    Tags: TYPO3 , Bootstrap , Responsive , Menu
  • 1
  • 1
Präsentiert von