asp.net c# tutorials and examples code for web developers

How to use HoverMenuExtender in asp.net ajax

HoverMenuExtender in asp.net ajax
HoveMenuExtender is an asp.net ajax control toolkit's extender control. HoverMenuExtender control can be attached to any asp.net WebControl. HoverMenuExtender associate with this attached control to display additional content in a popup panel. when user mouse over the HoverMenuExtender attached control, a popup panel is displayed at a specified position. HoverMenuExtender PopupPosition property specify where the popup displayed relative to the target control such as Left, Right, Bottom, Center etc.

HoverMenuExtender OffsetX and OffsetY property offset the popup panel from its default position. HoverDelay property specify the number of milliseconds need to wait to display the popup after hovering over the target control. PopDelay property specify the time for the popup to remain visible after mouse moves away from target control.

Animations property provides a way to create a generic animation for HoverMenuExtender. Animations OnShow ensure animation will be played each time popup panel is displayed. and OnHide ensure animation will be played each time hover menu (popup panel) is hidden.

HoverMenuExtender TargetControlID property specify the control that the HoverMenuExtender is targeting. when user mouse cursor over this target control a hover menu (popup panel) is displayed. PopupControlID specify the ID of control to display as popup when mouse over the target control. we can use an asp.net Panel server control as popup control and a Label server control as target control.

HoverMenuExtender HoverCssClass property represent a css class that we can apply to the target control when hover menu popup is visible.
UsingHoverMenuExtender.aspx
<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ 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">
<script runat="server">
    protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        Label1.ForeColor = System.Drawing.Color.FromName(RadioButtonList1.SelectedItem.Text);
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Ajax HoverMenuExtender - How to use HoverMenuExtender in asp.net ajax</title>
    <style type="text/css">
        .PanelCSS
        {
            visibility:hidden;
            }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2 style="color:DeepPink; font-style:italic;">Ajax Control Toolkit Example: Using HoverMenuExtender</h2>
        <hr width="550" align="left" color="Pink" />
        <asp:ScriptManager 
            ID="ScriptManager1"
            runat="server"
            >
        </asp:ScriptManager>
        <cc1:HoverMenuExtender 
            ID="HoverMenuExtender1"
            runat="server"
            TargetControlID="Label1"
            PopupControlID="Panel1"
            PopupPosition="Bottom"
            >
        </cc1:HoverMenuExtender>
        <br /><br />
        <asp:Label 
            ID="Label1"
            runat="server"
            Text="Color changeable label."
            Font-Size="XX-Large"
            Font-Names="Comic Sans MS"
            >
        </asp:Label>
        <asp:Panel 
            ID="Panel1"
            runat="server"
            Width="300"
            BorderColor="Gray"
            BorderWidth="1"
            CssClass="PanelCSS"
            >
            <asp:RadioButtonList 
                ID="RadioButtonList1"
                runat="server"
                RepeatColumns="3"
                OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged"
                AutoPostBack="true"
                >
                <asp:ListItem>Tan</asp:ListItem>
                <asp:ListItem>Crimson</asp:ListItem>
                <asp:ListItem>DarkBlue</asp:ListItem>
                <asp:ListItem>SeaGreen</asp:ListItem>
                <asp:ListItem>OrangeRed</asp:ListItem>
                <asp:ListItem>Magenta</asp:ListItem>
                <asp:ListItem>DeepPink</asp:ListItem>
            </asp:RadioButtonList>
        </asp:Panel>
    </div>
    </form>
</body>
</html>
Related asp.net example