Zum Inhalt springen

Bootstrap4 Menu mit Dropdown

Erstellt am 20. Februar 2019 · 2 Antworten · letzte Antwort am 14. Oktober 2020

Tags: Bootstrap, TYPO3 9, Frage

juliano ·

Guten Tag,

ich bastel gerade an einem Bootstrap 4 Menu, was bisher auch gut funktioniert hat.
Nun merke ich das die Unterseiten beim Dropdown-Menü Probleme machen.
Ich versuche mich seit einigen Stunden daran die Bootstrap - Split-Button zu intergrieren, wo dann Links der normale Link zur Unterseite und über den Pfeil daneben dann die Unterseiten als Dropdown aufgehen.

Habe es mit doNotShowLink und addQueryString.exclude = href versucht aber bisher ohne Erfolg.

Jemand eine Idee ?
Vielen lieben Dank

https://v4-alpha.getbootstrap.com/components/dropdowns/#split-button-dropdowns

lib.mainNavi = HMENU
lib.mainNavi {
  1 = TMENU
  1 {
    expAll = 1
    wrap = <ul class="navbar-nav">|</ul>
    NO = 1
    NO {
      wrapItemAndSub = <li class="nav-item">|</li>
      ATagParams = class="nav-link"
    }

    IFSUB < .NO
    IFSUB = 1
    IFSUB {
      wrapItemAndSub = <li class="nav-item dropdown">|</li>
      ATagParams = class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
      typolink.addQueryString.exclude = href
    }

    ACT < .NO
    ACT = 1
    ACT {
      wrapItemAndSub = <li class="nav-item active">|</li>
      ATagParams = class="nav-link active"
    }

    ACTIFSUB < .NO
    ACTIFSUB = 1
    ACTIFSUB {
      wrapItemAndSub = <li class="dropdown active nav-item">|</li>
      ATagParams = class="dropdown-toggle active nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
    }
  }

  2 = TMENU
  2 {
    wrap = <div class="dropdown-menu" role="menu">|</div>
    NO = 1
    NO {
      #wrapItemAndSub = <li class="level-2">|</li>
      ATagParams = class="dropdown-item"
      stdWrap.htmlSpecialChars = 1
    }

    ACT = .NO
    ACT {
      #wrapItemAndSub = <li class="active level-2">|</li>
      ATagParams = class="dropdown-item"
    }
  }
}
juliano ·

Hey Philipp,

ich denke ja.

Habe es nun wie folgt gelöst:

```lib.mainNavi = HMENU
lib.mainNavi {

1 = TMENU
1 {
expAll = 1
wrap = <ul class="navbar-nav">|</ul>

entryLevel = 0
# prepend link to home
stdWrap.prepend = TEXT
stdWrap.prepend {
htmlSpecialChars = 1
data = leveltitle:0
typolink.parameter.data = leveluid:0
typolink.ATagParams = class="nav-link"

typolink.ATagParams.override = class="nav-link active"
typolink.ATagParams.override{
if.value.data = leveluid:0
if.equals.data = TSFE:id
}

wrap = <li class="nav-item">|</li>
wrap.override = <li class="nav-item active">|<span class="sr-only"> (current)</span></li>
wrap.override {
if.value.data = leveluid:0
if.equals.data = TSFE:id
}
}

NO = 1
NO {
wrapItemAndSub = <li class="nav-item">|</li>
ATagParams = class="nav-link"
}

IFSUB < .NO
IFSUB = 1
IFSUB {
wrapItemAndSub = <li class="dropdown nav-item custom-dropdown">|</li>
ATagParams = class="nav-link d-inline-block"
allWrap = | <a href="#" class="dropdown-toggle nav-link dropdown-carot d-inline-block" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">&nbsp;</a>

//wrapItemAndSub = <li class="nav-item dropdown">|</li>
//ATagParams = class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
}

ACT < .NO
ACT = 1
ACT {
wrapItemAndSub = <li class="nav-item active">|</li>
ATagParams = class="nav-link active"
}

ACTIFSUB < .NO
ACTIFSUB = 1
ACTIFSUB {
wrapItemAndSub = <li class="dropdown active nav-item custom-dropdown">|</li>
ATagParams = class="nav-link d-inline-block active"
allWrap = | <a href="#" class="dropdown-toggle active nav-link dropdown-carot d-inline-block" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">&nbsp;</a>
}
}

2 = TMENU
2 {
wrap = <div class="dropdown-menu" role="menu">|</div>
NO = 1
NO {
#wrapItemAndSub = <li class="level-2">|</li>
ATagParams = class="dropdown-item"
stdWrap.htmlSpecialChars = 1
}

ACT = .NO
ACT {
#wrapItemAndSub = <li class="active level-2">|</li>
ATagParams = class="dropdown-item"
}
}
}

lib.content {
render = CONTENT
render {
table = tt_content
select {
orderBy = sorting
where.cObject = COA
where.cObject {
10 = TEXT
10 {
field = colPos
intval = 1
ifEmpty = 0
noTrimWrap = | AND colPos=||
}
}
}
}
}

lib.dynamicContent = COA
lib.dynamicContent {

10 = LOAD_REGISTER
10 {
colPos.cObject = TEXT
colPos.cObject {
field = colPos
ifEmpty.cObject = TEXT
ifEmpty.cObject {
value.current = 1
ifEmpty = 0
}
}
pageUid.cObject = TEXT
pageUid.cObject {
field = pageUid
ifEmpty.data = TSFE:id
}
contentFromPid.cObject = TEXT
contentFromPid.cObject {
data = DB:pages:{register:pageUid}:content_from_pid
data.insertData = 1
}
wrap.cObject = TEXT
wrap.cObject {
field = wrap
}
}
20 = CONTENT
20 {
table = tt_content
select {
includeRecordsWithoutDefaultTranslation = 1
orderBy = sorting
where = {#colPos}={register:colPos}
where.insertData = 1
pidInList.data = register:pageUid
pidInList.override.data = register:contentFromPid
}
stdWrap {
dataWrap = {register:wrap}
required = 1
}
}
30 = RESTORE_REGISTER
}

lib.dynamicContentSlide =< lib.dynamicContent
lib.dynamicContentSlide.20.slide = -1

/*lib.dynamicContent = COA
lib.dynamicContent {
10 = LOAD_REGISTER
10.colPos.cObject = TEXT
10.colPos.cObject {
field = colPos
ifEmpty.cObject = TEXT
ifEmpty.cObject {
value.current = 1
ifEmpty = 0
}
}
20 = CONTENT
20 {
table = tt_content
select {
orderBy = sorting
where = colPos={register:colPos}
where.insertData = 1
}
}
90 = RESTORE_REGISTER
}
*/
page = PAGE
page {

10 = FLUIDTEMPLATE
10 {
templateName = Standard
templateRootPaths {
0 = EXT:jo_modellbau_distribution/Resources/Private/Templates/Page/
}
partialRootPaths {
0 = EXT:jo_modellbau_distribution/Resources/Private/Partials/Page/
}
layoutRootPaths {
0 = EXT:jo_modellbau_distribution/Resources/Private/Layouts/Page/
}
}
}´´´