Learn How To Create a CSS3 Animated Flyout Social Menu

In today’s tutorial we’ll be getting our hands dirty with some CSS3. I’ll be showing you how to create your very own animated fly out social menu.

In Blog, HTML & CSS

What We’ll Be Creating

Learn How To Create a CSS3 Animated Flyout Social Menu

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.

Learn How To Create a CSS3 Animated Flyout Social Menu

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

Learn How To Create a CSS3 Animated Flyout Social Menu

Learn How To Create a CSS3 Animated Flyout Social Menu

You should have something like this.

Learn How To Create a CSS3 Animated Flyout Social Menu

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

Learn How To Create a CSS3 Animated Flyout Social Menu

Learn How To Create a CSS3 Animated Flyout Social Menu

You should have something like this.

Learn How To Create a CSS3 Animated Flyout Social Menu

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

Learn How To Create a CSS3 Animated Flyout Social Menu

Learn How To Create a CSS3 Animated Flyout Social Menu

You should have something like this.

Learn How To Create a CSS3 Animated Flyout Social Menu

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

Learn How To Create a CSS3 Animated Flyout Social Menu

Learn How To Create a CSS3 Animated Flyout Social Menu

You should have something like this.

Learn How To Create a CSS3 Animated Flyout Social Menu

Adding The Icons

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

Learn How To Create a CSS3 Animated Flyout Social Menu

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

Learn How To Create a CSS3 Animated Flyout Social Menu

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.

Learn How To Create a CSS3 Animated Flyout Social Menu

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.

Learn How To Create a CSS3 Animated Flyout Social Menu

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.

Learn How To Create a CSS3 Animated Flyout Social Menu

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

Learn How To Create a CSS3 Animated Flyout Social Menu

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.

1
<link rel="stylesheet" type="text/css" href="styles.css" />

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<ul id="social-menu">
<!------ Twitter Button Starts ------>
<li>
<a class="twitter" href="https://twitter.com/#!/photoshop_plus"> <span>5628 Followers</span> </a>
</li>
<!------ Twitter Button Ends ------> 


<!------ Facebook Button Starts ------>    
<li>
<a class="facebook" href="http://www.facebook.com/ps.plus"> <span>1500 Fans</span> </a>
</li>
<!------ Facebook Button Ends ------>    


<!------ Photoshop Plus Button Starts ------>   
<li>
<a class="ps" href="http://www.photoshop-plus.co.uk/category/photoshop-tutorials/"> <span>120 Tutorials</span> </a>
</li>
<!------ Photoshop Plus Button Ends ------>  


<!------ RSS Button Starts ------>    
<li>
<a class="rss" href="http://feeds.feedburner.com/photoshopplus"> <span>350 Subscribers</span> </a>
</li>
<!------ RSS Button Ends ------>  
</ul>

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.

1
2
3
4
#social-menu li {
    list-style: none;
    margin-bottom:10px;
}

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).

1
2
3
4
5
6
7
#social-menu a {
    background: url('icon-sprite.png') no-repeat;
    height: 39px;
    width: 38px;
    display: block;
    position: relative;
}

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#social-menu span {
    width: 0;
    left: 38px;
    padding: 0;
    position: absolute;
    overflow: hidden;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: -1px;
    white-space: nowrap;
    line-height: 39px;
    -webkit-transition: 0.25s;
    -moz-transition: 0.25s;
    transition: 0.25s;
}

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.

1
2
3
4
5
#social-menu a:hover span {
    width: auto;
    padding: 0 20px;
    overflow: visible;
}

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/* TWITTER BUTTON STYLES -------
------------------------------*/
#social-menu .twitter {
    background-position: left top;
}
#social-menu .twitter span {
    background-color: #00aced;
    color: #fff;
}
/* FACEBOOK BUTTON STYLES ------
------------------------------*/
#social-menu .facebook {
    background-position: left -39px;
}
#social-menu .facebook span {
    background-color: #325396;
    color: #fff;
}
/* PHOTOSHOP PLUS BUTTON STYLES 
------------------------------*/
#social-menu .ps {
    background-position: left -78px;
}
#social-menu .ps span {
    background-color: #1f75bf;
    color: #fff;
}
/* RSS BUTTON STYLES -----------
------------------------------*/
#social-menu .rss {
    background-position: left bottom;
}
#social-menu .rss span {
    background-color: #f5a33f;
    color: #fff;
}

Save your file and give it whirl.

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.

Learn How To Create a CSS3 Animated Flyout Social Menu


Purchase Psd Now

  1. June 20, 2012 at 8:32 AM

    Great : )

  2. June 22, 2012 at 4:04 PM

    Good tutorial,
    but i can’t figure out how to properly align the sprite image onto the buttons itself. I only chose to work with 3 buttons. I’m thinking that is the reason? Example can be seen here…
    http://s017.radikal.ru/i415/1206/4d/122f35f984c2.jpg

  3. June 22, 2012 at 4:30 PM

    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.
    http://s016.radikal.ru/i336/1206/85/fdb5a1c2963d.jpg

  4. Wilma Hamlin
    June 22, 2012 at 6:22 PM

    No need to scale the images down… just make sure the width and height of each button is set inside the “#social-menu a” then make the “#social-menu span” “left” atrribute equal to the width.

    each button should be set to 38px x 39px if you are following my tutorial correctly… if your still having trouble ping me an email with your files and i will take alook at your code.

  5. serge
    June 25, 2012 at 3:46 PM

    Thanks for the reply. I was actually able to finish it successfully. The only thing that I’ve done was re-position the buttons and it worked perfectly. Thank you for a great tutorial!

  6. Blake
    June 28, 2012 at 2:34 PM

    I’ve been looking for a very simple example of using image sprites with CSS. Thanks for the write-up!

  7. June 30, 2012 at 3:01 PM

    Good tutorial

  8. December 8, 2012 at 5:02 PM

    very goood. tnx

Give Us Your Feedback

Here on Photoshop Plus we use something called Gravatar, its a little image which will appear next to your name when you comment on a blog. Using a gravatar will help us recognise genuine comments from the spam comments.


Don't forget to leave a comment on this post, we appreciated your feedback good or bad.

There's currently 8 Comments On Learn How To Create a CSS3 Animated Flyout Social Menu, why not add yours!

Leave a Reply

Your email address will not be published. Required fields are marked *

Auto Scroll To The Top
css.php