使用css3向上滑動「strip」水平菜單效果？

我想用js或css3或兩者都創建一個非常具體的效果。使用css3向上滑動「strip」水平菜單效果？

我希望有我的容器div的頂部有一組頂級菜單項的水平條，即：

主要類別1 |主要類別2 |主類別3

當您將鼠標懸停在這些類別之一上時，「主類別」向上滑出視圖（或根本不顯示..它不需要需要轉換，但我希望。一個

然後，子鏈路出現在它的位置：

類別2子鏈路1 |類別2子鏈路2 |類別2子鏈路3 |類別2子鏈路4

所有這一切都在一個薄的水平格菜單不超過20-30px高。

我可以如何實現這一目標的任何例子？目的是一次將用戶的注意力集中在一個級別的菜單項上..我所製作的整個網站儘可能的簡單。

來源

2011-02-25 Alex C

你會接受一個jQuery的答案嗎？（的jsfiddle原型：http://jsfiddle.net/xaEWy/26/）

在html：

<ul id="nav"> 
    <li class="slot"/> 
    <li class="slot"/> 
    <li class="slot"/> 
</ul> 

<ul id="categories" class="hidden"> 
    <li class="category">a</li> 
    <li class="category">b</li> 
    <li class="category">c</li> 
</ul> 

<ul id="sublinks" class="hidden"> 
    <li class="sublink">1</li> 
    <li class="sublink">2</li> 
    <li class="sublink">3</li> 
</ul>

一些CSS（這需要被成形到該實施例中轉換成水平菜單）：

.category { 
    background-color: olive; 
} 
.sublink { 
    background-color: orange; 
} 

.hidden { 
    display:none; 
}

jQuery代碼：

$(document).ready(function() { 
    var displayables = new Array(); 
    displayables.push("category", "sublink"); 

    $('.slot').each(function(i) { 
     $(this).text($('#categories li:nth-child(' + (i + 1) + ')').text()).addClass('category'); 
    }); 

    $('.slot').hover(function(i) { 
     $(this).fadeOut(67, function() { 
      var nth=1; 
      while($(this)[0] != $('#nav li:nth-child('+nth+')')[0]){ 
       nth++; 
       if (nth>100){ break; } 
      } 
      $(this).text($('#' + (($(this).hasClass("category")) ? "sublinks" : "categories") + ' li:nth-child(' + nth + ')').text()); 
      for (c in displayables) { 
       $(this).toggleClass(displayables[c]); 
      } 
      $(this).show(); 
     }); 
    }); //hover 
});

來源

2011-05-04 03:03:16

使用css3向上滑動「strip」水平菜單效果？

回答

相關問題