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 > Products > Menu > XML Structure

APNSoft Menu uses XML for defining Menu Structure since XML is the most convenient format for structured data. The XML Menu Structure consists of a number of elements (items). 

        <menu>
            <item title="Main Page" />
            <item title="About Us" />
            <item title="Products">
                <item title="APNSoft Menu" />
                <item title="APNSoft Include" />
            </item>
            <separator />
            <item title="Contacts" />
        </menu>


The code above creates the following menu (horizontal orientation):




You can save the XML definition structure as a file (Menu Structure File) and bind the menu by specifying the StructureFileURL property of the Menu component.

You can build up menu at runtime. APNSoft Menu provides an extremely rich and powerful server-side API allowing developer to add, remove or edit menu elements and element collections. You can programmatically control any menu item at runtime by using two classes MenuElement and MenuElementCollection.

You can also apply the XML Document with structure by using the DataSource property. If the menu loads structure from the database, you should set the DataSource property to specify a source of data and call the DataBind() method.

APNSoft Menu has support to use the Web.sitemap file as a standard menu structure.



Structure elements
  • menu - the root element for entire Menu Structure. Attributes are not included.

  • item - one menu item element. Each item element can include other item elements.

    Item node can include attributes:

    • id - is used in order to ensure uniqueness. If the id attribute is not specified, the component will automatically set it for each menu item (id="itm1", id="itm2", etc.) Item ids are used as prefixes for naming all of HTML and JavaScript parts. Using short ids will decrease the overall amount of rendered markup.
      Also the id attribute can be applied when the OnItemClick server side event is used.
      Note. Do not use special symbols like *, &, \, etc. in attribute values.
    • title - specifies the text (caption) displayed for the menu item. Title can include HTML formatting.
    • href, target - the URL and target the browser is directed to when a user clicks the item. Full analogue with the HTML attributes. The href attribute switches off the AutoPostBack property.
    • tooltip - specifies the tooltip text for the menu item. Can include HTML tags by using square brackets ("[" and "]"). See the live demo.
    • icon - specifies the name of the one item's icon image. The icon image displayed at the left side of the menu item. The icon images must be located in the Skin Folder as specified by the SkinFolder property.
    • iconOver - specifies the name of the icon for hovered item.
    • iconWidth, iconHeight - one item's icon image width and height. This attributes can be specified only once if the menu uses icons with identical width and height.
    • image - specifies the name of the picture, used as one menu item. This attribute is used instead of the title attribute. The image files must be located in the Skin Folder as specified by the SkinFolder property.
    • imageOver - specifies the name of the picture, used for hovered item.
    • imageWidth, imageHeight - one item's image width and height. This attributes can be specified only once if menu uses images with identical width and height.
    • selected - keeps the current item selected by default.
    • AutoPostBack - one item's attribute that allows to turn off the component property AutoPostBack only for specified menu item. Example: 

      <menu>
  <item id="1" title="Home" />
  <item id="2" title="About Us" AutoPostBack="false">
	<item id="3" title="Awards" />
	<item id="4" title="Certificates" />
	<item id="5" title="Financial Highlights" />
  </item>
</menu>

    Attributes for Precise Customization:

    • css_Item_MainTdd - user-defined CSS class for one item customization (Main menu, horizontal orientation).
    • css_Item_MainTrd, css_Item_MainTd - user-defined CSS classes for one item customization (Main menu, vertical orientation).
    • css_Item_SubTrd, css_Item_SubTd - user-defined CSS classes for one item customization (Submenus).
    • css_submenu_ParentSubTab, css_submenu_ParentSubTd, css_submenu_SubTab - user-defined CSS classes for submenu customization. Attributes are used for the item that is the parent item for the submenu to be customized.

  • separator - element for horizontal or vertical separator. Can include attributes:

    • id - is used in order to ensure uniqueness. If the id attribute is not specified, the component will automatically set it for each menu separator (id="spr1", id="spr2", etc.)
    • image - specifies the name of the picture, used for separator.
    • imageWidth, imageHeight - one separator's image width and height.

    Attribute for Precise Customization:

    • css_separator_Spr - user-defined CSS class for one separator customization.


Examples for menu items 

  <item id="1" title="Home"/>
  <item title="Home" href="?MD=Home"/>
  <item title="Google" href="http://www.google.com" target="_blank"/>
  <item title="JavaScript" href="javascript:ItemClick('$MenuID$','$ItemID$');" />
  <item title="Home" icon="Home.gif" iconWidth="16" iconHeight="16"/>
  <item title="Awards" icon="Awards.gif" iconOver="AwardsOver.gif"/>
  <item image="HOMEd.jpg" imageOver="HOMEe.jpg"/>
  <separator image= "SEPARATORv.jpg" imageWidth="2" imageHeight="32"/>


Attention! Element names and attributes are case-sensitive. Be careful when you're typing in your data.





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