Question

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

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

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

当您将鼠标悬停在其中一个类别上时，“主要类别”会向外滑动（或者根本不显示...它不会需要过渡，但我会像一个人。

然后，子链接出现在其位置：

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

所有这一切都在一个薄的水平div菜单中，不超过20-30px高。

我是如何实现这一目标的任何例子？目的是让用户一次只关注一个级别的菜单项目。我正在制作的整个网站尽可能小..视觉上......尽可能。

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
});

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

1 个答案: