Learn How To Create a CSS3 Animated Flyout Social Menu

THIS POST MAY CONTAIN AFFILIATE LINKS. PLEASE READ DISCLOSURE FOR MORE INFO.

What We’ll Be Creating

Creating The Buttons In Photoshop

Create a new (Ctrl + N) document in photoshop with a blank white canvas. Select the “Rectangular Marquee Tool” then create 4 small rectangles.

Working from the top downwards starting with the twitter colors add the following layer styles.

You should have something like this.

The next square will be facebook. Add the following layer styles to the 2nd square.

You should have something like this.

The next square will be a custom icon especially for photoshop plus. Add the following layer styles to the 3rd square.

You should have something like this.

Finally the last square will be RSS feeds. Add the following layer styles to the last square.

You should have something like this.

Adding The Icons

Add each icon into the center of each square then add a drop shadow to each icon using the following settings.

Once each icon has the styles added you should have something like this.

Adding The Fly Out Content

Create a rectangle underneath each icon big enough to fit the text you will be putting next to the icons. Fill the rectangles with a similar color to the icon in which the square will fly out. Once the rectangles have been created add the text into each of the rectangles using the “Type Tool” (T). You should have something like this.

Your now ready to dive into some CSS3.

Creating The Button Sprite

Before we start coding up the menu let’s first create our sprite. Hide all the layers for your icons a part from the square and the icon.

Move each icon on top of each other in a vertical row making sure there are no empty pixels in between each icon and that none of the icons are overlapping in any way.

Select the “Rectangular Marquee Tool” (M) then draw a marquee around the icons leaving no empty pixels.

From the menu select “Edit > Copy Merged”, then “File > New”, then finally “Edit > Paste”. Save the image as a PNG inside a folder on your desktop.

Setting Up The HTML Document

Create a blank HTML document along with a blank CSS document then save them inside the same folder you saved your image in. Link the stylesheet inside of your HTML document.

[code type=html]
[/code]

Lets talk a bit about the menu. The menu is made up of an unordered list, within the unordered list there is a span tag which will be the hidden element of the menu. Each Anchor tag has a class which is the name of that particular button. The code looks like this.

Thats as complex as the HTML gets in this tutorial, sorry to disappoint you.

The CSS

The menu takes advantage of CSS3 transitions, the only downfall to this is that the menu will only animated in a webkit supported browser. Support for the CSS attributes used will be supported by other browsers soon. It will still work in other browsers, it just won’t fly out in style. We’ll start by styling the unordered list.

First we default our list items by removing the default list bullets. The bottom margin will add 10 pixels between each list item.

We then style the Anchor tags by setting the background to that of our sprite image which we created in photoshop. We then set each anchor tag to display as a block and position it relative to its container. Each icon has a fixed width and height, this can be found out by measuring the icons in photoshop (Each icon should be exactly the same dimensions).

We now need to style the span tags which sit inside the unordered list. Each span tag should be hidden at first so we set the width to “0” and give it an overflow of hidde, we then set the position of the span tab absolutly left 38 pixels. The 38 pixels is simply the width of the icon so the span tag starts the right side of the icon. The CSS3 property “-webkit-transition” is a shorthand property for setting the four transition properties into a single property. The rest of the CSS rules are styling for the text which sits inside of the span tag.

Finally we style span tag in the event of hovering over an anchor tag. In the previous styles we hideen the span tag, so now on a mouse hover we want it to be visable with a width which will automatically set itself to the width of the content inside.

Styling The Icons

Each Anchor tag had its own class for the icon which will be displayed in that list item, because the icons are all on one image we simply just need to change the background position of the image. We can then apply different styles to the span tags depending on what icon is hovered over.

Conclusion

Thanks for taking part in this tutorial, if you managed to finish this tutorial I’d love to see some of your results. Feel free to post them up on our Facebook Fan Page Or Tweet them via twitter @photoshop_plus.

Wilma Hamlin is a creative designer & writer. She writes for Crayonify. Being a designer as well she use to create amazing designs using many tools. In her lesuire time she love to read books and tries to learn new designs.

ok, disregard my previous question, I have figured out something here. I have scaled down the icon-sprite.png to 38px and now it all but almost fits.. check out the image below with the settings I’m using…
Thank you for your help.https://s016.radikal.ru/i336/1206/85/fdb5a1c2963d.jpg