Create an Animated Share Menu With CSS

by on 18th December 2012 with No Comments

screenshot

Sharing is an integral part of the web experience and designers are always looking for new and interesting ways to highlight or show off the sharing portion of their pages.

Today, we’re going to build a simple sharing menu that integrates an icon font as well as some animations. The final product is inspired by Disqus, but has a unique twist of its own. Let’s jump in and see how it works.

Check out the Final Demo: Click here

Disqus Share Menu

The idea for today’s tutorial comes from the Disqus comment menu that you see at the bottom of this and every other Design Shack article. When someone leaves a comment, you can share that comment via a neat little share menu. By default, it’s simply the word “share”, but when you hover over it, three social icons fly out and become visible. It’s an eye-catching effect that’s really simple to build so I thought it would be fun to walk through it.

screenshot

Step 1. The Icon Font

For this menu, we’ll need at least three social sharing icons. To prevent the scaling issues that you see in the Disqus example above, I’d like these to be vector-based. To pull this off we could go two different ways. The first is to use SVG graphics, which is easy enough. Perhaps an even easier route though is simply to use an icon font.

After some searching, I found Socialico from FontFabric, which is free, has tons of icons and is licensed for embedding on websites.

screenshot

Now, to make sure that we have maximum compatibility for embedding this font into our page, let’s head over to FontSquirrel. This site will allow us to upload a single font file and download a nicely packaged @font-face kit complete with all the different file types and code that we need to embed the font with CSS.

screenshot

After you download the @font-face kit, grab all of the included font files and toss them into your main site directory for this project. If we open up the CSS file that was generated, we find the following code, which we can copy and paste into our own CSS.

