Advanced Search

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"

Expand | Embed | Plain Text

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.       ACTIFSUB = 1
  28.       ACTIFSUB {
  29.         wrapItemAndSub = <li class="current">|</li>
  30.         linkWrap = <span>|</span>
  31.         ATagBeforeWrap = 1
  32.       }
  33.     }
  34.  
  35.     2 = TMENU
  36.     2 {
  37.       wrap = <ul>|</ul>
  38.  
  39.       NO {
  40.         allWrap = <li>|</li>
  41.         linkWrap = <span>|</span>
  42.         ATagBeforeWrap = 1
  43.       }
  44.  
  45.       ACT < .NO
  46.       ACT = 1
  47.       ACT {
  48.         allWrap = <li class="active">|</li>
  49.       }
  50.     }
  51.  
  52.     3 < .2
  53.   }
  54. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.