Suche
Teilen
startseite » forum

[Frage] Hover durch onclick für mobile ersetzten TYPO3-Version: -

  • 0 x
    11 Beiträge
    0 Hilfreiche Beiträge
    03. 03. 2016, 10:03

    Hallo an alle :-)

    Typo3 7.6.4
    Bootstrap

    ich habe folgendes Problem. Ich habe eine Menü mit Typoscript umgesetzt und eingebunden. Das funktioniert soweit auch ganz gut in der Desktopansicht. Schaue ich mir das Ganze nun in der Mobilen Ansicht an, so wird die Hover Funktion auf den Touchscreens ja nicht wirklich unterstützt. Daher möchte ich die Hoverfunktion für den Touchscreen durch klicken ersetzen und hier liegt meine Problem.
    Ich bin soweit, dass ich weiß, das es wohl nur mit Javascript geht. In Javascript bin ich allerdings eine Niete.

    Hier mein Menü:

    1. lib.navbar = COA
    2. lib.navbar {
    3.     10 = HMENU
    4.     10 {
    5.         1 = TMENU
    6.         1 {
    7.             wrap = <ul class="nav navbar-nav navbar-main">|</ul>
    8.             expAll = 1
    9.             NO = 1
    10.             NO {
    11.                 ATagTitle.field = abstract // description // title
    12.                 ATagBeforeWrap = 1
    13.                 #
    14.                 linkWrap = |
    15.                 # linkWrap = <mark class="bar"></mark>&nbsp |
    16.                 wrapItemAndSub = <li>|</li>
    17.                 wrapItemAndSub.override.cObject = COA
    18.                 wrapItemAndSub.override.cObject {
    19.             if {
    20.               value = 4
    21.               equals.field = doktype
    22.               isTrue = 1
    23.               isTrue.if {
    24.                 value.data = TSFE:page|uid
    25.                 equals.field = shortcut
    26.               }
    27.             }
    28.             10 = TEXT
    29.             10.value = <li class="active">|</li>
    30.                 }
    31.             }
    32.  
    33.             ACT < .NO
    34.             ACT.wrapItemAndSub = <li class="active">|</li>
    35.  
    36.             CUR < .ACT
    37.  
    38.             IFSUB < .NO
    40.                 doNotLinkIt = 1
    41.                 allWrap = <a href="#" class="dropdown-toggle" data-toggle="dropdown">|<b class="caret"></b></a>
    42.                 wrapItemAndSub = <li class="dropdown">|</li>
    43.       }
    44.  
    46.             ACTIFSUB.wrapItemAndSub = <li class="active dropdown">|</li>
    47.  
    49.       }
    50.  
    51.  
    52.  
    53.  
    54.       2 < .1
    55.       2 {
    56.         wrap =  <ul class="dropdown-menu">|</ul>
    57.         SPC = 1
    58.         SPC = wrapItemAndSub = <li class="divider"></li><li class="dropdown-header">|</li>
    59.  
    60.         ACT < .NO
    61.         ACT.wrapItemAndSub = <li class="active">|</li>
    62.  
    63.         CUR < .ACT
    64.         IFSUB < .NO
    66.           doNotLinkIt = 1
    67.           allWrap = <a href="#" class="dropdown-toggle" data-toggle="dropdown">|<b class="caret"></b></a>
    68.           wrapItemAndSub = <li class="dropdown">|</li>
    69.         }
    70.  
    72.         ACTIFSUB.wrapItemAndSub = <li class="active dropdown">|</li>
    73.  
    75.       }
    76.  
    77.       3 < .1
    78.       3 {
    79.         wrap = <ul class="dropdown-menu">|</ul>
    80.         # wrap =  <ul class="dropdown-submenu">|</ul>
    84.       }
    85.   }
    86. }

    Die CSS dazu:

    1. .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
    2.     background-color: #ff0000;
    3.     color: #fff;
    4.     outline-color: -moz-use-text-color;
    5.     outline-style: none;
    6.     outline-width: 0;
    7.     text-decoration-color: -moz-use-text-color;
    8.     text-decoration-line: none;
    9.     text-decoration-style: solid;
    10. }
    11. .dropdown-menu > li > a {
    12.     clear: both;
    13.     color: #333;
    14.     display: block;
    15.     font-weight: normal;
    16.     line-height: 1.42857;
    17.     padding-bottom: 3px;
    18.     padding-left: 10px;
    19.     padding-right: 20px;
    20.     padding-top: 3px;
    21.     white-space: nowrap;
    22. }
    23.  
    24. /* optional */
    25.  
    26. .open > .dropdown-menu .dropdown-menu {
    27.  
    28.     top:-1px;
    29.     left:50%;
    30. }
    31.  
    32. .dropdown-menu {
    33.    margin:0;
    34.    width:220px;
    35. }
    36.  
    37. /* must */
    38.  
    39. .open > .dropdown-menu li:hover .dropdown-menu {
    40.  
    41. display: block;
    42.  
    43. }

    Gibt es da einen Weg ohne Javascript? Und wenn mit Javascript, wie muss das aussehen?

    Gruß

    Tags: Bootstrap , Javascript
  • 1
  • 0 x
    11 Beiträge
    0 Hilfreiche Beiträge
    03. 03. 2016, 10:09

    Irgendwas ist beim posten schief gelaufen, vielleicht kann jemand die doppelten Post wieder löschen.

    Danke und Gruß

  • 1
Präsentiert von
Mittwald
Nützliche Links
TYPO3 Dokumentation
eStrategy
webworker Magazin