Different wrapping and css classes for different states of menu


/ Published in: TYPO3
Save to your folder(s)

Assign special CSS classes for menu item in different states.

By default just <li>|</li>-wrap without class.

Active state - li-wrap and class="active"

If active and one of subitems is selected then for parent item li-wrap and class="current" and for child - li-wrap and class="active"


Copy this code and paste it in your HTML
  1. # left side submenu
  2. lib.menu_sub = COA
  3. lib.menu_sub {
  4. wrap = <div class="sub_menu">|</div>
  5.  
  6. 10 = HMENU
  7. 10 {
  8. entryLevel = 1
  9.  
  10. 1 = TMENU
  11. 1 {
  12. wrap = <ul>|</ul>
  13.  
  14. NO {
  15. allWrap = <li>|</li>
  16. linkWrap = <span>|</span>
  17. ATagBeforeWrap = 1
  18. }
  19.  
  20. CUR = 1
  21. CUR {
  22. wrapItemAndSub = <li class="active">|</li>
  23. linkWrap = <span>|</span>
  24. ATagBeforeWrap = 1
  25. }
  26.  
  27. wrapItemAndSub = <li class="current">|</li>
  28. linkWrap = <span>|</span>
  29. ATagBeforeWrap = 1
  30. }
  31. }
  32.  
  33. 2 = TMENU
  34. 2 {
  35. wrap = <ul>|</ul>
  36.  
  37. NO {
  38. allWrap = <li>|</li>
  39. linkWrap = <span>|</span>
  40. ATagBeforeWrap = 1
  41. }
  42.  
  43. ACT < .NO
  44. ACT = 1
  45. ACT {
  46. allWrap = <li class="active">|</li>
  47. }
  48. }
  49.  
  50. 3 < .2
  51. }
  52. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.