How To Create A Social Media JQuery Navigation Menu

Article Published: Monday, November 30th, 2009 at 11:10 pm | Subscribe

I’m pretty particular when it comes to details in web design.  I pretty much check things down to the pixel and try my best to make sure everything works cross platform.  I recently had a Social Media bar in my footer that consisted of standard social icons (YouTube, Twitter, Facebook and Linked In), where on mouse hover the icons would turn to color, or “Glow”.  Being that I have come to love the JQuery library I wanted to spice up my footer Social Bar Icons but I had a hard time finding a JQuery plugin or script that I could quickly apply to my already styled list elements, so I just created my own.

Here’s a demo of  how this tutorial should turn out when you’re done, at the end of the document you can also download the code and images, courtesy of michael-louviere.com:

First lets take a look at the icons and how I have them layed out in the CSS And XHTML:

The red line indicates a div positioned relative to the #footer and is floated right, this part isn’t too important for you, the most important part is how you will position your social media icons as list items.

As you can see, I have highlighted the icon list items in gray. Now lets look at the XHTML and get a visual of how each item is layed out.

Here you can see that we have all four social media links structured in an unordered list. Each link is nested inside a “list item” and each link has a class assigned to it, for example, the twitter icon that is linked to my twitter page has a class of “twitter” IE: class=”twitter” and so on, you get the idea. You will see later on that I have each icon image styled out as a link using CSS and the corresponding classes.  Also please take note of the anchor text (red outline), notice how it is nested in a “span” tag. Remember this when we get to the CSS portion.

Now for the most important stuff.  How do we get those icons from pure text links in a list item, to actual images that change to colored images when you hover over them with the mouse?  Well this is where it gets fun! Lets take a look at the CSS code to figure out exactly what makes this work so well and also be XHTML valid.As you can see above, I have each anchor element styled with a class name corresponding to the service IE: Facebook. So, being that the facebook XHTML link looks like class=”facebook” the CSS selector used to style that element is a.facebook.  The width and height properties are relative to the image size you will be using for your icon images, so take note of those, write them down, and make sure each icon image is the same width and height.  You also want to make sure you are using display:block as they are block level elements. The most important part of these styles is the float property, if you fail to float each list item then each icon will appear on a separate line.  Also please note, not visible in the code screenshot is a property on the parent “ul” selector called “list-style-type: none”, this is also vital because if you don’t set this to none, each icon will have a bullet next to it as a standard list item. This code should look like this: ul {list-style-type: none;}, if you have added a class to the list item be sure to declare this in your style.  Remember how I said take note of the “span” tags inside the XHTML code for your links?  Well  we are going to add display:none to each link class span tags, this is because we don’t actually want to see the text links themselves when we view the page, as we are using images to take place for the links.  The hover event is quite simple, you will use the same display property as the static image links and the widths and heights should be the same, unless you wish to use different size images for your hover classes, in that event make sure your layout supports this.

At this point you should be able to visit your page, hover over each Social Media icon and it will take you directly to that corresponding page, if you want add target=”_blank” to each of your hyper links to open them in a new window.  If something doesn’t appear right, go back and make sure your parent div element is wide enough to house all four icons, and be sure to include any padding and margins when you do your math.  If all of that adds up, double check your image widths, display property and float property in your CSS.

At this point I was happy, but I wanted to add a little more zip to my Social Media links.  I Wanted to do a cool JQuery fade in on each icon hover over, to the average visitor this probably isn’t even noticeable, but like I said.. I’m a pixel perfectionist. To get the JQuery fade in affect, lets look at my JQuery functions, but first make sure you have the JQuery library included in the head of your HTML document(s). This should look something like this:

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

Now let’s take a look at the actual JQuery that will create a transition fade in effect on your social media icons.

Again, simply by using the class names for each element, we can control it’s behavior in JQuery, I could have used ID (#) Instead of class, but in case I wanted to use these multiple times in a document I wouldn’t have validation issues.  What you can’t see in the screen-shot image is the document ready function, if you are inexperienced with Javascript or JQuery I suggest reading a quick tutorial on them.  In any case, all four of your JQuery functions should be nested in code that looks like this $(document).ready (function() { *insert functions here* });.  I am only showing two of the main functions in this snippet, but essentially they are all the same the only thing that changes is the class names.  I initially created a hover function on the linked in class, every method in this function will execute when the mouse hovers over an anchor element with the class named “linkedin” hense the “a.linkedin“.  The first method I want to do is hide the a.linkedin element, in real terms this will hide the LinkedIn icon. The next method executes the :hover style with a fadeIn effect, the argument I’ve passed is 500, which is in milliseconds, which is the amount of time the fadeIn will last.  The next method detects when the mouse leaves the a.linkedin element and shows the initial icon again, this is a bug fix that fixes disappearing icons when you move the mouse over each list item faster than 500 milliseconds.  That’s it, that will create a fadeIn effect for each Social Media icon when you hover over them.  I know, it’s a little much for creating a little effect, but it’s fun none the less, and you don’t need a JQuery plugin to get it to work.

Don’t want to have to write all this code and create the icons? That’s ok! I’ve made it easy for you.  Simply download the Social Media pack, Included is the XHTML, CSS and JQuery code as well as each Social Media icon and rollover icons, courtesy of ELLO!

Article Posted Under: Articles, Development, Featured, Home Page Post, Programming