/*FONT EMBED*/
@font-face {
  font-family: 'socialicoregular';
  src: url('socialico-webfont.eot');
  src: url('socialico-webfont.eot?#iefix') format('embedded-opentype'),
       url('socialico-webfont.woff') format('woff'),
       url('socialico-webfont.ttf') format('truetype'),
       url('socialico-webfont.svg#socialicoregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

So far so good! We now have an awesome font available to us that will embed infinitely scalable social icons into our page. You have to appreciate that kind of convenience.

Step 1. The HTML

Now it’s time to mark up this sucker. Doing this is extremely easy. First, create a paragraph with a class name of “share”, then type “share” in as the text as well.

<p class="share">share</p>

Next, add three links in after the “share” text. I’ll use the uppercase F, L and S, which translates to Facebook, Twitter and StumbleUpon in our social icon font.

<p class="share">share <a href="#">F</a><a href="#">L</a><a href="#">S</a></p>

That’s it! All we need is this simple markup, we’ll turn to CSS for all of the fancy stuff.

Step 2. Paragraph CSS

The first thing that we’re going to need to style is the paragraph itself. There are a few key things to get right here. First, we need to set the position to relative. This is so later, when we use absolute positioning on the icons, they will stay in the bounds of the paragraph.

Next, we add some margin, padding, dimensions, color and set the font. Note that I’ve made everything super-sized for the purposes of the demo. Feel free to scale all of this down!

* {
  margin: 0;
  padding: 0;
}

/*PARAGRAPH*/
p.share {
  position: relative;
  margin: 50px 0;
  padding-left: 10px;
  width: 440px;
  height: 100px;
  background: #eee;
  font: 100 75px/100px Helvetica, sans-serif;
}

With this chunk of code, here’s what your page should look like. Notice that, at this point, the icons are just letters, this is because we haven’t set the font for the links yet. Let’s take care of that next.

screenshot

Step 3. Paragraph CSS

Now it’s time to code up those anchor tags. Here we’re going to use absolute positioning, which again, resets the position of those links within the bounds of our relatively positioned paragraph. With absolute positioning, we can scoot the items into place with the top and left properties.

/*LINKS*/
.share a {
  position: absolute;
  top: 5px;
  left: 0;
}

Next, let’s take care of the appearance of the links. We want to set the color, text decoration and font. For the font, make sure you use the Socialico font kit that we created in step one.

/*LINKS*/
.share a {
  position: absolute;
  top: 5px;
  left: 0;
  color: #555;
  text-decoration: none;
  font: 75px/100px 'socialicoregular', Helvetica, sans-serif;
}

This code transforms our letters into the social icons that we’re looking for. The problem of course is that they’re all bunched together on the left side.

screenshot

In reality though, this isn’t a problem at all, it’s exactly what we want. Only on hover do we want these to spread out in a nice animated fashion. For now though, we need to make these icons invisible and add in a transition so any changes that occur later will be gradual.

/*LINKS*/
.share a {
  position: absolute;
  top: 5px;
  left: 0;
  color: #555;
  text-decoration: none;
  font: 75px/100px 'socialicoregular', Helvetica, sans-serif;
  opacity: 0;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);

  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
}

Step 4. Basic Hovers

We’ve pretty much got the starting point of our menu all coded up. Now we just need to work up a whole mess of hover states to make all this work. We start with a few basic effects.

The first hover changes the cursor to the pointer even though the word “share” isn’t technically a link. The second brings the opacity back up for our hidden icons. The third changes the color of an icon when the user hovers over it. Because our icons are actually text this is really easy! This would’ve required moving around a sprite or changing the background image if we had used an image-based approach.

/*HOVERS*/
.share:hover {
  cursor: pointer;
}

.share:hover a {
  opacity: 1;
}

.share a:hover {
  color: #00afec;
  font-size: 90px;
}

Step 5. Move the Icons

The next thing that we need to do is move the icons into place when the user hovers over “share”. To do this, we simply use the left property to nudge them over.

The real trick is figuring out how to select and position each link individually. Fortunately, CSS3 has an awesome selector that works perfect here: nth-of-type.

.share:hover a:nth-of-type(1) {
  left: 215px;
}

.share:hover a:nth-of-type(2) {
  left: 256px;
}

.share:hover a:nth-of-type(3) {
  left: 325px;
}

These are complicated selectors so let’s break them down. The first chunk tells the browser that we’re triggering a hover event for the “share” class. Next, use nth-of-type to target the first, second and third anchors, which effectively grabs each of our icons.

Compatibility Warning

One thing to keep in mind, nth-of-type is a level three selector, which means you’re out of luck for IE8 and prior. We can do one of two things to fix this. If you don’t mind a little JavaScript, you can use Selectivizr to add this functionality back to IE6.

If you don’t want to go the JavaScript route, your only option is to add extra markup. In this scenario, each anchor has its own unique class.

<p class="share">share <a class="fb" href="#">F</a><a class="twitter" href="#">L</a><a class="stumble" href="#">S</a></p>

Now in your CSS, you have a unique hook that gets you to each individual icon fairly easily. This solution is definitely much more cluttered than the Selectivizr route, but the lack of JavaScript is a bonus.

.share:hover .fb {
  left: 215px;
}

.share:hover .twitter {
  left: 256px;
}

.share:hover .stumble {
  left: 325px;
}

Step 6. Add More Effects

By default, our icons will slide to the right and fade into existence. If we want to make this effect a little more exciting though, we can turn to CSS transforms and come up with a variety of different results. Here are a bunch of different options to consider, all of which will be showcased in the final demo.

.spin:hover a {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}

.flip:hover a {
  -webkit-transform: rotateX(360deg);
  -moz-transform: rotateX(360deg);
  -o-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  transform: rotateX(360deg);
}

.twirl:hover a {
  -webkit-transform: rotateY(360deg);
  -moz-transform: rotateY(360deg);
  -o-transform: rotateY(360deg);
  -ms-transform: rotateY(360deg);
  transform: rotateY(360deg);
}

.crazy:hover a {
  -webkit-transfor<a href="http://designshack.net/tutorialexamples/sharemenu/index.html"></a>m: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  -moz-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  -o-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  -ms-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}

.grow a {
  -webkit-transform: scale(0.0);
  -moz-transform: scale(0.0);
  -o-transform: scale(0.0);
  -ms-transform: scale(0.0);
  transform: scale(0.0);
}

.grow:hover a {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

See It In Action!

With that, we’re all finished! Follow the link below to view the demo page, then hover over the various menus to see the fruits of our labor.

Demo: Click here

screenshot

Conclusion

Now you have a great animated share menu that you can use to catch some attention on your next project. Leave a comment below and let me know what you think of it and how you would improve it!

Comments & Discussion

No discussion just yet... Get things started!

Leave a Comment

Subscribe
Membership
About the Author