带有编辑操作子菜单的导航菜单 [英] Navigation menu with edit action sub menu

问题描述

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

我想知道如何创建动作菜单，以便当您将鼠标悬停在< li> 之一下方时，它会显示在 ; ul> margin部分可见，然后当您将鼠标悬停在动作本身上时完全可见。种类似于在Word 2007+中突出显示一大块文本时的效果：

在这种情况下，操作可以是编辑，删除，上移，

这是我的基本布局：

 < div id = nav-menu> 
< div class =tab-control-menu>一些操作项< / div> 
< ul id =tab-list> 
< li class =nav-item tab> 
< a tab =tab1tab-id =1class =selected tab> Tab 1< / a> 
< / li> 
< li class =nav-item tab> 
< a tab =tab2tab-id =2class =tab>标签2< / a> 
< / li> 
< li class =nav-item tab> 
< a tab =tab3tab-id =3class =tab>标签3< / a> 
< / li> 
< li class =nav-item tab> 
< a tab =tab4tab-id =4class =tab>标签4< / a> 
< / li> 
< li class =nav-item> 
< a href =＃class =new-tab>新增...< / a> 
< / li> 
< / ul> 
< / div> 
  

建立这样一个动作菜单的最好方法是什么？

JS 如果您使用的是jquery，

  $（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;背景：＃000; padding：3px; color：#fff} 
＃nav-menu .tab {width：100px;背景：#ffc} 
  

添加 strong>

 < span id =controls> 
< a href =＃id =c1>控制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实现。我认为。

In a web application I have a vertical menu built using a <ul>. There's nothing particularly fancy about it. Each <li> just has some padding and color.

I'm trying figure out how to create an action menu so that when you mouse over one of the <li>'s a little menu shows up right below it snapped to the right of the <ul> margin partially visible, then fully visible when you mouse over the actions themselves. Kind of like how it works in Word 2007+ when you have a chunk of text highlighted:

In this case the actions would be things like edit, delete, move up, move down.

Here's my basic layout:

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

What's the best way to build such an action menu?

解决方案

If you're using jquery then this will work for you

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}

addition to the markup

  <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/.

Same can be achieved with pure CSS too I think.

这篇关于带有编辑操作子菜单的导航菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！