I have been working on a menu display that is similar (but not exactly the same) as the Popout Menu provided in the Interactions example.
I am impressed by the fact that the button changes when it is pressed, but I am more impressed by the fact that not only does the popout menu disappear when you click on the button again, but the button changes back to its original appearance! I like the fact that the states of the menu and the button toggle when you click the button.
I have created a button with a similar animation, but even after reading the (somewhat lean) documentation for interactions, and looking at the timeline for the Popout Menu interaction, I do not understand how that button was made to toggle the way it does.
There is no “toggle” animation that I can find, and there are no tutorials (that I know of) that tell how to get an element to toggle states when clicked. All I see when I look at the Popout Exampletimeline are some creation, setting, and removing of a class called menu-toggle-open (which doesn’t really help me because this class, which is not defined in any CSS file that I can access, is inaccessible to me). I more or less understand the other operations being performed, including how the actual menu is popping out and being made to pop back in. What I do not see is how (a) the menu is made to toggle between doing the popout operation and the pop- back- in operation, and (b) how the button is being made to toggle between its appearance when the menu pops out and its reversion to its previous appearance when the menu pops back in.
Can someone either provide some information on how to make elements toggle as they do in the example, or point me to some documentation or a tutorial that shows how to do this toggling?
