CODEWITHSUNDEEP
typo3typoscript
George
George

Reputation: 127

TYPO3 site menu with typoscript

I am new in TYPO3, I would like to know if it is possible to transform (using typoscript) the following structure of html-css menu in TYPO3 Hmenu. It is a multilevel structure with html lists.

     <ul class="nav navbar-nav">
        <!-- Home -->
        <li class="dropdown">
          <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
            Home
          </a>
          <ul class="dropdown-menu">
            <li><a href="index.html">Option 1: Default Page</a></li>

            <!-- One Page -->
            <li class="dropdown-submenu">
              <a href="javascript:void(0);">Option 2: One Page</a>
              <ul class="dropdown-menu">
                <li><a target="_blank" href="One-Pages/Classic/index.html">- One Page Template</a></li>
                <li><a target="_blank" href="One-Pages/Classic/one_page_dark.html">- One Page Dark Option</a></li>
              </ul>
            </li>
            <!-- End One Page -->

          </ul>
        </li>
        <!-- End Home -->

        <!-- Pages -->
        <li class="dropdown">
          <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
            Pages
          </a>
          <ul class="dropdown-menu">
            <!-- About Pages -->
            <li class="dropdown-submenu">
              <a href="javascript:void(0);">About Pages</a>
              <ul class="dropdown-menu">
                <li><a href="page_about2.html">About Us </a></li>
                <li><a href="page_about3.html">About Us 1</a></li>                    
              </ul>
            </li>
            <!-- End About Pages -->

            <!-- Service Pages -->
            <li class="dropdown-submenu">
              <a href="javascript:void(0);">Service Pages</a>
              <ul class="dropdown-menu">
                <li><a href="page_services.html">Our Services</a></li>
              </ul>
            </li>
            <!-- End Service Pages -->              
          </ul>
        </li>
        <!-- End Pages -->                        

      </ul>

Upvotes: 0

Views: 435

Answers (1)

Andr&#225;s Ott&#243;
Andr&#225;s Ott&#243;

Reputation: 7695

It is possible, please read the very detailed manual here.

lib.textmenu = HMENU lib.textmenu {

    # We define the first level as text menu.
    1 = TMENU

    # We define the normal state ("NO").
    1.NO = 1
    1.NO.allWrap = <li>|</li>

    # We define the active state ("ACT").
    1.ACT = 1
    1.ACT.wrapItemAndSub = <li>|</li>

    # Wrap the whole first level.
    1.wrap = <ul class="level1">|</ul>

    # The second and third level should be configured exactly
    # the same way.
    # In between the curly brackets, objects can be copied.
    # With the dot "." we define that the object can be found
    # in the brackets.
    # With 2.wrap and 3.wrap we overwrite the wrap, which was
    # copied from 1.wrap.
    2 < .1
    2.wrap = <ul class="level2">|</ul>
    3 < .1
    3.wrap = <ul class="level3">|</ul> 
}

If you already know TypoScript, then here are the references: HMENU, TMENU, TMENUITEM

Upvotes: 0

Related Questions