[ASP.NET] Horizontal Drop down Menu

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:

Home Categories Contact Us
VBScript Visual Basic.NET ASP.NET

 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.

Hard-coded Menu

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
Home Home
Categories Categories
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
3         Case “Categories”
4             Dim m1 As New MenuItem
5             m1.Text = “VBScript”
6             m1.Value = “VBScript”
7             m1.NavigateUrl = “Articles/List.aspx?Type=Cat&Ref=VBS”
8  
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”
13  
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”
18  
19             Menu2.Items.Add(m1)
20             Menu2.Items.Add(m2)
21             Menu2.Items.Add(m3)
22     End Select
23 End Sub

 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.

Until then…

-L

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s