CSS3: Hulu Sliding TV Menu

I was browsing Hulu a few days ago, and I saw that they have this small TV Menu section with up and down sliding of TV shows. The first thing I thought to myself was: hmm, can I make this in CSS3 using webkit transition? So I decided to look up how other people utilize CSS3 to achieve animation effect without the use of JavaScript. I found Neal Grosskopf’s Create a JQuery Content Slider Using Pure CSS. Based on the same logic he describes in that article, I was hopeful that I could create a Hulu-like TV Menu using pure CSS3.

The final product should look close to this screenshot.

Using :target and CSS3 webkit transition, I was able to re-create a sliding TV menu that works very similar to Hulu’s, without the help of JavaScript.


Best view in browsers that support webkit transition. Demo was tested in Chrome 11 and Safari 5.0