帶編輯操作子菜單的導航菜單

Question

在Web應用程序中，我有一個使用<ul>構建的垂直菜單。沒有什麼特別喜歡它。每個<li>只是有一些填充和顏色。

我試圖弄清楚如何，這樣，當你將鼠標放在<li>「SA的一個小菜單顯示了右下方捕捉到<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

如果你正在使用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來實現。

Answer 2

我想每個項目後添加彈出元素;如果列表很短，像：

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