Design and code an elegant social media menu for your portfolio site

13,972 designers received our email newsletter last week. Click here to sign up for free.

Lately, here at GDB, we have been learning a lot about one-page portfolios. We started off this miniseries with a great list of essential elements of a successful one-page portfolio, then we explored 8 excellent jQuery tutorials to help you build a nice portfolio page. Today, I would like to offer a tutorial on building an elegant jQuery social media menu for your portfolio site.

Why a social media menu tutorial?

WHY A TUTORIAL?
Before getting started with the tutorial, it’s important to understand why I’ve chosen to write a tutorial dealing with social media here at GDB. If you’ve been to the site before, you know that we focus primarily on the business of design (freelancing, business tips, client advice, etc.). So why did I stray from the beaten path and attempt a tutorial today? Two reasons: I want to change it up a bit (which is a decent reason, right?) and I also feel like some solid and tangible application to the principles we learn here at GDB can be beneficial for all of us.

In any regard, please let me know what you think about this tutorial and if we should try to incorporate things like this into the GDB writing schedule in the future. Our goal is to help you grow as a designer and a businessperson, so please let us know the best way to help you do that.

WHY SOCIAL MEDIA?
With that explanation out of the way, let’s explore the reasons why every designer should include some sort of social media menu on their portfolio site. Firstly, social media allows potential clients, fellow designers, and potential employers to be able to contact you, learn more about you, and see you in your element. By making yourself available via social media, you not only make yourself more personable and more approachable, but you also help your clients connect with you and your design work on a more intimate level. Imagine, for example, a portfolio that contains a selection of completed, polished work. Imagine the additional insight your clients can gain into your design process and professionalism by viewing your work on dribbble. Imagine how conforte they will feel when they see you are reading and sharing up-to-date information about design techniques on twitter and facebook.

Social media isn’t new. And I don’t have to tell you how important it is. As you work to market yourself as a designer (whether you prefer the freelance route or run a design firm) you can’t disregard the importance that social media plays in your marketing mix.

On to the tutorial!

With that said, let’s move forward with this tutorial. Before reading through the entire tutorial, you can get an idea of what we are trying to achieve by viewing this LIVE DEMO. Or you can take the easy way out by downloading the SOURCE FILES. The following is a screen shot of our final product:

WORKING IN PHOTOSHOP
Before we start to implement the HTML, CSS, or jQuery animation, we need to set up a few small things in photoshop. They won’t take too long and they’re fairly simple, but it’s the attention to detail that make this menu so elegant.

First, open a new photoshop document that measures 400 pixels in both directions. Using the paint bucket, fill the entire canvas with a light grey color. Any color will do, but the lighter the better as it will help with the contrast later on. (I used #e0e0e0)

After filling the canvas with a light grey hue, access the main menu and choose Filter > Noise > Add Noise. Set the amount to 1.5% and click OK. Save the image in your images folder. This will give you a nice, subtle texture for the background of your page.

Next, we need to design the speech-bubble-like object that floats in when the social media icons are hovered. While we could do this using CSS3 rounded corners and CSS triangles, I have decided to use a simple image since the size of each speech bubble will be uniform throughout the example and such a small image will not take long to load. Feel free to use more advanced technologies as you like.

Create a new document that measures 200 pixels wide by 98 pixels high. Just inside the canvas area, use the Rounded Rectangle Tool to draw a black rectangle with rounded corners. Remember to leave enough room below the rectangle for the “tail” of the speech bubble. Next, using the default Rectangle Tool, draw a black square by holding shift and dragging. Rotate the square to create a diamond and then overlap the diamond halfway with the rounded rectangle. Click both the rounded rectangle and the diamond in the layers palette, right click and choose “merge layers”. This will give you a solid black speech bubble.

I, however, wanted the texture to show through the speech bubble slightly, so I reduced the opacity of the speech bubble to 60%, hid the default white canvas background and saved the image as a transparent png. Lastly, find and download your favorite social media icons. Save them in your images folder as well.

We now have all the images we need in order to design our elegant social media bar.

XHTML, CSS, AND JQUERY
Now to the fun and exciting part of the tutorial: Making your social media menu a living reality. Start by opening dreamweaver (or your preferred code editing software) and open a new HTML document. Save the document in your root folder. Normally, we would also save an independent CSS file and link to it from the HTML page, but for ease of demonstration, we will write the CSS within the HTML page itself.

START WITH XHTML
Within the <body> tags create a <div> with the ID of “smbar”. Within the div, create an unordered list followed by a number of list items which contain images that link to each social media site you wish to include. After each link, include a <em> tag that contains the text you wish to appear above each image (this will be the text found within the speech bubble and will not be displayed unless the icon is hovered). Once you are finished, your code should look something like this:

<div id=”smbar”>
<ul>
<li><a href=”#”><img src=”images/facebook.png” alt=”facebook” /></a><em>Friend me on facebook</em></li>

<li><a href=”#”><img src=”images/twitter.png” alt=”twitter” /></a><em>Follow me on twitter</em></li>
<li><a href=”#”><img src=”images/foursquare.png” alt=”foursquare” /></a><em>Join me on foursquare</em></li>
<li><a href=”#”><img src=”images/youtube.png” alt=”youtube” /></a><em>Watch me on YouTube</em></li>
<li><a href=”#”><img src=”images/stumbleupon.png” alt=”stumbleupon” /></a><em>Join me on StumbleUpon</em></li>
<li><a href=”#”><img src=”images/flickr.png” alt=”flickr” /></a><em>View my photos on Flickr</em></li>
<li><a href=”#”><img src=”images/dribbble.png” alt=”dribbble” /></a><em>Check out my work on Dribble</em></li>
</ul>
</div>

ADD SOME CSS
Next, you’ll want to add come CSS to make your unordered list look pretty. Right now, it’s probably vertically oriented with some bullet points. To make your menu bullet-free and horizontal, add the following CSS to your page (or link to an external style sheet):

<style type=”text/css”>
body {
background: #CCC url(images/bg.jpg);
font-family:Verdana, Geneva, sans-serif;
}

#smbar {
width:900px;
margin:200px auto 0px auto;
}

