悬停导航菜单与非嵌套元素

我想创建使用JQuery的悬停菜单效果。我正在寻找的完美例子可以在http://www.godaddy.com/（查看绿色条）悬停导航菜单与非嵌套元素

我看过的所有例子都是使用UL和LI的嵌套元素。不过，我期望通过不嵌套的元素来实现这一点。如果您检查godaddy的源代码，那么您可以看到这些元素是非嵌套的，就像我想要的那样。

可以想象我有一些加价如下...

<div> 
    <a id="button1"><img .../></a> 
    <a id="button2"><img .../></a> 
    <a id="button3"><img .../></a> 
</div> 
<div id="menu1"> 
    //anything I want in here (links, labels etc.) 
</div>

我希望能够创建一个JavaScript函数，可以如下调用来设置这些菜单...

SetupMenu("#button1", "#menu1");

这个函数将定位div元素（这是绝对的），这个我可以没有问题。我无法解决的问题是悬停事件。我有这些事件的一个简单的例子...

$(button).mouseenter(function (e) { 
    $(menu).show(); 
}); 
$(button).mouseleave(function (e) { 
    $(menu).hide(); 
});

显然，这用于显示菜单的伟大工程，但是当你想鼠标移到菜单，然后鼠标休假的按钮激发（我会期望）。我知道这是错误的方法，但我只是在展示我现在的位置。

感谢所有帮助

相关CSS如下（例如目的修改的名称）...

#menu1 
{ 
    position:absolute; 
    display:none; 
    min-width:100px; 
    padding:10px 10px 20px 10px; 
} 

#button1 
{ 
    height:16px; 
    width:16px; 
    display:inline-block; 
    padding:4px; 
    cursor:pointer; 
}

来源

2011-08-19 musefan

你能证明你的CSS –

@Ahsan - 添加CSS样式菜单和按钮 – musefan

var intVal = 0; 
$(button).mouseenter(function (e) { 
    $(menu).show(); 
}); 
$(button).mouseleave(function (e) { 
    intVal= setTimeout(function() { $(menu).hide(); }, 1000); 
}); 

$(menu).mouseenter(function() { 
    clearTimeout(intVal); 
}); 
$(menu).mouseleave(function(e) { 
    $(this).hide(); 
}

这可以帮助你，你的菜单不会被隐藏，直到1秒，但是如果鼠标在你打开的菜单上，它会清除超时，菜单将被打开，直到mouseleave。

来源

2011-08-19 10:54:16

感谢您的答复。 clearTimeout似乎不起作用 - 函数被调用，但它没有效果和$（菜单）.hide（）仍然得到处理（我假设intVal没有被匹配）。我尝试将intVAl移到全局但不是好的。另外，我认为这可能会导致多个菜单出现问题？ – musefan

不要将intVal添加到$（document）.ready或其他任何方法中，因此它可以是全局变量，所以调用它 –

是的，我已经将它添加为全局变量（我之前做过），现在它是工作（也许是之前的缓存）。我担心全局val会导致与多个菜单冲突，但它似乎工作正常。我会做一些额外的测试，但如果一切顺利，我会很快接受这个答案 – musefan

我找不出你的代码。但我认为你必须使用ul & li组合为您的下拉菜单。

见点击this link

来源

2011-08-19 11:16:38

什么是不能弄清楚？无论如何，我有我的答案。我特别说我不想使用UL和LI，因为它需要嵌套按钮和菜单项 – musefan

一个简单的例子，这里是为我工作的解决方案。首先，我将按钮和菜单都包装在一个元素中，然后用JavaScript将菜单隐藏在包装器元素外面。其次，我使用JavaScript循环浏览所有菜单，并将鼠标隐藏在任何按钮上。最后，我在鼠标上方显示按钮上的相关菜单。

<div class="wrapper"> <!--On mouse OUT hide all menus --> 

    <div> 
    <a id="button1"></a> <!--On mouse OVER hide all menus then show associated menu --> 
    <a id="button2"></a> 
    <a id="button3"></a> 
    </div> 

    <div id="menu1"> 
    anything I want in here (links, labels etc.) 
    </div> 

</div>

来源

2012-03-30 15:33:59

悬停导航菜单与非嵌套元素

回答

相关问题