Simple Slide Out Content

This is a super simple CSS example (backed up with just enough JS to show it off), but its still fun. I have a requirement for a specific animation - the team wanted the panel to slide open, but the content to already be there, at normal size in the panel, and they wanted that content to be attached to the side that was sliding.

Nothing fancy. The only real trick is the float-right so that the content is attached to the right side. I could also have looked at something where the content had a negative margin and the that animated so it slid in, or translatedY so it moved in, but that wasn't necessary for this solution.

 

Comments

thesis writing service's Gravatar Your writing skill is amazing because only some writers can lead the readers with them and show what secrets are hidden in human minds, hats off and cheers.
Kamela's Gravatar Wow its an amazing and new trick to do a simple CSS. I wanna say thanks to you for sharing such informative article. Do share such tricks and tips to increase our skills of CSS. I would like to suggest you why don't you start writing CSS blogs? it will leads you towards more success.
Rearclume1962's Gravatar I read your article in detail and I additionally observe the data that about Adolf Hitler. I acknowledge with you that you posting an issue on here and examine about this issues but https://aussiessayservices.com/au-edusson-com-revi... website share well task. I have bookmarked your blog and looked through every one of the things that you partook in it.
Jon Hartmann, July 2011

I'm Jon Hartmann and I'm a Javascript fanatic, UX/UI evangelist and former ColdFusion master. I blog about mysterious error messages, user interface design questions, and all things baffling and irksome about programming for the web.

Learn more about me.

Post a job. Find one. authenticjobs.com

Interested in becoming a sponsor? Contact me.