Intégrateur certifié et Développeur TYPO3

Les autres blogs

TYPO3 : un menu Bootstrap 3 avec un HMENU TMENU

HTML (menu example bootstrap)

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <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="">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Contact</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="">Action</a></li>
                        <li><a href="">Another action</a></li>
                        <li><a href="">Something else here</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Nav header</li>
                        <li><a href="">Separated link</a></li>
                        <li><a href="">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
</nav>

Typoscript (configuration du menu)

lib.menu_bootstrap = COA
lib.menu_bootstrap {
    wrap (
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">|</div>
    </nav>
    )
    
    # NavBar Header
    10 = TEXT
    10 {
        data = leveltitle:0
        typolink {
            parameter.data = leveluid:0
            ATagParams = class="navbar-brand"
            title.data = leveltitle:0
        }
        wrap (
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            |
        )
    }

    # Menu
    20 = HMENU
    20 {
        wrap = <div id="navbar" class="navbar-collapse collapse"><ul class="nav navbar-nav">|</ul></div>

        # Premier niveau
        1 = TMENU
        1 {
            expAll = 1

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

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

            # Sous-menu existe
            IFSUB = 1
            IFSUB {
                wrapItemAndSub = <li class="dropdown">|</li>
                ATagParams = class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"
                stdWrap.innerWrap = |&amp;nbsp;<span class="caret"></span>
            }

            # Sous-menu existe et actif
            ACTIFSUB = 1
            ACTIFSUB {
                wrapItemAndSub = <li class="dropdown active">|</li>
                ATagParams = class="dropdown-toggle" data-toggle="dropdown"
                stdWrap.innerWrap = |&amp;nbsp;<span class="caret"></span>
            }
        }

        # Deuxième niveau
        2 = TMENU
        2 {
            wrap = <ul class="dropdown-menu" role="menu">|</ul>

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

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

            # Séparateur de menu
            SPC = 1
            SPC.doNotShowLink = 1
            SPC.doNotLinkIt = 1
            SPC.allWrap = <li class="divider"></li>
        }
    }
}

Améliorations

Le seul élément qui n'est pas géré dans mon menu est le "dropdown-header". Je n'en ai pas trouvé l'intérêt.

N'hésitez pas à partager votre code dans les commentaires pour étoffer ce post.

Commentaires

commentaires générés par Disqus