子菜单 - 淡入和淡出菜单栏中的子菜单

问题描述

嗨朋友们，



我想创建一个菜单栏，当鼠标指针移过一个项目时，项目旁边会出现一个相关的额外菜单，当鼠标指针熄灭，它应该消失。



例如，当你将鼠标指针放在本页右上角的用户名时，你会看到一个菜单包含我的设置，我的联系信息，...



我想实现这样的菜单。



切换额外菜单元素（如div）的可见性（或更改显示）属性是显而易见的。

但我的问题是我怎么能检测到鼠标指针是悬停在额外的菜单上，它不应该消失，直到鼠标指针熄灭！



我不想使用JQuery。



非常感谢。

Hi friends,

I wanna create a menu bar in which when mouse pointer goes over an item, a related extra menu should appears beside the item, and when mouse pointer goes out, it should disappears.

For example when you place your mouse pointer on your username at the top right of this page, you'll see a menu contains My Settings, My Contact Info, ...

I wanna implement such menu.

Toggling the visibility(or changing the display) attribute of the extra menu element ( such as div ) is obvious.
But my problem is how could I detect that the mouse pointer is hovering over the extra menu, and it should NOT disappear till mouse pointer goes out !

I don't wanna use JQuery.

Thanks a lot.

推荐答案

<div id="menu" style="width:200px; height:50px; overflow:visible;">

</div>

然后我添加了另一个< div>在菜单DIV中！

这里我使用相对位置来使用z-index属性。 （绝对位置也可以。）

左边的属性让我的子菜单显示在正确的位置。

display属性设置为none;在javascript代码中更改它将显示DIV。

Then I've added another <div> INSIDE the menu DIV !
Here I use relative position to use z-index attribute. (absolute position is OK too.)
The left attribute let my sub-menu appear in correct position.
The display attribute is set to none; Changing it in javascript code will display the DIV.

<div id="menu" style="width:200px; height:50px; overflow:visible;">
    <div id="sub-menu" style="width:200px; height:300px; position:relative; left:200px; display:none">
        ... items in sub-menu
    </div>
</div>

之后我为MouseOver和MouseOut添加了两个javascript函数：

After that I've added two javascript functions for MouseOver and MouseOut :

<div id="menu" style="width:200px; height:50px; overflow:visible;" onmouseover="javascript: MouseOver();" onmouseout="javascript: MouseOut();">
    <div id="sub-menu" style="width:200px; height:300px; position:relative; left:200px; display:none">
        ... items in sub-menu
    </div>
</div>

Javascript：

Javascript:

function MouseOver(){
    document.getElementById("sub-menu").style.display = "inline-block";
}

function MouseOut(){
    document.getElementById("sub-menu").style.display = "none";
}

这样当鼠标指针越过菜单DIV时，会出现子菜单DIV，当鼠标出现时指针通过子菜单DIV，它仍然在菜单DIV上，所以MouseOut函数不会被调用！



诀窍就是添加子菜单DIV INSIDE主菜单DIV，并使用它的相对位置！ changin显示属性很明显;）



请原谅我的错误解释。

谢谢。

In this way when mouse pointer goes over the menu DIV, the sub-menu DIV appears, and when mouse pointer goes through the sub-menu DIV, it IS STILL over the menu DIV too, so MouseOut function will not invoked !

The trick was just adding the sub-menu DIV INSIDE the main menu DIV, and use relative position for it ! changin the display attribute was obvious ;)

Excuse my bad explanation.
Thanks.

这篇关于子菜单 - 淡入和淡出菜单栏中的子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！