使用無序列表擴展DIV

Question

我正在尋找一個無序列表來過濾我的一些工作。 我的過濾器工作得很好（不是在這個例子中），我現在正處於我難以造型的階段。 我已經嘗試設置div的寬度並進行一些在線研究，但沒有成功。

它目前看起來像這樣： http ： //jsfiddle.net/XcVHU/

我希望的是，最初只顯示兩個單詞（過濾器和全部），當用戶將鼠標懸停或單擊“過濾器”時，列表會以CSS寬度過渡擴展以顯示其他類別（Web，還是，動作和游戲）。 所以，從這個：

過濾| 所有

對此：

過濾| 網絡| 還是| 動作| 游戲

Answer 1

如果你築巢你的ul更好......

<div id="portfolionav">
    <ul class="filter">
        <li>Filter</li>
        <ul class="subfilters">
           <li class="web"><a href="#">Web</a></li>
           <li class="still"><a href="#">Still</a></li>
           <li class="motion"><a href="#">Motion</a></li>
           <li class="games"><a href="#">Games</a></li>
        </ul>
        <li class="current all"><a href="#">All</a></li>
    </ul>    
</div>​

轉換的CSS更改非常簡單：

#portfolionav ul {
    display: inline-block;
    white-space: nowrap;
   -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;

}
#portfolionav ul ul {width: 0; opacity: 0;}

#portfolionav ul:hover > ul {width: 370px; opacity: 1;}

http://jsfiddle.net/jukUm/

Answer 2

更新：

這是動畫和固定行高錯誤的最終版本： http ： //jsfiddle.net/XcVHU/9/

另一個沒有動畫的解決方案

http://jsfiddle.net/XcVHU/4/

該怎么辦：

1. 將過濾器放在單獨的嵌套UL中
2. 將其顯示設置為內聯。
3. 在文檔准備隱藏過濾器
4. 單擊切換顯示屬性。

這個解決方案並不像@PeterSzymkowski提供的那樣，並且看起來比@ Duopixel的解決方案更好（這無論如何都很好，如果您喜歡這種類型的動畫，當項目出現在頁面右側並運行時，可能仍然適合您進入這個位置）。

更新：

這是動畫版本，進行了一些更改，請點擊此處：

http://jsfiddle.net/XcVHU/7/

Answer 3

將ul.filter拆分為兩個ul並使用一些代碼：

$('#expand').click(function(e){
    e.preventDefault();
    $('.filter.hidden').show();
    var tw = $('.filter.hidden').width();
    $('.filter.hidden').css('width', '0px');
    $('.filter.hidden').animate({width: tw+'px'});

});

• 示例： http ： //jsfiddle.net/XcVHU/3/ （單擊過濾器）