Sliding Doors Contact Display

I’ve been asked a few times how to replicate the expandable social media contacts effect from my contact info on the home page.

It’s a nice effect provided by jQuery and jQuery UI with some CSS bits.

The container for each icon is set to overflow:hidden with a default size of 32px – the same size as the social media icon.

This allows the expansion on hover to happen smoothly with element clipping instead of word-wrap or scrollbars.

While it could be packaged up to be more modular and slick, i’ve put it up as a commented demo here

An important part of this simple script which is often overlooked is the “.stop()” call. This helps halt the current animations and stops the jumpy effect you get when multiple slide animations are “queued”.

For this example I’ve used the icons from here: http://theg-force.deviantart.com/art/Social-Icons-hand-drawned-109467069