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內。但我認爲你有這個想法:)

希望有所幫助。