#smbar ul {
margin:0px;
padding:0px;
text-indent:0px;
display:block;
height:50px;
width:400px;
margin-left:auto;
margin-right:auto;
text-align:center;
}

#smbar ul li {
float:left;
margin:0 2px;
padding:0;
position:relative;
text-align:center;
list-style:none;
display:inherit;
}

#smbar ul li a {
display:block;
float:left;
margin-right:20px;
}

#smbar ul li a img {
outline:none;
border:0px;
}

#smbar em {
display:none;
font-style:normal;
height:68px;
left:-85px;
padding:20px 12px 10px;
position:absolute;
text-align:center;
top:-130px;
width:176px;
z-index:2;
background:url(images/hover.png) no-repeat;
color:#fff;
font-family:Verdana, Geneva, sans-serif;
text-transform:uppercase;

}

</style>

JQUERY
Lastly, add some jQuery to spice things up a bit. Open a new javascript file and paste in the information from the jQuery library found here. Save the javascript file to your root folder and include a call to the library in your HTML page by including the following code in the <head> of the HTML document.

<script type=”text/javascript” src=”jquery.js”></script>

Lastly, include these piece of jQuery animation code:

<script type=”text/javascript”>
$(document).ready(function(){

$(“#smbar a”).hover(function() {
$(this).next(“em”).animate({opacity: “show”, top: “-110″}, “slow”);
}, function() {
$(this).next(“em”).animate({opacity: “hide”, top: “-130″}, “fast”);
});

});
</script>

The code found above was adapted from the menu hover tutorial by WebDesignerWall.com mentioned in the previous article here at GDB.

Success!

If you’ve done everything right, you should have a fully functional, elegant social media menu for your portfolio site. It will make a great addition to any one-page website portfolio.

Your input is needed…talk to us

Being the first tutorial-style article here at GDB, we really need to know if you found it useful. Please leave a comment letting us know what you liked, what you didn’t like, and what we can do better next time. Should we write more tutorials or stick to articles? Also, share your links with us when you get a social media menu up and running on your site! We’d love to take a look at what you’ve done!

Like what you've read?

Subscribe to our M,W,F newsletter packed with awesome content just like this. We'll also throw in a free ebook just for signing up. Enter your email below. Download will begin immediately.

About Preston D Lee

Preston is a web designer, entrepreneur, and the founder of this blog. @prestondlee

Comments

  1. Nice! Now if I could only use that dribbble icon…. good work Preston!

  2. Thank you, very help-full one.

  3. This is awesome Preston, thanks!

    The only thing I had a problem with was the animation gets stuck in a loop if you mouse-over any of the items too quickly in succession.

    If I remember rightly, there’s a .stop command in jQuery, isn’t there? To stop the animation if/when a mouse leaves the focus area?

  4. Thanks for the tutorial, we will try to apply it to one of our free themes.. :)

  5. Amazing tutorial, very helpful! I will retweet.

  6. Thank you, very nice

Join the conversation

*