So, heute gibt es mal wieder ein kleines aber feines Snippet für alle Typo3 User unter euch.

Vorspann: Es kam eher etwas ungeplant zustande. Ich war gerade dabei eine Plattform auf Basis von Bootstrap am gestalten. Als ich dann am Menü angelegt bin, ist mir aufgefallen, dass in der 3er Bootstrap kein Submenü existiert (Die Sinnigkeit lass ich jetzt mal unkommentiert im Raum stehen, ich kann es allerdings gut nachvollziehen). Naja.. da ich aber jetzt nicht wieder zurück auf Version 2 wollte (im Endeffekt wäre das wohl schneller gewesen) hab ich mich mal auf die Suche begeben und kam letztendlich auf eine sehr angenehme Lösung.

Voraussetzung ist das Framework „Bootstrap 3“

Das TS-Menü

# Main-Navigation
temp.mainNavi = HMENU
temp.mainNavi {
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>

}
}

 

Nun müsst ihr noch eure CSS Datei um folgendes erweitern damit die Multi-Level Funktion greift (Stammt aus der Bootstrap Version 2)

.dropdown-submenu{
position:relative;
}
.dropdown-submenu > .dropdown-menu{
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
}
.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-width:5px 0 5px 5px;
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;
}

Als letztes muss nur noch der Hover:Effekt aktiviert werden! Also noch etwas für die CSS-Datei

display: block;
margin-top:0px
}

Das wäre es erstmal! Vlt. hilft es ja 🙂

2013-10-09T23:37:04+00:00Allgemein, Coding, Typo3|0 Kommentare

Hinterlassen Sie einen Kommentar