CODEWITHSUNDEEP
javascripthtmlcss
user1752759
user1752759

Reputation: 643

Expanding a DIV with an Unordered List

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

Upvotes: 3

Views: 600

Answers (3)

Ihor Vorotnov
Ihor Vorotnov

Reputation: 1807

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/

Upvotes: 3

methodofaction
methodofaction

Reputation: 72415

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/

Upvotes: 6

Peter
Peter

Reputation: 16943

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

});

Upvotes: 2

Related Questions