Suche
Teilen
startseite » forum

[Frage] Navigation für mobile Geräte optimieren TYPO3-Version: -

  • Sammy84 Sammy84
    T3PO
    0 x
    17 Beiträge
    0 Hilfreiche Beiträge
    27. 04. 2016, 12:42

    Hallo,

    ich versuche gerade meine, bereits vorhandene, Navigation für Tablets und Smartphones zu optimieren. Bisher ist meine Navi nur für den Desktop ausgelegt und da sie ja quasi fertig ist, wollte ich jetzt ungern irgendein Navigation-Plug in oder dergleichen installieren. Alles was CSS betrifft krieg ich auch hin. Mir ist nur nicht klar, wie ich Typo3 sagen kann, wann es die mobile Navi benutzen soll und wann die normale. Im css hab ich verschiedene Bildschirmgrößen angelegt, aber ich benötige ja auch noch eine onclick funktion, die vermutlich über Javascript erfolen muss. Nun habe ich ja in meinem bisherigen TS eine onmouseover funktion und brauche diese ja auch für die Desktopversion. Also denke ich, dass ich für das mobile Menü ein zweites anlegen muss!? Oder kann ich im bestehenden Code angeben, dass die onclick funktion nur für die mobilen geräte gelten soll?

    Wäre nett, wenn mir jemand helfen könnte. Mein Code sieht bisher so aus:

    1. ### Menü ###
    2. temp.menu = HMENU
    3. temp.menu {
    4.     ### Erste Ebene ###
    5.     1 = TMENU
    6.     1 {
    7.       wrap = <ul class="menu">|</ul>
    8.       expAll = 1
    9.       NO.wrapItemAndSub = <li onmouseover="show(this)" onmouseout="hide(this)">|</li>
    10.  
    11.       ACT < .NO
    12.       ACT = 1
    13.       ACT.ATagParams = id="active"
    14.     }
    15.  
    16.     ### Zweite, dritte und vierte Ebene (Kopieren von erster Ebene) ###
    17.     2 < .1
    18.     3 < .1
    19.     4 < .1
    20.     5 < .1
    21.     6 < .1
    22. }
    23.  
    24. lib.container < temp.menu

    Tags: Navigation , Menu
  • 1
  • Sammy84 Sammy84
    T3PO
    0 x
    17 Beiträge
    0 Hilfreiche Beiträge
    27. 04. 2016, 14:46

    Inzwischen habe ich, vermutlich eher unschön und umständlich, es hinbekommen, dass die jeweiligen Navigationen zum richtigen Zeitpunkt auftauchen. Also, wenn das browserfenster kleiner wird, erscheint das mobile Menü. Dafür habe ich das andere, welches nicht gebraucht wird, einfach per css ausgeblendet und im TS halt ein zweites Menü erstellt. Ist mit Sicherheit nicht die schönste Lösung, aber erstmal funktioniert es.

    Jetzt hab ich nur das Problem mit dem onclick. Wie auf den Bildern zu sehen, habe ich so ein hässliches icon erstellt, bei dem sich das mobile Menü aufklappen soll, wenn man darauf klickt. Ich weiß aber nicht, wie ich das umsetzen kann.

    [img]http://i66.tinypic.com/vqs75x.jpg[/img]

    [img]http://i66.tinypic.com/2lktu89.jpg[/img]

    1. page.jsInline.10 = TEXT
    2. page.jsInline.10.value(
    3.   $('document').ready(function(){
    4.     $( "ul.mobile_menu" ).hide();
    5.     $(this).find('a.active').parent().parent().show();
    6.     $( "a" "mobile_icon" ).click(function(){
    7.     if($(this).next( "ul.mobile_menu" ).length > 0)
    8.       {
    9.       $(this).next( "ul.mobile_menu" ).slideToggle();
    10.         return false;
    11.       }
    12.     });
    13. });
    14. )
    15.  
    16.  
    17.  
    18.  
    19. ### Menü für Mobile Geräte ###
    20. mobile_menu = HMENU
    21. mobile_menu {
    22.     ### Erste Ebene ###
    23.     1 = TMENU
    24.     1 {
    25.       wrap = <ul class="mobile_menu">|</ul>
    26.       expAll = 1
    27.      ### NO.wrapItemAndSub = <li onmouseover="show(this)" onmouseout="hide(this)">|</li> ###
    28.  
    29.       ACT < .NO
    30.       ACT = 1
    31.       ACT.ATagParams = id="active"
    32.     }
    33.  
    34.     ### Zweite, dritte und vierte Ebene (Kopieren von erster Ebene) ###
    35.     2 < .1
    36.     3 < .1
    37.     4 < .1
    38. 	5 < .1
    39. 	6 < .1
    40. }
    41.  
    42. lib.smart < mobile_menu

    EDIT: Irgendwie wird das zweite Bild weder im Post noch als Anhang dargestellt.

  • Sammy84 Sammy84
    T3PO
    0 x
    17 Beiträge
    0 Hilfreiche Beiträge
    27. 04. 2016, 14:50

    Hier die mobile Ansicht

    [img]http://i66.tinypic.com/2lktu89.jpg[/img]

  • Sammy84 Sammy84
    T3PO
    0 x
    17 Beiträge
    0 Hilfreiche Beiträge
    06. 07. 2016, 09:44

    Inzwischen habe ich es mit viel rumprobieren und recherchieren zwar hinbekommen, dass sich die Navigation einklappt, sobald man das Browserfenster auf die mobile Größe verkleinert, aber dafür klappen sich die Unterebenen nicht bim onclick aus. Sprich, die erste Ebene klappt sich per Klick aus, aber alles danach nicht mehr. Desweiteren funktioniert auch meine Desktopversion nicht mehr korrekt. Auch dort klappen sich überhaupt keine Unterebenen beim Hover aus. In meiner ursprünglichen css Version funktioniert die Desktopversion, aber sobald ich den css teil für die mobile version mit rein packe, funktioniert es nicht mehr. Ich nehme deshalb an, dass meine css irgendwie daneben ist. Eigentlich habe ich mit css sonst keine großen Schwierigkeiten, aber diesmal komm ich einfach nicht weiter. Da ich jedoch noch ein Typo 3 Anfänger bin, ist es auch möglich, dass in meinem TS irgendwas falsch ist. Ich habe schon zig Dinge ausprobiert. Z.B. ob die Reihenfolge des Einbindens der Dateien eine Rolle spielt usw. ich komme einfach nicht zum richtigen Ergebnis. Es wäre echt total nett, wenn mir jemand helfen könnte.

    Hier mal meine derzeitigen Codes:

    libs.ts

    1. ### Menü ###
    2. temp.menu = HMENU
    3. temp.menu {
    4. entryLevel = 0
    5. 1 = TMENU
    6. 1 {
    7. wrap = <ul class="nav-collapse">|</ul>
    8. expAll = 1
    9.  
    10. NO = 1
    12. wrapItemAndSub = <li onmouseover="show(this)" onmouseout="hide(this)">|</li>
    13.  
    14. }
    15.  
    16. ACT = 1
    18. wrapItemAndSub = <li id="active">|</li>
    19.  
    20. }
    21.  
    22. }
    23.  
    24.     2 < .1
    25.     3 < .1
    26.     4 < .1
    27. 	5 < .1
    28. 	6 < .1
    29.  
    30. }
    31.  
    32. lib.container < temp.menu

    page.ts

    1. page = PAGE
    2. #page.config.metaCharset = utf-8
    3. page.meta.viewport = width=device-width, initial-scale=1
    4.  
    5. ###page.headerData.120 = TEXT
    6. page.headerData.120.value (
    7. <script type="text/javascript">
    8.     //<![CDATA[
    9.      function show(element){
    10.            element.className += "hover";
    11.            }
    12.  
    13.    function hide(element){
    14.            element.className = element.className = "";
    15.      }
    16.     //]]>
    17. </script>
    18. )###
    19.  
    20.  
    21. page {
    22. 	config {
    23. 		metaCharset = utf-8
    24. 		doctype = html5
    25. !!=:/=
    26. 	}
    27. 	includeCSS.custom = EXT:wsg_distribution/Resources/Public/css/custom.css 
    28.   ###includeCSS.nav = EXT:wsg_distribution/Resources/Public/Css/Nav.css###
    29. 	includeCSS.powermailbasic = EXT:wsg_distribution/Resources/Public/Css/Form.css
    30. 	includeCSS.responsive-nav = EXT:wsg_distribution/Resources/Public/Css/responsive-nav.css
    31.  
    32.  
    33.  
    34. 	includeJS.File1 = EXT:wsg_distribution/Resources/Public/JavaScript/responsive-nav.min.js
    35. includeJS.File2 = EXT:wsg_distribution/Resources/Public/JavaScript/responsive-nav.js

    template content

    1. <div class="Nav">
    2.     		<div class="contentNav">
    3.         		<a href="http://www.woltemath-shop.de/" target="_blank"><div class="shop"></div></a>
    4.         		 <f:cObject typoscriptObjectPath="lib.container" /> 
    5.         	</div>
    6.        </div>

    template footer

    1. ´</div><!-- /.container -->
    3.         var nav = responsiveNav(".nav-collapse");
    4.     </script>
    5. </f:section>

    css

    1. .Nav {
    2. 	width:100%; 
    3. 	height:3.0em; 
    4. 	background-color: #008fc4;
    5. 	z-index:9999;
    6. }
    7.  
    8. .contentNav {
    9. 	min-width:380px;
    10. 	max-width:1250px;
    11. 	position:relative;
    12. 	left:50%;
    13. 	margin-left:-50%;
    14. 	height:2.85em;
    15. 	padding:0em 0em 0 0em;
    16. }
    17.  
    18. ul.nav-collapse, ul.nav-collapse ul {
    19.     list-style-type: none;
    20. }
    21.  
    22. ul.nav-collapse li {
    23. 	display:block;
    24. 	z-index:9999;
    25. 	width:auto;
    26. 	height:auto;
    27. 	font-size:1.2em;
    28. 	line-height:2.5em;
    29.     float: none;
    30. 	text-shadow: 1px 1px 1px rgba(35, 31, 32, 0.4);
    31. }
    32.  
    33. ul.nav-collapse a {
    34.     display: block;
    35.     font-weight:normal;
    36. 	text-decoration:none;
    37. 	color: #fbfbfb;
    38. 	height:1.9em;
    39. 	padding:0 1.2em 0.6em 1.1em;
    40. }
    41.  
    42. ul.nav-collapse a:hover {background-color: #009ed9;}
    43.  
    44. ul.nav-collapse #active {background-color: #009ed9;} 
    45.  
    46. /* Für Unterpunkte keine Float-Eigenschaft */
    47. ul.nav-collapse li {
    48.     float:none;
    49. 	width:100%;
    50. 	height: auto;
    51. 	font-size:0.9em;
    52. 	z-index:9999;
    53. 	background-color: #008fc4;
    54. }
    55.  
    56. /* Links auf Unterpunkten sollen die Hintergrundfarbe ändern */
    57. ul.nav-collapse li.hover, ul.nav-collapse li:hover {
    58.     background-color: #009ed9;
    59. }
    60.  
    61. /* Zweite Ebene */
    62. ul.nav-collapse ul {
    63.    font-size:0.9em;
    64.    background-color: #008fc4;
    65.    display: block;
    66.  
    67.   width: 100%;
    68.  
    69. }
    70.  
    71. /* Zweite Ebene anzeigen */
    72. ul.nav-collapse li.hover ul, ul.nav-collapse li:hover ul  {
    73.    display: block;
    74. }
    75.  
    76. /* Dritte Ebene */
    77. ul.nav-collapse li.hover ul ul, ul.nav-collapse li:hover ul ul {
    78.    display: none;
    79.    font-size:1.18em;
    80.    z-index:9997;
    81. }
    82.  
    83. /* Dritte Ebene anzeigen */
    84. ul.nav-collapse li.hover ul li.hover ul, ul.nav-collapse li:hover ul li:hover ul {
    85.    display: block;
    86.    width:12em;
    87. }
    88.  
    89. /* Vierte Ebene */
    90. ul.nav-collapse li.hover ul li.hover ul ul, ul.nav-collapse li:hover ul li:hover ul ul {
    91.    display: none;
    92.    font-size:1.18em;
    93.    z-index:9996;
    94. }
    95.  
    96. /* Vierte Ebene anzeigen */
    97. ul.nav-collapse li.hover ul li.hover ul li.hover ul , ul.nav-collapse li:hover ul li:hover ul li:hover ul {
    98.    display: block;
    99.    width:12em;
    100. }
    101.  
    102. .js .nav-collapse {
    103.   clip: rect(0 0 0 0);
    104.   max-height: 0;
    105.   position: absolute;
    106.   display: block;
    107.   overflow: hidden;
    108.   zoom: 1;
    109. }
    110.  
    111. .nav-collapse.opened {
    112.   max-height: 9999px;
    113. }
    114.  
    115. .nav-toggle {
    116.   -webkit-tap-highlight-color: rgba(0,0,0,0);
    117.   -webkit-touch-callout: none;
    118.   -webkit-user-select: none;
    119.   -moz-user-select: none;
    120.   -ms-user-select: none;
    121.   -o-user-select: none;
    122.   user-select: none;
    123. }
    124.  
    125. @media screen and (min-width: 1024px) {
    126. ul.nav-collapse, ul.nav-collapse ul {
    127.     list-style-type: none;
    128. }
    129.  
    130. /* Für Unterpunkte keine Float-Eigenschaft */
    131. ul.nav-collapse li {
    132. 	display:block;
    133.     float:left;
    134. 	height: auto;
    135. 	width:auto;
    136. 	font-size:1.2em;
    137. 	line-height:2.5em;
    138. 	text-shadow: 1px 1px 1px rgba(35, 31, 32, 0.4);
    139. }
    140.  
    141. ul.nav-collapse a {
    142.     display: block;
    143.     font-weight:normal;
    144. 	text-decoration:none;
    145. 	color: #fbfbfb;
    146. 	height:1.9em;
    147. 	padding:0 1.2em 0.6em 1.1em;
    148. }
    149.  
    150. ul.nav-collapse li a:hover {background-color: #009ed9;}
    151.  
    152. ul.nav-collapse li #active {background-color: #009ed9;} 
    153.  
    154. /* Links auf Unterpunkten sollen die Hintergrundfarbe ändern */
    155. ul.nav-collapse ul li.hover, ul.nav-collapse ul li:hover {
    156.    background-color: #009ed9;
    157. }
    158.  
    159. /* Zweite Ebene */
    160. ul.nav-collapse ul {
    161.    font-size:0.9em;
    162.    background-color: #008fc4;
    163.    display: none;
    164.    z-index:9998;
    165. }
    166.  
    167. /* Zweite Ebene anzeigen */
    168. ul.nav-collapse li.hover ul, ul.nav-collapse li:hover ul  {
    169.    display: block;
    170. }
    171.  
    172. /* Dritte Ebene */
    173. ul.nav-collapse li.hover ul ul, ul.nav-collapse li:hover ul ul {
    174.    display: none;
    175.    font-size:1.18em;
    176.    z-index:9997;
    177. }
    178.  
    179. /* Dritte Ebene anzeigen */
    180. ul.nav-collapse li.hover ul li.hover ul, ul.nav-collapse li:hover ul li:hover ul {
    181.    display: block;
    182.    width:12em;
    183. }
    184.  
    185. /* Vierte Ebene */
    186. ul.nav-collapse li.hover ul li.hover ul ul, ul.nav-collapse li:hover ul li:hover ul ul {
    187.    display: none;
    188.    font-size:1.18em;
    189.    z-index:9996;
    190. }
    191.  
    192. /* Vierte Ebene anzeigen */
    193. ul.nav-collapse li.hover ul li.hover ul li.hover ul , ul.nav-collapse li:hover ul li:hover ul li:hover ul {
    194.    display: block;
    195.    width:12em;
    196. }
    197.  
    198. .js .nav-collapse {
    199.     position: relative;
    200. }
    201.  
    202. .js .nav-collapse.closed {
    203.     max-height: none;
    204. }
    205.  
    206. .nav-toggle {
    207.    display: none;
    208. }
    209.  
    210. }

    Ich hab noch Bilder vom aktuellen Stand angehangen. Auf dem letzten sieht man in der mobilen Version, dass sich die erste Ebene (wird im Moment noch vom Banner überdeckt) ausklappt und auf den anderen beiden Bildern ist die Desktopversion zu sehen, dort rücken die Menüpunkte beim hovern plötzlich zusammen oO nehme ich die letzten drei Klassen, also ab .js .nav-collapse, aus der css raus, dann funktioniert meine Desktopversion wieder, aber dann klappt sich auf der mobilen Version eben nichts ein. Ich komm so absolut nicht weiter :( hat nicht irgendjemand eine Idee oder einen Tipp für mich? Alles andere funktioniert einwandfrei auf der Website,es hängt nur an dieser doofen Navi -.-

  • Sammy84 Sammy84
    T3PO
    0 x
    17 Beiträge
    0 Hilfreiche Beiträge
    06. 07. 2016, 09:51

    Irgendwie versteh ich das mit den Anhängen hier nicht oder funktioniert das gar nich?

    [IMG]http://i65.tinypic.com/257eft0.jpg[/IMG]

    [IMG]http://i64.tinypic.com/2q056c4.jpg[/IMG]

  • Sammy84 Sammy84
    T3PO
    0 x
    17 Beiträge
    0 Hilfreiche Beiträge
    06. 07. 2016, 09:54

    Mehrere Images gehen auch nicht oder?

    [IMG]http://i64.tinypic.com/2q056c4.jpg[/IMG]

  • Sammy84 Sammy84
    T3PO
    0 x
    17 Beiträge
    0 Hilfreiche Beiträge
    06. 07. 2016, 09:55

    Hier die mobile Version

    [IMG]http://i68.tinypic.com/2hi9pph.jpg[/IMG]

  • Sammy84 Sammy84
    T3PO
    0 x
    17 Beiträge
    0 Hilfreiche Beiträge
    12. 07. 2016, 13:05

    So, nach vielem herum ärgern, funktioniert die Navi weitestgehend, das einzige, was jetzt immer noch nicht funktioniert ist das ausklappen beim hovern (in der desktop ansicht) und das ausklappen der zweiten, dritten und vierten Ebene in der mobilen Ansicht. Ich nehme an, dass es am css liegt, wäre echt nett, wenn mir da vielleicht doch noch jemand auf die Sprünge helfen könnte.

    Mein CSS sieht derzeit so aus:

    1. /*! responsive-nav.js 1.0.39 by @viljamis */
    2.  
    3.  
    4. .Nav {
    5. 	font-size:1.2em;
    6. 	line-height:2.5em;
    7. 	background-color: #008fc4;
    8. }
    9.  
    10. ul.nav-collapse, ul.nav-collapse ul  {
    11.   margin: 0;
    12.   padding: 0;
    13.   width: 100%;
    14.   display: block;
    15.   list-style: none;
    16. }
    17.  
    18. ul.nav-collapse li {
    19.   width: 100%;
    20.   display: block;
    21.   float: none;
    22.  
    23. }
    24.  
    25.  
    26. ul.nav-collapse a {
    27. 	display:block;
    28. 	height:1.9em;
    29. 	padding:0 1.2em 0.6em 1.1em;
    30. 	text-decoration:none;
    31. 	color: #fbfbfb;
    32. }
    33.  
    34. ul.nav-collapse li a:hover {background-color: #009ed9; 	}
    35.  
    36. ul.nav-collapse li #active {background-color: #009ed9; 	} 
    37.  
    38.  
    39. /* Für Unterpunkte keine Float-Eigenschaft */
    40. ul.nav-collapse ul li {
    41.   width: 100%;
    42.   display: block;
    43.   float: none;
    44. }
    45.  
    46. /* Links auf Unterpunkten sollen die Hintergrundfarbe ändern */
    47. ul.nav-collapse ul li.hover, ul.nav-collapse ul li:hover {
    48.     background-color: #009ed9;
    49. }
    50.  
    51.  
    52. /* Zweite Ebene */
    53. ul.nav-collapse ul {
    54.    display: none;
    55.    background-color: #008fc4;
    56.  
    57. }
    58.  
    59. /* Zweite Ebene anzeigen */
    60. ul.nav-collapse li.hover ul, ul.nav-collapse li:hover ul  {
    61.    display: block;
    62. }
    63.  
    64. /* Dritte Ebene */
    65. ul.nav-collapse li.hover ul ul, ul.nav-collapse li:hover ul ul {
    66.    display: none;
    67.    margin: -2.56em 0 0 11em;
    68.    height:auto;
    69.    width:12.8em;
    70.    padding-top:0.05em;
    71.  
    72. }
    73.  
    74. /* Dritte Ebene anzeigen */
    75. ul.nav-collapse li.hover ul li.hover ul, ul.nav-collapse li:hover ul li:hover ul {
    76.    display: block;
    77. }
    78.  
    79. /* Vierte Ebene */
    80. ul.nav-collapse li.hover ul li.hover ul ul, ul.nav-collapse li:hover ul li:hover ul ul {
    81.    display: none;
    82.    margin-left:12.8em;
    83.    width:12.8em;
    84. }
    85.  
    86. /* Vierte Ebene anzeigen */
    87. ul.nav-collapse li.hover ul li.hover ul li.hover ul , ul.nav-collapse li:hover ul li:hover ul li:hover ul {
    88.    display: block;
    89. }
    90.  
    91.  
    92. .js .nav-collapse {
    93.   clip: rect(0 0 0 0);
    94.   max-height: 0;
    95.   position: absolute;
    96.   display: block;
    97.   overflow: hidden;
    98.   zoom: 1;
    99. }
    100.  
    101. .nav-collapse.opened {
    102.   max-height: 9999px;
    103. }
    104.  
    105. .nav-toggle {
    106.   -webkit-tap-highlight-color: rgba(0,0,0,0);
    107.   -webkit-touch-callout: none;
    108.   -webkit-user-select: none;
    109.   -moz-user-select: none;
    110.   -ms-user-select: none;
    111.   -o-user-select: none;
    112.   user-select: none;
    113. }
    114.  
    115. @media screen and (min-width: 1024px) {
    116.   .js .nav-collapse {
    117.     position: absolute;
    118.   }
    119.   .js .nav-collapse.closed {
    120.     max-height: none;
    121.   }
    122.   .nav-toggle {
    123.     display: none;
    124.   }	
    125.  
    126. .Nav {
    127. 	width:100%; 
    128. 	height:2.5em;
    129. 	font-size:1.2em;
    130. 	line-height:2.5em;
    131. 	background-color: #008fc4;
    132. }
    133.  
    134. .contentNav {
    135. 	width:100%;
    136. }
    137.  
    138. ul.nav-collapse, ul.nav-collapse ul  {
    139. 	list-style-type: none;
    140. 	height:auto;
    141. 	position:absolute;
    142. 	z-index:9999;
    143. }
    144.  
    145. ul.nav-collapse li {
    146. 	display:block;
    147. 	width:auto;
    148. 	height:auto;
    149.     float: left;
    150. 	text-shadow: 1px 1px 1px rgba(35, 31, 32, 0.4);
    151. }
    152.  
    153. ul.nav-collapse a {
    154. 	display:block;
    155. 	height:1.9em;
    156. 	padding:0 1.2em 0.6em 1.1em;
    157. 	text-decoration:none;
    158. 	color: #fbfbfb;
    159. }
    160.  
    161. ul.nav-collapse li a:hover {background-color: #009ed9; 	}
    162.  
    163. ul.nav-collapse li #active {background-color: #009ed9; 	} 
    164.  
    165.  
    166. /* Für Unterpunkte keine Float-Eigenschaft */
    167. ul.nav-collapse ul li {
    168.     float:none;
    169. 	height:auto;
    170. }
    171.  
    172. /* Links auf Unterpunkten sollen die Hintergrundfarbe ändern */
    173. ul.nav-collapse ul li.hover, ul.nav-collapse ul li:hover {
    174.     background-color: #009ed9;
    175. }
    176.  
    177.  
    178. /* Zweite Ebene */
    179. ul.nav-collapse ul {
    180.    display: none;
    181.    background-color: #008fc4;
    182.  
    183. }
    184.  
    185. /* Zweite Ebene anzeigen */
    186. ul.nav-collapse li.hover ul, ul.nav-collapse li:hover ul  {
    187.    display: block;
    188. }
    189.  
    190. /* Dritte Ebene */
    191. ul.nav-collapse li.hover ul ul, ul.nav-collapse li:hover ul ul {
    192.    display: none;
    193.    margin: -2.56em 0 0 11em;
    194.    height:auto;
    195.    width:12.8em;
    196.    padding-top:0.05em;
    197.  
    198. }
    199.  
    200. /* Dritte Ebene anzeigen */
    201. ul.nav-collapse li.hover ul li.hover ul, ul.nav-collapse li:hover ul li:hover ul {
    202.    display: block;
    203. }
    204.  
    205. /* Vierte Ebene */
    206. ul.nav-collapse li.hover ul li.hover ul ul, ul.nav-collapse li:hover ul li:hover ul ul {
    207.    display: none;
    208.    margin-left:12.8em;
    209.    width:12.8em;
    210. }
    211.  
    212. /* Vierte Ebene anzeigen */
    213. ul.nav-collapse li.hover ul li.hover ul li.hover ul , ul.nav-collapse li:hover ul li:hover ul li:hover ul {
    214.    display: block;
    215. }
    216.  
    217.  
    218.  
    219. }

  • Sammy84 Sammy84
    T3PO
    0 x
    17 Beiträge
    0 Hilfreiche Beiträge
    12. 07. 2016, 13:09

    [IMG]http://i63.tinypic.com/2uzfev6.jpg[/IMG]

  • Sammy84 Sammy84
    T3PO
    0 x
    17 Beiträge
    0 Hilfreiche Beiträge
    12. 07. 2016, 13:10

    [IMG]http://i68.tinypic.com/332179z.jpg[/IMG]

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