Question

我有一个包含ToolGroups的菜单：

Menu with toolGroups

我想在悬停的工具组div的右侧显示一个子菜单。我如何用html5，javascript（也是jQuery）和CSS实现这一点？

编辑： JsFiddle

上的源代码

   <div id="menu">
        <center><h1>Toolbox</h1></center>
        <hr/>
        <div class="toolGroup">MyToolGroup&Rightarrow;</div>
        <hr/>
        <div class="toolGroup">MyToolGroup2&Rightarrow;</div>
        <hr/>
        <div class="toolGroup">MyToolGroup3&Rightarrow;</div>
        <hr/>
        <div class="toolGroup">MyToolGroup4&Rightarrow;</div>
        <hr/>
        <div class="toolGroup">MyToolGroup5&Rightarrow;</div>
        <hr/>
        <div class="toolGroup">MyToolGroup6&Rightarrow;</div>
        <hr/>
        <div class="toolGroup">MyToolGroup7&Rightarrow;</div>
        <hr/>
        <br/>
    </div>

#menu
{
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: #c0c0c0;
    border-radius: 8px;
    padding: 10px 10px 10px 10px;
}

.toolGroup
{
    cursor: pointer;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

Answer 1

以下是http://jsfiddle.net/Mohinder/UJErC/

的简单css解决方案

HTML

<ul class="toolgroup">
    <li><a href="">Toolgroup</a>
        <ul>
            <li><a href="">Toolgroup</a>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            </li>
        </ul>
    </li>
    <li><a href="">Toolgroup</a>
        <ul>
            <li><a href="">Toolgroup</a>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            </li>
        </ul>
    </li>
    <li><a href="">Toolgroup</a>
        <ul>
            <li><a href="">Toolgroup</a>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            </li>
        </ul>
    </li>
    <li><a href="">Toolgroup</a>
        <ul>
            <li><a href="">Toolgroup</a>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            </li>
        </ul>
    </li>
    </ul>

CSS

body,ul,li { margin:0px; padding:0px; }
.toolgroup,.toolgroup li ul { padding:0px; list-style:none; width:150px; background:#ccc; border:1px solid #000; }
.toolgroup li,.toolgroup li ul li { width:100%; position:relative; }
.toolgroup li a,.toolgroup li ul li a { padding:7px 10px; display:block; border-bottom:1px solid #000; }
.toolgroup li ul { display:none; position:absolute; left:150px; top:0px; }
.toolgroup li:hover ul { display:block; }

Answer 2

您可以在某些子列表上使用悬停事件：

http://jsfiddle.net/qAZFC/1/

HTML：

<div class="toolGroup">MyToolGroup4&Rightarrow;
    <ul>
        <li>Test item</li>
        <li>Test item</li>
        <li>Test item</li>
    </ul>
</div>

CSS：

.toolGroup ul {
    display:none;   
}
.toolGroup:hover ul {
    display:block;   
}

或者使用jQuery，绑定一个mouseenter / mouseout事件并淡入：

http://jsfiddle.net/7TPab/1/

Answer 3

您需要让右侧的菜单已经存在并通过HTML和CSS格式化。完成此操作后，通过CSS将它们全部设置为display:none。

现在我们转到javascript（我将向您展示一个jQuery解决方案，因为它更容易并且您建议它。）

这样的事情应该可以完成你的任务：

$(function(){
    $(MyToolGroup).hover(function(){
        $(MyToolGroupSubMenu).css("display","box")
    },function(){
        $(MyToolGroupSubMenu).css("display","none")
    })
})

这是一个非常简单的精简版，只是为了让你朝着正确的方向前进。

重要的是接下来每个相关工具组内的子菜单，这样悬停处理程序既适用于菜单项也适用于子菜单项。

请注意，上面代码中的选择器只是伪代码，我不能使用您的代码，因为您没有提供它，而是根据需要替换它们。

这是一个基本的jsfiddle http://jsfiddle.net/rsEGZ/1/

我推荐使用javascript（和jQuery）代替CSS的唯一原因是因为它允许通过动画和回调将其变为更复杂的自由。

但是，这是CSS解决方案http://jsfiddle.net/rsEGZ/2/

如何制作一个右键菜单？

3 个答案: