HoverMenu Control
-
HoverMenu is an ASP.NET AJAX extender that can be attached to any ASP.NET
WebControl.
-
We Associate Panel (Web Controls) to this control, these control visible
when mouse over the HoverMenu Control.
-
Popup position has been decided by Developer.
Properties
-
TargetControlID: Control ID of HoverMenu Control.
-
PopupControlID: ID of the control which display when mouse over on
the HoverMenu Control..
-
HoverCssClass: Css class.
-
PopupPostion: Popup should be positioned relative to the target
control
-
OffsetX/OffsetY: The number of pixels to offset the Popup
from it's default position
-
HoverDelay: The time, in milliseconds, before the popup display.
-
PopDelay: The time, in milliseconds, for the popup to remain
visible.
-
Animations: Generic animations for the HoverMenu extender.
How to Use HoverMenu Control
Step 1. Add Script manager and a HoverMenu Control to your page. Add a
Link Button Control and Pass the ID of this link Button to the HoverMenu Control
Property (TargetControlID="LinkButton1").
Step 2. Add a Control Panel and two other Link Button
Control in the Panel. Copy the Panel ID and paste in the property of HoverMenu
Control (PopupControlID="Panel1" ). This property show the popup control when
mouse over the HoverMenu control (means Link Button).
The Design Code (Default.aspx).
<%@ Page Language="C#" AutoEventWireup="true" Codevirtual="Default.aspx.cs"
Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>HoverMenu</title>
</head>
<body>
<form id="HoverMenu" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
<cc1:HoverMenuExtender ID="HoverMenuExtender1" runat="server"
TargetControlID="LinkButton1" PopupControlID="Panel1" PopDelay="100"
HoverDelay="100" PopupPosition="bottom">
</cc1:HoverMenuExtender>
<asp:LinkButton ID="LinkButton1" runat="server"
Font-Size="Larger">R4R</asp:LinkButton>
<asp:Panel ID="Panel1" runat="server" BackColor="#FF9900">
<asp:LinkButton ID="LinkButton2" runat="server"
PostBackUrl="http://r4rtechsoft.com/">About Us</asp:LinkButton>
<asp:LinkButton ID="LinkButton3" runat="server"
PostBackUrl="http://r4r.co.in/">Portal</asp:LinkButton>
</asp:Panel>
</form>
</body>
</html>
|
Step 3. Debug the application. Mouse over the R4R Link,
two other Links Open.
Tolal:0 Click:
Show All Comments
