Question

我想要实现最新的谷歌菜单..（当我们打开谷歌左上角时，我们可以看到一个谷歌按钮。当我点击该按钮菜单时，将会出现并将一直停留，直到文档上发生另一次点击。该元素菜单将出现，并将活到mouseout。我想实现相同的，这是我尝试过的代码..我希望我会在这里得到帮助。我想添加像谷歌菜单（效果）的确切功能< / p>

HTML

<div id="content1" style="width:50px">
<span class="header">Hello</span>
<ol id="a">
    <li><span class="ele">jkehfkje</span></li>
    <li><span class="ele">jkehfkje</span></li>
    <li><span class="ele">jkehfkje</span></li>
</ol>
</div>
<div>kufhjegfe</div>

jQuery代码

$('#content1').hover(function() {
   $('#a').fadeIn('slow');
}, function() {
   $('#a').fadeOut('slow');
});

CSS

#a
{
  display:none   
}
.ele
 {
   height:20px;
   width:60px;
   border:1px solid black;
 }
.ele:hover
{
  cursor:pointer
}

here是小提琴感谢

Answer 1

首先，here is a fork of your fiddle。我所做的就是给你的职位：绝对。

这会导致菜单不会影响页面流中较低的其他内容。

你在谈论哪个谷歌菜单？更多标签？

Answer 2

您可以尝试使用toggle，如下所示：

 $('#content1').click(function(){
     $('#a').toggle('slow');
     event.stopPropagation(); //this is important
 });

然后在某处放置代码将关闭菜单，如果用户点击其他地方......

$('html').click(function(){
    if($('#a').is(':visible')) $('#a').toggle('slow');
});

如果我们不包含event.stopPropagation();，如上所示，$('html').click()也会发生，这意味着它将同时打开和关闭菜单。

希望这有帮助！

P.S。这是一个小提琴： http://jsfiddle.net/mkprogramming/zhdDC/

（我使用了一个名为body而不是html的div）

Answer 3

我对你的js进行了一些更改，使菜单基于点击。还准备了悬停菜单元素的功能。我希望这会有所帮助。

    $('#content1').click(function() {
    $('#a').fadeIn('slow');
     event.stopPropagation(); 
});
$('.ele').hover(function(){

});
$('body').click(function(){
  $('#a').fadeOut('slow');});

使用CSS和jQuery实现Google菜单

3 个答案: