How to show/hide menu on mouseover and mouseout?

[Vaseem Anjum]

Hi 
    I have a div and onmouseover of that div i need to show the menu and when use onmouseouts from that div i need to hide that menu i tried doing this with contextmenu and successfully show/hide menu but the problem is when user onmouseouts to click the menu the menu gets hidden. I need to keep showing menu onmouseout but if user goes away i need to hide.

Here is a sample code of what i am trying to achieve.

 

<div class="items1 anchorclass" rel="submenu1" onmouseover="showMenu(event)" onmouseout="hidemenu(e)" >

 

 

<asp:ImageButton ID="imgDemographics" runat="server" ImageUrl="../App_Themes/MainTheme/Images/icon_dp_d.png" /><br />

 

Demographics

</div>

 

 

<script type="text/javascript" language="javascript">

 

 

 

 

function showMenu(e)

 

{

 

var contextMenu = $find("<%= mnuDemographic.ClientID %>");

 

 

 

if ((!e.relatedTarget) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), e.relatedTarget)))

 

{

 

 

contextMenu.showAt(e.screenX - 40, e.screenY - 120);

}

 

 

 

// $telerik.cancelRawEvent(e);

 

 

 

}

 

function hidemenu(e)

 

{

 

var contextMenu = $find("<%= mnuDemographic.ClientID %>");

 

 

 

if ((!e.relatedTarget) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), e.relatedTarget)))

 

{

 

 

contextMenu.hide();

}

}

 

 

 

 

</script>

 

<

telerik:RadContextMenu ID="mnuDemographic" runat="server" Skin="Default" Flow="Vertical"

 

 

 

 

CausesValidation="False" onclientshowing="OnClientShowingHandler">

 

 

 

 

<Items>

 

 

 

 

<telerik:RadMenuItem runat="server" Text="Enrollment" Value="1">

 

 

 

 

</telerik:RadMenuItem>

 

 

 

 

<telerik:RadMenuItem runat="server" Text="Free Reduced Lunch" Value="2">

 

 

 

 

</telerik:RadMenuItem>

 

 

 

 

<telerik:RadMenuItem runat="server" Text="Attendance" Value="3">

 

 

 

 

</telerik:RadMenuItem>

 

 

 

 

<telerik:RadMenuItem runat="server" Text="Drop Outs/Graduation Rate" Value="4">

 

 

 

 

</telerik:RadMenuItem>

 

 

 

 

<telerik:RadMenuItem runat="server" Text="Mobility" Value="5">

 

 

 

 

</telerik:RadMenuItem>

 

 

 

 

<telerik:RadMenuItem runat="server" Text="Referrals" Value="6">

 

 

 

 

</telerik:RadMenuItem>

 

 

 

 

<telerik:RadMenuItem runat="server" Text="Retentions" Value="7">

 

 

 

 

</telerik:RadMenuItem>

 

 

 

 

<telerik:RadMenuItem runat="server" Text="Programs" Value="8">

 

 

 

 

</telerik:RadMenuItem>

 

 

 

 

<telerik:RadMenuItem runat="server" Text="Staff" Value="9">

 

 

 

 

</telerik:RadMenuItem>

 

 

 

 

<telerik:RadMenuItem runat="server" Text="Generate Demographic Profile" Value="10">

 

 

 

 

</telerik:RadMenuItem>

 

 

 

 

</Items>

 

 

 

 

</telerik:RadContextMenu>

Thanks

 

[Yana]

Hi Vaseem,

I've modified your code, so that the context menu is not hidden when the mouse is over it. Please download the attached file and examine it.

Greetings,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Susan]

This sounds like the same problem I am having. I have had this working for some time and my code looks like your attached example, from what I can tell. It works fine in IE but does not work in Firefox. You can go to www.americance.com in Firefox, hold your mouse over the Cosmetology and you will see what happens. The following is my code:

Thanks so much.
Susan

 

<div>

 

 

<div onmouseover="showMenuCosmetology(event)" onmouseout="hidemenuCosmetology(event)">

 

 

