使用无序列表扩展DIV

Question

I'm looking at having an unordered list that filters through some of my work. I have the filter working perfectly fine (not in this example) and I am now at the stage where I am having difficulty styling it. I've tried setting the width of the div and doing some online research but to no success.

It currently looks something like this: http://jsfiddle.net/XcVHU/

What I am hoping for is that only two words are displayed initially (Filter and All) and when the user hovers over or clicks on the word "Filter", the list expands with a CSS width-transition to display the other categories (Web, Still, Motion and Games). So, from this:

Filter | All

to this:

Filter | Web | Still | Motion | Games

Answer 1

It is better if you nest your ul 's such as...

<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>​

The CSS changes for transitions are quite straightforward:

#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

UPDATE:

Here is final version with animation and fixed line-height bug: http://jsfiddle.net/XcVHU/9/

Another solution, without animation:

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

What to do:

1. Put filters in separate nested UL
2. Set it's display to inline.
3. On document ready hide filters
4. On click toggle display property.

This solution is not buggy like the one provided by @PeterSzymkowski and looks nicer than @Duopixel's solution (which is anyway good and may be still suitable for you if you prefer animation of that kind when items appear outsite the right enge of the page and run into the position).

UPDATE:

Here is animated version, few changes made, check here:

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

Answer 3

Split ul.filter into two ul 's and use some code:

$('#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'});

});

• Example: http://jsfiddle.net/XcVHU/3/ (click on filter)