0

在 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>

构建这样一个操作菜单的最佳方法是什么？

4

2 回答 2

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/

于 2013-04-07T18:33:02.487 回答
1

如果您使用的是 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 来实现。

于 2013-04-07T18:49:28.647 回答