0

我需要让站点的菜单在列视图中像 OSX 的 Finder 一样导航，其中每个级别出现在其父级旁边的垂直列中。

现在已经在谷歌上搜索了几个小时，这个 Jquery 插件似乎是最接近的匹配项（这里有一个演示）

从第一次试用开始，它似乎有点难以定制。我需要它以几种方式表现和看起来不同：

  • 没有卷轴，既不是垂直的也不是水平的。它需要更像一个网络菜单而不是一个选择框
  • 当点击最终链接时，导航完 subs 后，整个页面应该被重定向到 url，并且菜单应该保持状态。
  • 最终链接应该可以立即点击，就像在演示中一样。在我的试用中，它加载了另一个带有链接副本的列，而该链接又是可点击的。

有谁知道如何使用这个插件来完成这些，或者可以指出我更接近这些规范的更简单的实现？

这是菜单html结构：

<ul id="nav">
    <li class="current" id="nav-o-que-estamos-fazendo">
        <a href="/o-que-estamos-fazendo/">O que estamos fazendo</a>
        <ul id="nav-o-que-estamos-fazendo-children">
            <li id="nav-o-que-estamos-fazendo-children-ficcao">
                <a href="/o-que-estamos-fazendo/ficcao/">Ficção</a>
            </li>
            <li class="current" id="nav-o-que-estamos-fazendo-children-documentario">
                <a href="/o-que-estamos-fazendo/documentario/">Documentário</a>
                <ul id="nav-o-que-estamos-fazendo-children-documentario-children">
                    <li class="current" id="nav-o-que-estamos-fazendo-children-documentario-children-josephine-king">
                        <a href="/o-que-estamos-fazendo/documentario/josephine-king/">Josephine King</a>
                    </li>
                </ul>
            </li>
            <li id="nav-o-que-estamos-fazendo-children-televiso">
                <a href="/o-que-estamos-fazendo/televiso/">Televisão</a>
            </li>
            <li id="nav-o-que-estamos-fazendo-children-museus">
                <a href="/o-que-estamos-fazendo/museus/">Museus</a>
            </li>
        </ul>
    </li>
    <li id="nav-o-que-ja-fizemos">
        <a href="/o-que-ja-fizemos/">O que já fizemos</a>
    </li>
    <li id="nav-o-que-somos">
        <a href="/o-que-somos/">O que somos</a>
    </li>
    <li id="nav-quem-somos-contato">
        <a href="/quem-somos-contato/">Quem somos | contato</a>
    </li>
    <li id="nav-mirabolancias">
        <a href="/mirabolancias/">Mirabolâncias</a>
    </li>
</ul>

由Harmonyapp上的 'nav' 液体标签生成）

4

1 回答 1

0

这是一个非常简单的解决方案。您所要想象的只是这些列就像一个常规的下拉菜单（在我们的情况下向左下拉）。只需隐藏所有子元素，并在单击项目的父项时触发它们的“show()”。

基本的CSS：

div#finderMenu{width: 800px}
ul{overflow: auto} /* will deal with your scrollbar issue */
ul li ul{float: left; height: 200px; width: 100px;} /* will layout all child uls */
li.current{background: blue} /* will make current parent button blue */

基本的jQuery：

$(function(){
    $('ul>li').click(function(){
        //hide all initial menu blocks
        $('ul ul').hide();

        //this will deal with the clickables and current states
        $('.active').removeClass('current');
        $(this).addClass('current');

        //now for the menu items
        $('.showing').removeClass('showing').hide();
        $(' ul', this).addClass('showing').show();
    });
});

显然你会充实css以使其看起来很漂亮并将其全部包含在一个div中。但我想你明白了:)

希望有帮助。

于 2011-04-05T00:42:34.693 回答