Question

在Web应用程序中，我使用<ul>构建了一个垂直菜单。对它没什么特别的看法。每个<li>只有一些填充和颜色。

我正在尝试弄清楚如何创建一个操作菜单，以便当您将鼠标悬停在<li>之一的小菜单上时，它会突然显示在<ul>边距的右侧部分可见，然后在鼠标悬停在动作本身上时完全可见。当你突出显示一大块文字时，有点像它在Word 2007+中的工作方式：

在这种情况下，操作将是编辑，删除，上移，下移等操作。

这是我的基本布局：

<div id="nav-menu">
    <div class="tab-control-menu">some action items</div>
    <ul id="tab-list">
        <li class="nav-item tab">
            <a tab="tab1" tab-id="1" class="selected tab">Tab 1</a>
        </li>
        <li class="nav-item tab">
            <a tab="tab2" tab-id="2" class="tab">Tab 2</a>
        </li>
        <li class="nav-item tab">
            <a tab="tab3" tab-id="3" class="tab">Tab 3</a>
        </li>
        <li class="nav-item tab">
            <a tab="tab4" tab-id="4" class="tab">Tab 4</a>
        </li>
        <li class="nav-item">
            <a href="#" class="new-tab">Add New...</a>
        </li>
    </ul>
</div>

构建此类操作菜单的最佳方法是什么？

Answer 1

如果列表很短，我会在每个项目后添加弹出元素，例如：

<li class="box">Box</li>

使用display: none从头开始隐藏它，然后在列表项悬停时显示它：

li.nav-item:hover + .box, .box:hover {
    display: block;
}
.box {
    display: none;
    list-style: none;
    opacity: 0.3;
}
.box:hover {
    opacity: 1;
}

你将不得不调整行为，如果列表很长，也许可以使用JS附加元素。

http://jsfiddle.net/4unLH/

Answer 2

如果您正在使用jquery，那么这将适合您

<强> JS

    $(function () {
        var controls = $('#controls');

        controls.hover(function(){
           $('a', $(this)).css('opacity', 1);
        },function(){
           $('a', $(this)).css('opacity', 0.3);
        });

        function hideControls(){
           controls.fadeOut('fast');
        }

        $('.close', controls).click(function(){
           hideControls();
        })

        $('.nav-item').hover(function(){
           var off = $(this).offset()
           controls.css({
              opacity: 1,
              display: 'block',
              left: off.left + 20,
              top: off.top + 20
           });
        }, function(){

        })
     })

CSS

     #controls{display: none; position: absolute; top: 0; left: 0; background: #fff; border: 1px solid #eee; padding: 20px 5px;}
     #controls a{opacity: 0.3}
     #controls a:hover{background:#eee}
     #controls .close{font-size: small; background: #000; padding: 3px; color:#fff}
     #nav-menu .tab{width: 100px; background:#ffc}

添加到标记

  <span id="controls">
     <a href="#" id="c1">control 1</a>
     <a href="#" id="c2">control 2</a>
     <a href="#" id="c3">control 3</a>
     <a href="#" class="close">close</a>
  </span>

http://jsfiddle.net/gybUj/

我认为使用纯CSS也可以实现同样的效果。

带编辑操作子菜单的导航菜单

2 个答案: