CODEWITHSUNDEEP
twitter-bootstrap-3typo3navbartyposcript
Fab
Fab

Reputation: 278

Typo3 BootStrap 3 navbar (typoscript)

Hi I am new to typoscript and I need help in getting the menu working. The following typoscript will render the Bootstrap navbar, yet the menu is thrown out of the navbar completely without css styles.

topnavigation = HMENU
topnavigation.wrap (

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container"> 
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
      <a class="navbar-brand" href="http://www.example.com">Brand</a></div>
    <div class="collapse navbar-collapse" id="navbar-collapse">
      <ul class="nav navbar-nav">

      </ul>
    </div>
  </div>
</nav>

)
  topnavigation.entryLevel = 0
  topnavigation {
    1= TMENU
    1 {
      expAll = 1
      maxItems = 4
      NO.wrapItemAndSub = <li>|</li>

      ACT = 1
      ACT.wrapItemAndSub =  <li class="active">|</li>            

      IFSUB = 1
      IFSUB.wrapItemAndSub = <li class="dropdown">|</li>

      ACTIFSUB = 1
      ACTIFSUB.wrapItemAndSub= <li class="active dropdown">|</li>

    }    
    2= TMENU
    2 {
      wrap = <ul class="dropdown-menu">|</ul>
      NO.wrapItemAndSub = <li>|</li>

      ACT = 1
      ACT.wrapItemAndSub =  <li class="active">|</li>

    }    
  }

Please help

Upvotes: 1

Views: 5195

Answers (2)

Fab
Fab

Reputation: 278

Biesior, thanks for pipe suggestions, it did set me in the right direction. After a load of research and hacking (not being a coder and alien to typoscript), I managed to get the bootstrap 3 inverse navbar working correctly with in typo3.

The following code works out of the box.

topnavigation = HMENU
topnavigation.wrap (

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="http://www.example.com">Your Company Name or Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse">
      <ul class="nav navbar-nav">|</ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container -->
</nav>

  )
topnavigation.entryLevel = 0
topnavigation {
    1 = TMENU
    1 {
    expAll = 1
     
    NO.allWrap = <li>|</li>
    NO.ATagTitle.field = abstract // description // title
     
    ACT = 1
    ACT.wrapItemAndSub = <li class="active">|</li>
    ACT.ATagTitle.field = abstract // description // title
     
    IFSUB = 1
    IFSUB.before = <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    IFSUB.after = <b class="caret"></b></a>
    IFSUB.doNotLinkIt = 1
    IFSUB.wrapItemAndSub = <li class="dropdown">|</li>
    IFSUB.ATagTitle.field = abstract // description // title
     
    ACTIFSUB = 1
    ACTIFSUB.before = <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    ACTIFSUB.after = <b class="caret"></b></a>
    ACTIFSUB.doNotLinkIt = 1
    ACTIFSUB.wrapItemAndSub = <li class="dropdown active">|</li>
    ACTIFSUB.ATagTitle.field = abstract // description // title
     
    }
     
    2 = TMENU
    2 {
    expAll = 1
     
    ACT = 1
    ACT.wrapItemAndSub = <li class="active">|</li>
    ACT.ATagTitle.field = abstract // description // title
     
    ACTIFSUB = 1
    ACTIFSUB.wrapItemAndSub = |
    ACTIFSUB.before = <li class="divider"></li><li class="nav-header">
    ACTIFSUB.after = </li>
    ACTIFSUB.doNotLinkIt = 1
    ACTIFSUB.ATagTitle.field = abstract // description // title
     
    NO.allWrap = <li>|</li>
    NO.ATagTitle.field = abstract // description // title
     
    IFSUB = 1
    IFSUB.before = <li class="divider"></li><li class="nav-header">
    IFSUB.after = </li>
    IFSUB.doNotLinkIt = 1
    IFSUB.ATagTitle.field = abstract // description // title
     
    SPC = 1
    SPC.allWrap = <li class="divider"></li><li class="nav-header">|</li>
     
    wrap = <ul class="dropdown-menu">|</ul>
    }
     
    3 = TMENU
    3 {
    NO.allWrap = <li>|</li>
    NO.ATagTitle.field = abstract // description // title
     
    ACT = 1
    ACT.wrapItemAndSub = <li class="active">|</li>
    ACT.ATagTitle.field = abstract // description // title
    }
  }

Remember to refer to the extension in the main page (fileadmin/your_template/layouts/your_main_page.html) 

<f:cObject typoscriptObjectPath="topnavigation" />

Upvotes: 1

biesior
biesior

Reputation: 55798

You haven't pipe symbol in your topnavigation.wrap anywhere...

Each wrap should use pipe symbol | in the place where the wrapped content should be placed, as i.e. in your TMENU:

NO.wrapItemAndSub = <li>|</li>

Anyway your general wrap with this whole Bootstrap markup doesn't have it, most probably that's the reason of wrong rendering...

Most probably it should be somewhere there:

   ...
      <ul class="nav navbar-nav">|</ul>
   ...

BTW, use browser's inspector tools to check what's missing, we can only guess.

Upvotes: 1

Related Questions