Hover on ASP .NET Menu

Question

I have used an asp .net menu in a div. I need to display the menu by mouse hover on another div element called "Menu".

The problem is that the menu disappears when the mouse moves onto the menu [away from the "Menu" div], thus making the menu non accessible.

jQuery(document).ready(function () {
        //toggle the componenet with class msg_body
        jQuery(".heading").hover(function () {
            jQuery(this).next(".txtcontent").slideToggle("slow");
        });
    });

HTML code:

<div class="heading" style="width: 100%; font-size: 7pt; font-family: 'Lucida Bright';">
<span style="font-size: 20pt">MENU</span>
</div>
<div class="txtcontent" style="width: 90%; display: none;">
<asp:Menu> Menu contents </asp:Menu>
<div>

Kindly help.

Tats_innit · Accepted Answer · 2012-10-23 09:24:37Z

2

Try this please :) http://jsfiddle.net/SJHr5/

Hope it fits the cause :)

Code

<div class="heading" style="width: 100%; font-size: 7pt; font-family: 'Lucida Bright';">
<span style="font-size: 20pt">MENU</span>

<div class="txtcontent" style="width: 90%; display: none;">
    <asp:Menu> Menu contents </asp:Menu>

</div>
</div>

Jquery code

$(function() {
    $(".heading").hover(function() {
        $(this).find(".txtcontent").slideDown("slow");

    }, function() {
        $(this).find(".txtcontent").slideUp("slow");


    });
});

answered Oct 23, 2012 at 9:24

Tats_innit

34.1k10 gold badges74 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

semantic_c0d3r Over a year ago

Thanks.It works but has a bug. When a submenu opens from the asp .net menu and the mouse moves out of the control, it does not slide up.

Tats_innit Over a year ago

@sanjay_c0d3r cool, man we will fix it, flick me a fiddle, i.e. use the demo above and create the issue, will flick solution your way. :)

udidu · Accepted Answer · 2012-10-23 09:21:16Z

When you hover the Menu item, the menu is shown as you expected but when you move the mouse to the menu itself, the Menu item is no longer hovered, so, what you need to do is get the txtcontent that holds the menu inside the menu item.

You can do it in this way:

<div class="heading" style="width: 100%; font-size: 7pt; font-family: 'Lucida Bright';">
    <div style="font-size:20pt;position:relative;display:inline-block;">
        <span>Menu</span>
        <div class="txtcontent" style="display:none;position:absolute;top:25px;left:0;">
            <asp:Menu> Menu contents </asp:Menu>
        </div>
    </div>
</div>

No just give the menu (txtcontent) the style you want.. fix the top position i gave here etc...

Destrictor · Accepted Answer · 2012-10-23 09:23:16Z

0

I managed to do what you want by doing the following

jQuery(document).ready(function () { 
    //toggle the componenet with class msg_body
    jQuery(".heading").mouseover(function () {
        jQuery(this).next(".txtcontent").slideToggle("slow");
    });
    jQuery(".txtcontent").mouseout(function () {
        jQuery(this).slideToggle("slow");
    });
});

notice this will not work correctly when there are multiple headings, each .txtcontent will remain visible until you go over it, and then leave it.

answered Oct 23, 2012 at 9:23

Destrictor

7521 gold badge4 silver badges15 bronze badges

Comments

IUnknown · Accepted Answer · 2012-10-23 09:30:11Z

0

Another one solution in addition to posted above :)

var hideMenuTimeout = null;

jQuery(".heading").hover(
function() {
    jQuery(this).next(".txtcontent").slideDown("slow");
}, function() {
    var self = this;
    hideMenuTimeout = setTimeout(function() {
        jQuery(self).next(".txtcontent").slideUp("slow");
    }, 100);
});

$(".txtcontent").hover(
function() {
    clearTimeout(hideMenuTimeout);
}, function() {
    $(this).slideUp("slow");
});

jsFiddle

answered Oct 23, 2012 at 9:30

IUnknown

22.5k4 gold badges41 silver badges71 bronze badges

Collectives™ on Stack Overflow

Hover on ASP .NET Menu

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related