Hallo Leute, ich habe heute keine Frage sondern eher ein Tipp / Beispiel.
Ich hoffe ich kann damit jemanden weiter helfen 🙂
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
ul.nav > li.dropdown:hover > ul.dropdown-menu {
display: block;
margin-top:0px
}
Das wäre es erstmal! Vlt. hilft es ja 🙂