Tutorial: Typoscript Library for Bootstrap v3.3.7 Hover Navigation in Fluid Template (Complete Code)

For this we use slight CSS adaptations to the bootstrap v3 standard. It works without additional JavaScript, is fast and also shows the active state, so the corresponding open page in a different layout. The complete code can be inserted into your site and it works. The page tree is evaluated dynamically, so no manual adjustments are necessary.

We show our Hoveravigation and how to easily install it in Typo3 v8.7.9 (with CSS3 without JS)

Blog

Feb, 4. 2018

We will show you how to easily install a hover navigation with TMENU and HMENU, so subpages in Typo3

[Translate to English:] Bootstrap Hover Navigation für Typo3

Many of you will know the default navigation of the Introduction Package (now called Bootstrap Package ). Subpages are automatically expanded when hovering with the mouse and the user can quickly jump to each page. Here: hover:: active and normal statuses are displayed accordingly and so it makes the user experience ( UX / UI Design ) accordingly high quality. We'll show you how to build these in a few simple steps and add your own CSS , which is layout. We rely on a few adjustments and a small, lightweight Typoscript Library written by a user in the Typo3 forum. On jQuery or Javascript we completely do without the bootstrap standard. This promotes performance and device support, making it easier to maintain, saving you extra time, money and hassle.

The Typoscript Library for Bootstrap v3 Hover Navigation

typoscript


            lib.mainnav = HMENU

lib.mainnav {

    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.wrapItemAndSub = <li class="dropdown">|</li>

        IFSUB.ATagTitle.field = abstract // description // title

        IFSUB.ATagParams = class="dropdown-toogle" data-toogle="dropdown"

        ACTIFSUB = 1

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

        ACTIFSUB.ATagTitle.field = abstract // description // title

        ACTIFSUB.ATagParams = class="dropdown-toogle" data-toogle="dropdown"

        wrap = <ul class="nav nav-pills">|</ul>

    }



    2 < .1

    2 {

        IFSUB = 1

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

        IFSUB.ATagParams = class="dropdown-toogle" data-toogle="dropdown"

        ACTIFSUB = 1

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

        ACTIFSUB.ATagTitle.field = abstract // description // title

        wrap = <ul class="dropdown-menu">|</ul>

    }



    3 < .2

    3 {

        ACT = 1

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

        ACT.ATagTitle.field = abstract // description // title

        wrap = <ul class="dropdown-menu">|</ul>

    }

}

For example, you can insert the Typoscript Library in the root template under Setup. Or you can do it right the first time and include a file called 0020_mainnav.ts in your main extension and paste it there (assuming a file call):

Implements all typoscript files (.ts) in the library subfolder of your extension

typoscript


            <INCLUDE_TYPOSCRIPT: source="DIR: ./Library" extensions="ts">

The CSS changes in a SASS file

sass


            #head {

  .dropdown-submenu{

    position:relative;

  }

  .dropdown-submenu > .dropdown-menu{

    top:0;

    left:100%;

    margin-top:-6px;

    margin-left:-1px;

  }

  .dropdown-submenu:hover > .dropdown-menu{

    display:block;

  }

  .dropdown-submenu > a:after{

    display:block;

    content:" ";

    float:right;

    width:0;

    height:0;

    border-color:transparent;

    border-style:solid;

    border-left-color:#cccccc;

    margin-top:5px;

    margin-right:-10px;

  }

  .dropdown-submenu:hover > a:after{

    border-left-color:#ffffff;

  }

  .dropdown-submenu .pull-left{

    float:none;

  }

  .dropdown-submenu.pull-left > .dropdown-menu{

    left:-100%;

    margin-left:10px;

    -webkit-border-radius:6px 0 6px 6px;

    -moz-border-radius:6px 0 6px 6px;

    border-radius:6px 0 6px 6px;

  }



  ul.nav > li.dropdown:hover > ul.dropdown-menu {

    display: block;

    margin-top:0px

  }



  .navbar-inverse {

    background-color: transparent;

    border: none;

  }

  .dropdown-submenu a:first-letter {

    color: red;

  }

  ul.nav.nav-pills {

    font-size: 24px;

  }



  .nav>li>a:focus, .nav>li>a:hover {

    text-decoration: none;

    background: transparent;

    border-bottom: 5px solid red;

    margin-bottom: -5px;

  }



  .nav-pills>li.active>a, .nav-pills>li.active>a:focus {

    border-bottom: 2px solid red;

    margin-bottom: -2px;

    background: transparent;

    color: $renoi-color-secondary;

  }

  .dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {

    background-color: #542121;

  }

}



@media (max-width: 767px) {

  .container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {

    margin-left: 0;

  }

}

This is how you integrate the SASS file for dynamic hover navigation

First of all a hint: the ID #head exists only with us. If your navigation is in a wrapper, use its ID or class here, or remove the statement completely (but all layouts will be overridden by bootstrap navigations on your page). If you do not want to use SASS, which we strongly advise against, then you can also remove the variables and wrappers (elements that are nested in curly brackets) and adjust the code accordingly so that it works in the normal CSS as well.

But rather use the chance to convert your project to SASS or LESS, to get smaller code snippets with more dynamics and a much improved overview! You can now include this file in your grunt process (load somewhere between bootstrap and media querys). If you have any questions, feel free to contact us via the contact form or in the comments below.

Then insert the TS library into your fluid template:

fluid


                  <div class="body-wrap">

                <div class="container">

                    <nav class="navbar navbar-inverse" role="navigation">

                        <div class="container-fluid">

                            <div class="navbar-header">

                                <f:cObject typoscriptObjectPath="lib.mainnav"/>

                                <!-- /.navbar-collapse -->

                            </div>

                            <!-- /.container-fluid -->

                    </nav>

                </div>

            </div>

It's up to you whether you need to nest like this or something else. It's only important that you load the Typoscript library and define some bootstrap default wrappers. We're also through that, and you can call your frontend after you've cleared the cache and it will show the new hover navigation.

This article is based on Bootstrap v3.3.7 and Typo3 8.7.9 LTS . If you're using Bootstrap v2 or v4 or are still working with Typo3 6 LTS or 7 LTS , this should be a great deal work similarly.

Sources:

The typoscript library we got from a nice user round8 from the Typo3 Forum & nbsp; (this entry is based on Bootstrap v2, we have adapted our article for v3)
Bootstrap Documentation for v3 with Anchor at Navigations Point
Install Grunt and SASS and use

Current rating is 4.0 out of 5
1
2
3
4
5

Step for step guide

Read the article Bootstrap v3 Hover Navigation for Typo3 v8 LTS

Do all the steps of the article Bootstrap v3 Hover Navigation for Typo3 v8 LTS

Rating: 4.0. 1 vote(s).
1 anonymous votes
Your vote was '' (0 of 5) You are an anonymous user.
You may log on to do personalized votings