The following is a step-by-step example about customizing TopMenu component the way Axinom suggests it - by developing sub controls. More detailed information is available here.
Adding a navigation items into the first dropdown
1) Open your template project (preferably with Visual Studio).
2) Open the file TopMenu\AxTopMenuCustom.ascx at your template project.
3) Locate the <ButtonTemplate> inside the AxMenuContainer control.
4) Change the text between <ButtonTemplate>-tags to something more appropriate (that’s the name of the dropdown displayed on the button bar).
5) Create a new web user control (.ascx file) and give it some appropriate name (that control will represent the contents of the dropdown). Make sure your control is derived (directly or indirectly) from System.Web.UI.UserControl class.
6) Create a table inside the .ascx file (you may copy the following example):
<table
class="menutable"
cellpadding="0"
cellspacing="0"
width="100%"
height="100%">
<tr>
<td height="100%" valign="top">
<!-- Hyperlinks here ... -->
</td>
</tr>
</table>
7) Add asp:HyperLink controls to the place specified by the comment inside the table.
NB! Make sure you set Target-attribute (preferably "_top" or "_blank")!
<!-- Hyperlinks here ... -->
<asp:HyperLink
id="_hyperlinkHome"
runat="server"
Text="Some text to the navigation item"
Target="_top"
CssClass="options" />
You may also use Repeater or some other control for it (if you want to fill the navigation item list dynamically at codebehind of the .ascx control).
8) Go back to the file TopMenu\AxTopMenuCustom.ascx.
9) Register the control you just created by adding appropriate <%@ Register ...%> tag on top of the file.
10) Locate the <MenuTemplate> inside AxMenuContainer control.
11) Delete the control <AxContainer:TopMenuContainer_Home runat="server" /> and add your new control instead of it.
12) Set the Height-attribute of the AxMenuContainer-control. Each navigation item in the dropdown container needs 21 pixels of height by default. That means the right height of the container is 21 * [the number of navigation items].
If you decided to fill the contents of your sub control dynamically at codebehind, you have to access that attribute by this.Parent.Height property in the codebehind file of your control.
13) Compile your project. Copy the assembly file to the bin-folder of the AxCMS.net solution.
14) Log in to the AxCMS.net and enjoy...
Adding a new dropdown to the TopMenu
It is also possible to add extra dropdowns to the TopMenu. Do the following, if that's your plan:
15) Go to the file TopMenu\AxTopMenuCustom.ascx.
16) Add a new AxMenuContainer control into the file mentioned (just below the first one).
17) Set Top, Left and Width attributes. It is necessary to know that a position of a dropdown container is absolute. You have to make sure your containers don’t overlap each other.
18) Go through steps 3 … 14.