使用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”水平菜单效果？

回答

相关问题