向上滑动“条”使用css3的水平菜单效果？

Question

我想使用 js 或 css3 或两者创建一个非常具体的效果。

我想在容器 div 的顶部有一个水平栏，其中有一组顶级菜单项，即：

主类别 1 |主类别2 |主要类别 3

当您将鼠标悬停在其中一个类别上时，“主要类别”会滑出视图（或者根本不出现......它不需要过渡，但我会 然后，

子链接出现在其位置：

类别 2 子链接 1 | 类别 2 子链接 3 | 类别 2 子链接 4

所有这些都在一个高度不超过 20-30 像素的薄水平 div 菜单中

。我如何实现这一目标的示例？目的是让用户一次将注意力集中在一级菜单项上。我正在制作的整个网站尽可能最小化。

Answer 1

你会接受 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
});