Question

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

现在已经谷歌搜索了几个小时，this Jquery plugin seems to be the closest match（有一个demo here）

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

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

是否有人知道如何使用此插件完成这些操作，或者是否可以指向更接近这些规范的更简单的实现？

这是菜单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'液体标签生成

Answer 1

这是一个非常简单的解决方案。所有你必须想象的是，列就像一个常规下拉（在我们的情况下左下）。只需隐藏所有子元素，并在单击项目的父项时触发它们的“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中包含它。但我认为你明白了这一点：）

希望有所帮助。

Jquery Finder-like菜单

1 个答案: