Tutorial: Typoscript Library für Bootstrap v3.3.7 Hover Navigation in Fluid Template Kompletter Code

Dafür verwenden wir geringfügige CSS Anpassungen zum Bootstrap v3 Standard. Es funktioniert ohne zusätzliches Javascript, ist schnell und zeigt auch den active-State, also die entsprechend geöffnete Seite in einem anderen Layout an. Der komplette Code kann so bei Ihnen eingefügt werden und es funktioniert. Der Seitenbaum wird dabei dynamisch eingelesen, es sind also keine manuellen Anpassungen nötig.

Wir zeigen unsere Hovernavigation und wie man diese leicht in Typo3 v8.7.9 einbaut (mit CSS3 ohne JS)

// navigation

Blog


// content

4. Feb 2018

Wir zeigen Ihnen wie Sie leicht eine Hover Navigation mit TMENU und HMENU, also Unterseiten in Typo3 einbauen

Viele von Ihnen werden die Standardnavigation vom Introduction Package (mittlerweile Bootstrap Package genannt) kennen. Unterseiten werden automatisch beim Hovern mit der Maus ausgeklappt angezeigt und so kann der Nutzer schnell die einzelnen Seiten anspringen. Dabei werden :hover, :active und normale Statusse entsprechend angezeigt und so macht es die Nutzererfahrung (UX / UI Design) entsprechend qualitativ hochwertig. Wir zeigen Ihnen hier in ein paar einfachen Schritten wie Sie diese nachbauen und mit Ihrem eigenen CSS, also Layout, versehen. Dabei setzen wir auf wenige Anpassungen und eine kleine, leichte Typoscript Library von einem Nutzer im Typo3 Forum geschrieben. Auf jQuery oder Javascript verzichten wir bis auf den Bootstrap Standard völlig. Dies fördert die Performance und den Gerätesupport und macht das Ganze leichter wartbar, spart Ihnen also zusätzlich Geld, Zeit und Ärger.

Die Typoscript Library für eine 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>
}
}

Die Typoscript Library können Sie zum Beispiel im Root-Template unter Setup einfügen. Oder Sie machen es gleich richtig und binden in Ihrer Haupt-Extension eine Datei namens 0020_mainnav.ts ein und fügen Sie dort ein (ein entsprechender Aufruf der Datei vorausgesetzt):

Implementiert alle Typoscript Dateien (.ts) im Library Unterordner Ihrer Extension

typoscript

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

Die CSS Änderungen in einer SASS Datei

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;
}
}

So binden Sie die SASS-Datei für die dynamische Hovernavigation ein

Zu allererst ein Hinweis: die ID #head gibt es nur bei uns. Wenn Ihre Navigation in einem Wrapper liegt, verwenden Sie hier dessen ID oder Klasse oder entfernen Sie die Anweisung vollständig (dann werden aber alle Layouts von Bootstrap Navigationen Ihrer Seite überschrieben). Wenn Sie kein SASS nutzen möchten, wovon wir dringend abraten, dann können Sie auch die Variablen und Wrapper (Elemente, die in geschweiften Klammern geschachtelt sind) entfernen und den Code entsprechend anpassen, sodass er auch im normalen CSS funktioniert.

Nutzen Sie aber lieber die Chance Ihr Projekt auf SASS oder LESS umzustellen, um so kleinere Codeschnipsel mit mehr Dynamik und deutlich verbesserter Übersicht zu erhalten! Sie können diese Datei nun in Ihren Grunt-Prozess einbinden (irgendwo zwischen Bootstrap und Media Querys laden). Wenn Sie Fragen dazu haben, kontaktieren Sie uns gerne per Kontaktformular oder in den Kommentaren unten.

Anschließend bauen Sie die TS-Library in Ihr Fluid-Template ein:

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>

Ob Sie die Schachtelung so benötigen oder anders, entscheiden Sie am besten selbst. Wichtig ist nur, dass Sie die Typoscript Bibliothek laden und ein paar von Bootstrap vorgegebene Wrapper definieren. Damit sind wir auch durch und Sie können Ihr Frontend aufrufen, nachdem Sie den Cache geleert haben und es zeigt die neue Hovernavigation an.

Dieser Artikel beruht auf Bootstrap v3.3.7 und Typo3 8.7.9 LTS. Wenn Sie Bootstrap v2 oder v4 nutzen oder noch mit Typo3 6 LTS oder 7 LTS arbeiten, sollte dies aber sehr ähnlich funktionieren.

Quellen:

Rating: 4.5. 2 Bewertung(en).
2 anonyme Bewertungen
No rating done at all.
Dein Voting war (0 von 5) Du bist nicht eingeloggt.
Um persönliche Votings abzugeben, kannst du dich einloggen.
Click the rating bar to rate this item Please log on to do ratings

Kommentare

comments powered by Disqus