jquery - 悬停显示菜单

Question

我想知道是否有教程可以在悬停按钮时显示类似上下文的菜单，这与下面看到的 Google Plus onHover 菜单效果非常相似：

对此的任何教程表示赞赏，谢谢！

Answer 1

您可能会发现以下链接很有帮助：

http://medialize.github.io/jQuery-contextMenu/demo/trigger-hover-autohide.html

Answer 2

我认为最好的方法是使用纯 CSS

CSS：

.button {
    position: relative;
}

    .button .hovermenu {
        position: absolute;
        top: 25px;
        left: 0px;
        display: none;
    }

    .button:hover .hovermenu {
        display: block;
    }

HTML：

<ul>
    <li class="button">
        This has a hovermenu!
        <div class="hovermenu">
            <ul>
                <li>Submenu item</li>
            </ul>
        </div>
    </li>
</ul>

Answer 3

https://www.google.co.in/search?q=css+drop+down+menu+tutorial&aq=2&oq=css+drop+downs&aqs=chrome.3.57j0l3j62l2.4118j0&sourceid=chrome&ie=UTF-8

这将提供数百个关于你想要什么的教程，

你可以只用简单的 css 创建这样的菜单，看看这里，

http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

希望这对你有帮助

Answer 4

好的，这里有两个事件选项，这是显而易见的一个；

$( "img" ).hover(
  function() {
    showMenu(); //hyperthetical function to show whatever
  }, function() {
     hideMenu();//hyperthetical function to show whatever
});

Answer 5

你不需要教程来做到这一点。这是简单的CSS。

//Your button
<input type="button" class="btn" />

//Your div that contains the contextual-like menu
<div class="contextualMenu">
   your contextual menu goes here
</div>

//And the css code is (menu is hidden by default and shows up only when you hover the button)
.contextualMenu{display:none;}
.btn:hover .contextualMenu{display:block;}

希望这对你有用。干杯!

Answer 6

复制 Bootstrap 中使用的非常好的方法（这就是我的做法）：

有一个容器、一个触发器和一个菜单。

HTML

<div class="dropdown_container">

    <a class="dropdown_trigger">Button</a>

    <ul class="dropdown_menu">
        <li><a>...</a></li>
        <li><a>...</a></li>
        ...
    </ul>
</div>

CSS

.dropdown_container { position: relative; }
.dropdown_trigger { display: block; }
.dropdown_menu { position:aboslute; top: 100%; display: none; }
.show_dropdown .dropdown_menu { display: block; }

JS

// On click
$('.dropdown_trigger').click( function() {
    $(".dropdown_menu").addClass("show_dropdown");
});

// On hover
$('.dropdown_trigger').hover( function() {
    $(".dropdown_menu").addClass("show_dropdown");
});

// Or add the css directly
$('.dropdown_trigger').hover( function() {
    $(".dropdown_menu").css("display", "block");
});