jquery finder-like菜单

Question

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

人员已在Google上搜寻这对于几个小时，和this Jquery plugin seems to be the closest match（有一个demo here）

从第一次审判，似乎有点难以定义。我需要它的行为和几个方面看起来不同：

• 没有卷轴，既不是垂直也不是水平。它需要更像一个网页菜单，而不是像一个选择框
• 当点击最后一个链接时，浏览子目录后，整个页面应该被重定向到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> 

作为产生由 'NAV' 液体标签上Harmonyapp）

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内。但我认为你有这个想法:)

希望有所帮助。