I really like multi-level menus; they save space, but still allow you to put the same amount of content on your page.
ASP.NET is the only technology I know of that comes with its own menu that supports multiple menus, and it also allows you to change the menu’s orientation (Horizontal or Vertical). It’s great!
Sadly though, it does have one drawback, all “pop out” menus are fixed vertically, and there’s no way (that I’ve found) to change that. You just can’t get a menu/submenu pair that looks like this:
This type of menu cannot be designed with a standard ASP.NET menu control. So, here’s my workaround to get the same effect.
I’m keeping this simple, we’re not going to go into making it look pretty or anything, just the cold hard functionality of it; you can play with colors and design later.
For now, we won’t be using a sitemap, I’ll go into that soon as it requires modification of the web.config file and it’s quite a bit to go into.
First, create 2 menu controls on your page (Default names Menu1, and Menu2); set the orientation for both of them to Horizontal.
Next, populate the first menu (be sure to leave menu2 blank):
|MenuItem Text||MenuItem Value|
|Contact Us||Contact Us|
Add the following to your code file:
|1||Protected Sub Menu1_MenuItemClick(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.MenuEventArgs) Handles Menu1.MenuItemClick|
|2||Select Case e.Item.Value ‘ You could also use e.Item.Name|
|4||Dim m1 As New MenuItem|
|5||m1.Text = “VBScript”|
|6||m1.Value = “VBScript”|
|7||m1.NavigateUrl = “Articles/List.aspx?Type=Cat&Ref=VBS”|
|9||Dim m2 As New MenuItem|
|10||m2.Text = “Visual Basic.NET”|
|11||m2.Value = “Visual Basic.NET”|
|12||m2.NavigateUrl = “Articles/List.aspx?Type=Cat&Ref=VBnet”|
|14||Dim m3 As New MenuItem|
|15||m3.Text = “ASP.NET”|
|16||m3.Value = “ASP.NET”|
|17||m3.NavigateUrl = “Articles/List.aspx?Type=Cat&Ref=ASPnet”|
Basically, we’re populating a static menu on the fly. Because the page loads while the menu is empty, it doesn’t start off visible. This changes when we add items, so we don’t even need to tell VB to hide the menu on page load.
It’s not an elegant solution by any stretch of the imagination, but it works. My next post will show you how to do the same thing by using sitemaps.