Everybody wants to be like OSX, including Michael Whalen of Whalesalad.com. With a little creativity, Michael has created a semi-transparent dock that fades down when you mouse over the header of his website. Inside the dock he has links with darker semi-transparent rollovers. The code is fairly simple and relies on Script.aculo.us (prototype.js and effects.js) for the animations. The hardest part of this project according to Michael was getting the dock to fade away when you mouse out of the header area. To get around this, he used timers and some extra divs. Apparently this only works properly in Firefox, so everyone else beware. It's a good technique but hopefully he can expand it such as adding graphics that zoom-in like Google OSX. Full zip of all needed files included at the bottom of Michael's page.Create an auto-hide dock with javascript and CSS
Everybody wants to be like OSX, including Michael Whalen of Whalesalad.com. With a little creativity, Michael has created a semi-transparent dock that fades down when you mouse over the header of his website. Inside the dock he has links with darker semi-transparent rollovers. The code is fairly simple and relies on Script.aculo.us (prototype.js and effects.js) for the animations. The hardest part of this project according to Michael was getting the dock to fade away when you mouse out of the header area. To get around this, he used timers and some extra divs. Apparently this only works properly in Firefox, so everyone else beware. It's a good technique but hopefully he can expand it such as adding graphics that zoom-in like Google OSX. Full zip of all needed files included at the bottom of Michael's page.
