APNSoft - Web Controls, components for ASP.NET Home Help Center Contact Us
About UsProductsDownloadsPurchase
Support

Menu
Version 3.5



What's New
Overview
Features
Reference Book
Licensing
Support



Populating with Data
Appearance
Layout
Behavior
Programming




APNSoft Menu consists of the following elements: items, separators, main menus, submenus. Each element can be customized by the set of CSS classes that are included in the CSS Style. By default, both CSS Styles (CSSStyleHorizontal.CSS and CSSStyleVertical.CSS) are located in the Skin Folder.

Below the table of relationships between menu elements and CSS Style classes:

Menu elements CSS Style classes
Main menu .ParentMainTab{...} /*Parent Table*/
.ParentMainTd{...} /*Parent Td*/
.MainTab{...} /*Table*/
Submenus .ParentSubTab{...} /*Parent Table*/
.ParentSubTd{...} /*Parent Td*/
.SubTab{...} /*Table*/
Items (Main menu, horizontal orientation) .MainTdd{...} /*Td UnHovered*/
.MainTde{...} /*Td Hovered*/
Items (Main menu, vertical orientation) .MainTrd{...} /*Tr UnHovered*/
.MainTre{...} /*Tr Hovered*/
.MainTd{...} /*Td*/

Classes for additional customization for TDs of the hovered item:

.MainTd_1{...} /*First TD (Item Icon)*/
.MainTd_2{...} /*Second TD (Item Title)*/
.MainTd_3{...} /*Third TD (Submenu arrow)*/

Used if the property
ItemOverCustomization = true
Items (Submenus) .SubTrd{...} /*Tr UnHovered*/
.SubTre{...} /*Tr Hovered*/
.SubTd{...} /*Td*/

Classes for additional customization for TDs of the hovered item:

.SubTd_1{...} /*First TD (Item Icon)*/
.SubTd_2{...} /*Second TD (Item Title)*/
.SubTd_3{...} /*Third TD (Submenu arrow)*/

Used if the property
ItemOverCustomization = true
Separators .Spr{...} /*Td*/
Tooltips .Ttip{...} /*Tooltip DIV*/


Please download ready-to-use CSS styles from the Live Demos -> Appearance -> Skins section.

Note. The CSS Style can include additional user-defined classes for Precise Customization.




Precise Customization

The CSS Style includes the set of standard classes. All of them use reserved names. Users can not change the class names. But it is possible to use additional CSS classes for any menu item, submenu or separator. All additional classes must be included in the CSS Style too.

To use external CSS classes you need to insert special attributes into the elements of your XML Structure.

  • Item customization (Main menu, horizontal orientation)

    XML Structure attributes:

    <item title="Item name"
    	css_Item_MainTdd="[Class name]d"
    />
    


    External CSS Classes:

    /*Main Menu Item Td UnHovered*/
    .[Class name]d
    {...}
    

    /*Main Menu Item Td Hovered*/
    .[Class name]e
    {...}
    


  • Item customization (Main menu, vertical orientation)

    XML Structure attributes:

    <item title="Item name"
    	css_Item_MainTrd="[Class name 1]d"
    	css_Item_MainTd="[Class name 2]"
    />
    


    External CSS Classes:

    /*Main Menu Item Tr UnHovered*/
    .[Class name 1]d
    {...}
    

    /*Main Menu Item Tr Hovered*/
    .[Class name 1]e
    {...}
    

    /*Main Menu Item Td*/
    .[Class name 2]
    {...}
    


  • Item customization (Submenu)

    XML Structure attributes:

    <item title="Item name"
    	css_Item_SubTrd="[Class name 1]d"
    	css_Item_SubTd="[Class name 2]"
    />
    


    External CSS Classes:
    /*SubMenu Item Tr UnHovered*/
    .[Class name 1]d
    {...}
    

    /*SubMenu Item Tr Hovered*/
    .[Class name 1]e
    {...}
    

    /*SubMenu Item Td*/
    .[Class name 2]
    {...}
    


  • Submenu customization

    To customize the submenu you need to insert special attributes into the menu item that is the parent item for the submenu to be customized.

    XML Structure attributes:

    <item title="Item name"
    	css_submenu_ParentSubTab="[Class name 1]"
    	css_submenu_ParentSubTd="[Class name 2]"
    	css_submenu_SubTab="[Class name 3]"
    />
    


    External CSS Classes:

    /*SubMenu Parent Table*/
    .[Class name 1]
    {...}
    

    /*SubMenu Parent Table Td*/
    .[Class name 2]
    {...}
    

    /*SubMenu Table*/
    .[Class name 3]
    {...}
    


  • Separator customization

    XML Structure attributes:

    <separator
    	css_separator_Spr="[Class name]"
    />
    


    External CSS Class:

    /*Separator Td*/
    .[Class name]
    {...}
    


Also see: Precise customization example





  © 2003-2008 APNSoft. All rights reserved. Table of Contents   Terms of use   Contact Us   Help Center