ASP.Net Menu Navigation

This time around we are going to look into the "Menu" control aspect of ASP.Net to create a navigation menu for a website. Posted below is a code snip-it of just a "Menu" control...

 <asp:Menu ID="NavigationMenu" runat="server" Orientation="Vertical" StaticDisplayLevels="2" MaximumDynamicDisplayLevels="2">  
     <LevelMenuItemStyles>  
         <asp:MenuItemStyle CssClass="menuLevel1"/>  
         <asp:MenuItemStyle CssClass="menuLevel2"/> 
         <asp:MenuItemStyle CssClass="menuLevel3"/>  
     </LevelMenuItemStyles>  
     <Items>  
         <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" />
         <asp:MenuItem NavigateUrl="~/Media.aspx" Text="Media"> 
             <asp:MenuItem NavigateUrl="~/Pictures.aspx" Text="Pictures">
                 <asp:MenuItem NavigateUrl="~/PicsNew.aspx" Text="New Pictures" />
                 <asp:MenuItem NavigateUrl="~/PicsOld.aspx" Text="Old Pictures" />
             </asp:MenuItem>
             <asp:MenuItem NavigateUrl="~/Videos.aspx" Text="Videos" />  
         </asp:MenuItem>  
         <asp:MenuItem NavigateUrl="~/About.aspx" Text="About" />  
     </Items>  
 </asp:Menu>  

Now lets take a walk, to start we will look at the first tag, the "asp:Menu" tag, this tag will have everything about your menu control between the start and end tags. There are some very important properties included in this tag, like the "Orientation", "StaticDisplayLevels", and the "MaximumDynamicDisplayLevels" properties, the rest should all be review. To start the "Orientation" property is used to set the menu as a "Vertical" or "Horizontal" menu, as the values imply it will either have the menu bar spread out side-to-side on the web page or down to the bottom of the web page. The next two, the "StaticDisplayLevels" and "MaximumDynamicDispalyLevels" are kinda related in that they can be used to setup if the menu will "pop" out when the cursor is hovered over a menu item that has multiple levels or be "Static" on the page, so you can just click on the menu item. I will get into more of how to take care of this later in the post, but first I will talk about how to format the menu items.

The "LevelMenuItemStyles" tag is used to set the "CSS" formating in the menu by how the levels of the menu are deep. This means you can have a different format for each level of the menu to allow for a fancier menu style. On a note you have to have an "asp:MenuItemStyle" tag for each level of your menu control, if you don't have the same amount of tags setting a style from a "CSS" the missing styles will just be plain, blue text with a transparent background.

Now to the bulk of the "Menu" control, the "Items" tag, this is where all the navigation items of a menu will go. For ever "asp:MenuItem" in between the "Items" start and end tag, you will get click-able link to another page. The two main properties of an "asp:MenuItem" are the "NavigateUrl" property, which tells the link what page to route too, and the "Text" property, that holds the display name of the link. Looking at the example above you can see that some of the tags have the ending "/" inside the tag its self, and the others don't, this is how you make a dynamic menu. By making a start and end tag of a "Menu Item" you can set how many levels deep the menu will go, based on how many times you have nested the "Menu Item".

More to Come, CA.