Question

我想知道是否有一个教程来显示类似上下文的菜单当悬停按钮时，这与Google Plus onHover非常相似菜单效果如下所示：

enter image description here

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

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

您不需要教程即可。这很简单。

//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");
});

在悬停显示菜单上

6 个答案: