How to use Hover Menu in asp.net

HoverMenu is an ASP.NET AJAX extender that can be attached to any ASP.NET Server Controls, and will associate that control with a popup panel to display additional content. When the user moves the mouse cursor over the main control, the popup gets displayed at the specified position and a CSS style can also be applied to the main control to highlight the selection or mouse over action.


Now I am going to describe how to use Hover Menu Extender in ASP.NET website
Follow the below mentioned steps
Step 1. Add Ajax Control Toolkit reference in your website. For this See This Post
Step 2. If the ScriptManager tag is not present is your form then it should be specified inside the Form tag.<asp:ScriptManager Id="sm1" runat="server" />

Step 3. In head tag provide link to the css file like <link href="HoverTest.css" rel="stylesheet" type="text/css" />

Step 4. now insert Madal Popup extender like
// Paste this code below the page directive and above all othe tags
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
// drap Hover Menu extender in you page and set popupcontrolid etc.. for example
-------------------------------------------------------------


<form id="form1" runat="server">

<asp:ScriptManager ID="SM1" runat="server" />

<asp:Repeater ID="rptTestHover" runat="server">

<ItemTemplate>

<asp:Panel ID="pnlMenu" runat="server" Width="200px" BackColor="Beige" BorderWidth="1px">

<asp:HyperLink ID="lnk_HyperLink1" runat="server" NavigateUrl="#"

Text='<%#DataBinder.Eval(Container.DataItem, "MenuText")%>' />

</asp:Panel>
<asp:Panel ID="pnlShowHover" runat="server">

<%#DataBinder.Eval(Container.DataItem, "MenuInfo")%>

</asp:Panel>
<ajaxToolkit:HoverMenuExtender ID="hmeShow" runat="server" TargetControlID="pnlMenu"

PopupControlID="pnlShowHover" PopupPosition="Right" PopDelay="10" />

</ItemTemplate>

</asp:Repeater>

</form>

------------- Hover menu extender control -------------------

   <ajaxToolkit:HoverMenuExtender ID="hmeShow" runat="server" TargetControlID="pnlMenu"

PopupControlID="pnlShowHover" PopupPosition="Right" PopDelay="10" />

----------------------------------------------------------------------------------


where 'pnlShowHover' is the Id of Panel which you want to show when Mover Hover over 'pnlMenu'

Properties of Hover Menu Extender and their meaning

TargetControlID - The control that the extender is targeting. When the mouse cursor is over this control, the hover menu popup will be displayed.

PopupControlID - The ID of the control to display when mouse is over the target control. In this case, it's just a simple panel with two links:

HoverCssClass - The CSS class to apply to the target when the hover menu popup is visible.

PopupPostion - Where the popup should be positioned relative to the target control. Can be Left (Default), Right, Top, Bottom, Center.

OffsetX/OffsetY - The number of pixels to offset the Popup from it's default position, as specified by PopupPosition. So if you want it to popup to the left of the target and have a 5px space between the popup and the target, the value should be "-5".

HoverDelay - The time, in milliseconds, before the popup displays after hovering over the target control. Default is 0.

PopDelay - The time, in milliseconds, for the popup to remain visible after the mouse moves away from the target control. Default is 100.

Animations - Generic animations for the HoverMenu extender. See the Using Animations walkthrough and Animation Reference for more details.

OnShow - The OnShow animation will be played each time the hover menu is displayed. The hover menu will be positioned correctly but hidden. The animation can use <HideAction Visible="true" /> to display the hover menu along with any other visual effects.

OnHide - The OnHide animation will be played each time the hover menu is hidden.

Hope this post helps you in using Modal PopupExtender in your website.