Ajax Hover Menu

I have been using a menu format that is used in the CSP application. My thought is if my application is stand-alone, I want it to have a similar look and feel as the CSP application. If it becomes part of the CSP or another application, this would probably facilitate an easier assemblance into an existing database.

CSP is the web application Antione and Coleen have developed to track contaminated sites here at ADEC. It is a very nice program / database.

One of the problems I have run into placing this menu on the right like CSP, is that some of my gridviews of data run off the page. This puts the menu off screen. My initial thought is to use Ajax to put this menu in a drop down that overlays the grid view. It worked after some tweaking.

First, I added this to the top of the page just under the <%@ Page ... %>:

• <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

The script manager is needed in the content page:

• <asp:ScriptManager ID="ScriptManager1" runat="server" />

Add the HoverMenuExtender afterwards:

• <cc1:HoverMenuExtender ID="HoverMenuExtender1" runat="server" TargetControlID="MainMenuButton" PopupControlID="PopUpMainMenu" PopDelay="5000" />

Where:

• TargetControlID is the name of the object over which the mouse hovers to pop up the menu.
• PopupControlID is the name of the menu object which will pop up.
• PopDelay is the amount of delay the menu stays visible after the mouse loses focus on the menu.

For the pop up menu, I added this to the bottom of the page within the area of my page so that is on top of any content when displayed:

• <asp:Panel ID="PopUpMainMenu" runat="server">
  <!-- Add the Main Menu buttons -->
  <div style="z-index: 9999;">
  <mm1:MainMenu ID="MMCB" runat="server" />
  </div>
  </asp:Panel>

The defines the menu to display. is the web control I made separately to house the menu. Like the Ajax HoverMenu is registered on the top of the page, so is the control:

• <%@ Register Src="MainMenu.ascx" TagName="MainMenu" TagPrefix="mm1" %>