Feb, 4. 2018
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.
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):
typoscript
<INCLUDE_TYPOSCRIPT: source="DIR: ./Library" extensions="ts">
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;
}
}
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: