CODEWITHSUNDEEP
javascriptnavigationyuisliding-window
Vinay Jeurkar
Vinay Jeurkar

Reputation: 3122

How to create animated sliding windows/tabs menu?

I have created navigation menu in YUI 2.8 as below :

Sliding windows menu

I have also animated tabs using CSS transitions. CSS transitions are not widely supported by browsers and my animations are not working in Opera, IE etc.
Since i'm already using YUI 2.8 on that page, can somebody tell me how do i animate those tabs?
When i click on any tab, it should expand in vertical dimension smoothly (animated).
Below are the properties of tabs which are going to change when i select any tab (Below properties of tabs should be animated) :

Please note in above image :

Upvotes: 0

Views: 1211

Answers (1)

slebetman
slebetman

Reputation: 113906

YUI has a nice Anim utility that you can use and is cross browser. The code to implement animations is quite simple with YUI Anim since it handles most calculations you need for the transition. An example in your case would be:

var tab1_open = new YAHOO.util.ColorAnim('tab1', {
  padding : {to: 20},
  marginLeft : {from: 0, to: 30},
  marginTop : {from: 0, to 30},
  backgroundColor : {from: '#999', to: '#cecece'},
  borderColor : {to: '#000'}
}, 0.5);

Then to start the animation simply call:

tab1_open.animate();

Upvotes: 1

Related Questions