German
English
Blog
- Web Development
- a href – How to Use Target Blank Correctly
- Dynamic Link List of Typo3 Content
- Bootstrap v3 Hover Navigation for Typo3 v8 LTS
- Priority of Cascading Stylesheets done right
- Agile Death Star Evolution: Scrum on the example of Star Wars
- How to get a Typo3 Website to 100/100 on Google Pagespeed Insights
- How do images work on the web?
- Programming Languages
- Experience: from Java to Google Golang
- Google Golang Online Editor
- PHP Online Editor
- Controlling
- Cost balancing appliances and human resources
- SEO
- Do YouTubers need their own website?
- Typo3
- Restore recursively deleted pages and content in Typo3 (all versions)
- The History of Typo3
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](/fileadmin/user_upload/renoi/article/code/renoi-bootstrap-hover-navigation-typo3.png "[Translate to English:] Die Renoi.de Hover Navigation")
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