lib.customMenu = HMENU
lib.customMenu {
 1 = TMENU
 1  {
        wrap = |

        NO.allWrap = |
        NO.stdWrap.htmlSpecialChars = 1
        NO.after.cObject = COA
        NO.after.cObject {
            20 = CASE
            20 {
               key.field = uid
               default = RECORDS
               default.tables = tt_content
               default.conf.tt_content < tt_content
               default.conf.tt_content.stdWrap.innerWrap >               

               14 < .default
               14.source = {$submenu_element_14}

               15 < .default
               15.source = {$submenu_element_15}

               16 < .default
               16.source = {$submenu_element_16}

               17 < .default
               17.source = {$submenu_element_17}

            }            

        }
        ACT = 1
        ACT.after.cObject < .NO.after.cObject
        ACT.allWrap = |
        ACT.ATagParams = class="act"
        ACT.stdWrap.htmlSpecialChars = 1

        CUR < .ACT
        CUR.ATagParams = class="cur"
    }
}

This code cannot be used as it is, you will need to make sure the DHTML/JavaScript code for the sub menu items are configured accordingly.

Further References:

1. [TYPO3-english] conditional menu based on menu page-id
   http://lists.typo3.org/pipermail/typo3-english/2009-November/065557.html
2. [TYPO3-english] Custom class in tmenu according to uid page
   http://lists.typo3.org/pipermail/typo3-english/2010-February/067336.html

Consider you have selected a specific Templavoila Template and you wish to have a different type of menu based on the selected template.
In such case it would be easy to change menu styles if the entire menu is enclosed in a separate CSS class.

I have given an example where I am checking for template IDs 10 , 11. If this template is used for current page I am changing it’s class.

lib.mymenu = HMENU
lib.mymenu {
entryLevel = 1
stdWrap.ifEmpty.wrap =  

1 = TMENU
1 {
wrap = <ul>|</ul>
NO.wrapItemAndSub = |</li>
NO.allWrap = <li>|
NO.allWrap {
override = <li class=”alternate_menu”>|
override.if.value = 10,11
override.if.isInList.field = tx_templavoila_to
}
# same way we can configure ACT and CUR as well
ACT = 1
CUR = 1

}

# For second level I would like to change the class of the A Tag
2 < .1
2.wrap = <ul>|</ul>
2.CUR.ATagParams = id=”cur_menu”
2.ACT.ATagParams.cObject = TEXT
2.ACT.ATagParams.cObject {
override = class=”cur_menu_a”
override.if.value = 10,11
override.if.isInList.field = tx_templavoila_to
}
3 < .2

#let us generate the 3rd level only if the page uses the Template of our choice.
3.if {
value = 10,11
isInList.field = tx_templavoila_to
}

}

Not all templates may have a template ID specified, in such case we need to use the sliding feature.
When we use the sliding feature the template id of parent ID is used.
We can do this Like:

isInList.data = levelfield:-1, tx_templavoila_to, slide

Note:
Usually Templates are stored in the Storage Folder, and you can view the Template IDs of Templavoila Template Objects from the list view!

spaImageMenu = COA

spaImageMenu {
   1 >
   1 = GMENU
   1.NO {
      altImgResource.import = uploads/pics/
      altImgResource.import.field = media
      altImgResource.import.listNum = 0

      XY = 110,57
      backColor = white
      10 = TEXT
      10.text.field = nav_title // title
      10.offset = 20,30
      allWrap = |*|<tr><td>|</td>||<td>|</td>||<td>|</td></tr>|*|

    }

    wrap = <table width="100%" border="0" cellpadding="0" cellspacing="0" class="mymenu_class">|</table>
}