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)

// navigation

Blog


// content

Feb, 4. 2018

We will show you how to easily install a hover navigation with TMENU and HMENU, so subpages in 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:

Rating: 4.0. 1 vote(s).
1 anonymous votes
No rating done at all.
Your vote was '' (0 of 5) You are an anonymous user.
You may log on to do personalized votings
Click the rating bar to rate this item Please log on to do ratings

Comments

comments powered by Disqus