<img name="cosmetology" src="images/cosmetology.gif" width=152 height=157 alt="" border="0" onmouseover="over(0)" onmouseout="out(0)"/>

 

 

</div>

 

 

 

<script type="text/javascript" language="javascript">

 

 

function showMenuCosmetology(e)

 

{

 

var contextMenu = $find("<%= mnuCosmetology.ClientID %>");

 

 

if ((!e.relatedTarget) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), e.relatedTarget)))

 

{

contextMenu.show(e);

 

//contextMenu.showAt(e.screenX, e.screenY);

 

}

 

// $telerik.cancelRawEvent(e);

 

}

 

 

function hidemenuCosmetology(e)

 

{

 

 

var contextMenu = $find("<%= mnuCosmetology.ClientID %>");

 

 

if ((!e.toElement) || (!$telerik.isDescendantOrSelf(contextMenu.get_childListElement(), e.toElement)))

 

{

contextMenu.hide();

}

}

 

</script>

 

 

 

<telerik:RadContextMenu ID="mnuCosmetology" runat="server" Skin="Web20" Flow="Vertical" CausesValidation="False">

 

 

<Items>

 

 

<telerik:RadMenuItem runat="server" Text="Available States" BackColor="#365689" ForeColor="White"></telerik:RadMenuItem>

 

 

<telerik:RadMenuItem runat="server" IsSeparator="true"></telerik:RadMenuItem>

 

 

 

<telerik:RadMenuItem runat="server" Text="Texas" ImageUrl="images/texas.jpg">

 

 

<Items>

 

 

<telerik:RadMenuItem runat="server" Text="Facial Specialist" NavigateUrl="Courses.aspx?St=TX&IK=4&LTK=36"></telerik:RadMenuItem>

 

 

<telerik:RadMenuItem runat="server" Text="Hair Weaver" NavigateUrl="Courses.aspx?St=TX&IK=4&LTK=38"></telerik:RadMenuItem>

 

 

<telerik:RadMenuItem runat="server" Text="Hair Braider" NavigateUrl="Courses.aspx?St=TX&IK=4&LTK=39"></telerik:RadMenuItem>

 

 

<telerik:RadMenuItem runat="server" Text="Manicurist" NavigateUrl="Courses.aspx?St=TX&IK=4&LTK=41"></telerik:RadMenuItem>

 

 

<telerik:RadMenuItem runat="server" Text="Operator" NavigateUrl="Courses.aspx?St=TX&IK=4&LTK=43"></telerik:RadMenuItem>

 

 

<telerik:RadMenuItem runat="server" Text="Shampoo Specialist" NavigateUrl="Courses.aspx?St=TX&IK=4&LTK=44"></telerik:RadMenuItem>

 

 

<telerik:RadMenuItem runat="server" Text="Wig Specialist" NavigateUrl="Courses.aspx?St=TX&IK=4&LTK=45"></telerik:RadMenuItem>

 

 

</Items></telerik:RadMenuItem>

 

 

</Items>

 

 

</telerik:RadContextMenu>

 

 

</div>

 

[Susan]

Telerik,
Any luck figuring this out? If you go to www.americance.com and use Firefox, you will see what is happening. Hold your mouse over 'Salon' and the context menu works, but the minute you go to the menu to try and choose something, it goes away...and then comes back. looks like going to the menu itself causes an 'onmouseout'.

Thanks for the help.
Susan

[Yana]

Hello Susan,

Please modify your hidemenuCosmetology function like this in order to fix this issue in Firefox:

function hidemenuCosmetology(e)
{
    var relTarg = e.relatedTarget || e.toElement;
    var contextMenu = $find("<%= mnuCosmetology.ClientID %>");
    if ((!relTarg) || (!$telerik.isDescendantOrSelf(contextMenu.get_childListElement(), relTarg)))
    {
        contextMenu.hide();
    }
}

Best regards,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Susan]

Works great. Thanks so much.

Susan