Suche
Teilen
startseite » forum

Bootstrap 3 Multi-Level Dropdown Menü TYPO3-Version: 6.1.1

  • runde8 runde8
    TYPO3-Anwärter
    1 x
    4 Beiträge
    2 Hilfreiche Beiträge
    09. 10. 2013, 23:29

    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ü

    1. # Main-Navigation
    2. temp.mainNavi = HMENU
    3. temp.mainNavi {
    4.   1 = TMENU
    5.   1 {
    6.     expAll = 1
    7.     NO.allWrap = <li>|</li>
    8.     NO.ATagTitle.field = abstract // description // title
    9.  
    10.     ACT = 1
    11.     ACT.wrapItemAndSub = <li class="active">|</li>
    12.     ACT.ATagTitle.field = abstract // description // title
    13.  
    14.     IFSUB = 1
    15.     IFSUB.wrapItemAndSub = <li class="dropdown">|</li>
    16.     IFSUB.ATagTitle.field = abstract // description // title
    17.     IFSUB.ATagParams = class="dropdown-toogle" data-toogle="dropdown"
    18.  
    20.     ACTIFSUB.wrapItemAndSub = <li class="dropdown active">|</li>
    21.     ACTIFSUB.ATagTitle.field = abstract // description // title
    22.     ACTIFSUB.ATagParams = class="dropdown-toogle" data-toogle="dropdown"
    23.  
    24.     wrap = <ul class="nav nav-pills">|</ul>
    25.   }
    26.   2 < .1
    27.   2 {
    28.  
    29.     IFSUB = 1
    30.     IFSUB.wrapItemAndSub = <li class="dropdown-submenu">|</li>
    31.     IFSUB.ATagParams = class="dropdown-toogle" data-toogle="dropdown"
    32.  
    34.     ACTIFSUB.wrapItemAndSub = <li class="dropdown-submenu active">|</li>
    35.     ACTIFSUB.ATagTitle.field = abstract // description // title
    36.  
    37.  
    38.     wrap = <ul class="dropdown-menu">|</ul>
    39.   }
    40.  
    41.   3 < .2
    42.   3 {
    43.  
    44.  
    45.     ACT = 1
    46.     ACT.wrapItemAndSub = <li class="active">|</li>
    47.     ACT.ATagTitle.field = abstract // description // title
    48.  
    49.  
    50.  
    51.   wrap = <ul class="dropdown-menu">|</ul>
    52.  
    53.   }
    54. }

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

    1. .dropdown-submenu{
    2. position:relative;
    3. }
    4. .dropdown-submenu > .dropdown-menu{
    5. top:0;
    6. left:100%;
    7. margin-top:-6px;
    8. margin-left:-1px;
    9. -webkit-border-radius:0 6px 6px 6px;
    10. -moz-border-radius:0 6px 6px 6px;
    11. border-radius:0 6px 6px 6px;
    12. }
    13. .dropdown-submenu:hover > .dropdown-menu{
    14. display:block;
    15. }
    16. .dropdown-submenu > a:after{
    17. display:block;
    18. content:" ";
    19. float:right;
    20. width:0;
    21. height:0;
    22. border-color:transparent;
    23. border-style:solid;
    24. border-width:5px 0 5px 5px;
    25. border-left-color:#cccccc;
    26. margin-top:5px;
    27. margin-right:-10px;
    28. }
    29. .dropdown-submenu:hover > a:after{
    30. border-left-color:#ffffff;
    31. }
    32. .dropdown-submenu .pull-left{
    33. float:none;
    34. }
    35. .dropdown-submenu.pull-left > .dropdown-menu{
    36. left:-100%;
    37. margin-left:10px;
    38. -webkit-border-radius:6px 0 6px 6px;
    39. -moz-border-radius:6px 0 6px 6px;
    40. border-radius:6px 0 6px 6px;
    41. }

    Als letztes muss nur noch der Hover:Effekt aktiviert werden! Also noch etwas für die CSS-Datei
    1. ul.nav > li.dropdown:hover > ul.dropdown-menu {
    2.     display: block;
    3.     margin-top:0px
    4. }

    Das wäre es erstmal! Vlt. hilft es ja :)

    - Manchmal kann man einfach nur noch besser werden! -

    Tags: Bootstrap , Menu , Dropdown , Multi-Level
  • 1
  • 0 x
    23 Beiträge
    0 Hilfreiche Beiträge
    12. 09. 2014, 14:00

    Super, danke. Hat mir echt geholfen!

  • 0 x
    26 Beiträge
    0 Hilfreiche Beiträge
    19. 09. 2014, 00:01

    Mir hat es auch super geholfen. Vor allem, da ich auch Bootstrap verwende ;).
    Danke!!!!!!

  • 100mark 100mark
    T3PO
    0 x
    17 Beiträge
    0 Hilfreiche Beiträge
    21. 12. 2015, 07:32

    Hallo,
    klappt soweit super. Aber das Dropdown funktioniert leider nicht.
    Hab das Typoscript eingebunden plus CSS.
    Schnallt er aber leider nicht.
    Woran kann das liegen?
    Gruß
    Dirk

  • runde8 runde8
    TYPO3-Anwärter
    0 x
    4 Beiträge
    2 Hilfreiche Beiträge
    06. 02. 2018, 22:33

    Könnte leider viele Möglichkeiten haben... sorry für die späte Antwort

    - Manchmal kann man einfach nur noch besser werden! -

  • 1
Präsentiert von