ASP.NET VERSIONS: 1.0 | 1.1
Extend the Context Menu
In this second part of "Create a Context-Sensitive Menu," build a more full-featured menu for your Web apps.
By Brad McCabe
In the last installment of this column (see Create a Context-Sensitive Menu), we looked at creating a context menu in Internet Explorer to make applications look and feel more like a Windows Forms application. Now we're going to extend this menu to make it a more full-featured menu, like the one shown in Figure 1.
Figure 1. To give your users a rich UI experience, add icons, color, and mouseover effects to your context-sensitive menus.
The first thing we need to do is add a unique ID to each of the rows of the menu. We can do this by adding an ID attribute to each of the TD tags of the menu.
After each of the menu items has been uniquely identified, we can add some mouseover effects to the items, to make the menu more interactive and provide visual feedback to the end-user. To do this, we use the mouseover and mouseout events, as well as modify the background color of the cell.
document.all.Row1.style.border=\'1pt solid #737B92\';"
document.all.Row1.style.border=\'1pt solid #CCCCCC\';"
After adding the ID attributes and the mouseover and mouse event events to the code from last time the rendering lines should look similar to the following code snippet:
document.all.Row1.style.border=\'1pt solid #737B92\';"" ONMOUSEOUT=""document.all.Row1.style.background=\'#CCCCCC\';
document.all.Row1.style.border=\'1pt solid #CCCCCC\';"">
Now we have added a bit of life to our menu and have given the users feedback as they mouse over various items.
The next thing to do to make this more like a Windows menu is add some images to the items. Since the items are inside of a standard HTML TD tag, we can add any HTML elements that we would like. In this case we will add some basic image tags to the menu. You could, however, get more advanced here and add another TD tag and change its back color to more closely resemble the Windows XP look and feel.
There you have it: With a few simple lines of code that utilize some of the various concepts that we have examined in the past you now have the basis for a fully functional context menu on the Web. You can easily build off this core design and modify the menu to fit any needs you have, such as turning this into a reusable control or adding it to a common base class for your Web pages.
Got a UI question, tip, or idea for a topic you'd like me to cover? I'd love to hear it. E-mail me at [email protected].
The sample code in this article is available for download.
Brad McCabe is the technical evangelist for Infragistics. Brad also has been a systems architect and consultant for Verizon Communications and many other clients, and he was a leading .NET evangelist within Ajilon Consulting. His primary interests include ASP.NET, Windows CE .NET, .NET Compact Framework, and Microsoft's networking technologies. E-mail him at [email protected].