A jQuery-powered social dropdown menu
- February 20, 2010
- Javascript & AJAX
- jQuery
- Tutorials
When David Walsh posted his article on using jQuery's sliding effect for use in FAQs, I was once again reminded of the beauty of jQuery in its simplicty. I thought I'd take it a step further and show how it could be used for a static dropdown menu for your site/blog's social media links.
As David's tutorial outlines, it's a matter of applying a slide effect to display a DIV when th H3 handler is clicked. I won't break it down here for the sake of saving you time but you can view his tut and demo if you wish.
Features @ a glance
- Flexibility for you to add as many items as you wish (although how many social networks could you possibly be registered with? Wait...don't answer that).
- The menu remains locked to the top-right of your page as you vertically scroll, for added accessibility (although this feature it does not work in IE6).
- A dash of CSS3 dropshadow effect adds a little extra dimension to the display (not visible in IE).
- Amaze your dog, your cat or your neighbor's goldfish with yet another menu script you probably don't need.
I've tested it across browsers but, as mentioned, there are some positioning issues with IE6.
The XHTML markup:
<!-- BEGIN SOCIAL MENU DEMO --> <div id="MySocialMenu"> <h3>My Social Links</h3> <!-- THIS IS THE HIDDEN LIST THAT SLIDES IN ON CLICK --> <div id="SocialMenu"> <ul> <li class="rss"><a href="#" title="Subscribe to my feed">Subscribe RSS</a></li> <li class="twitter"><a href="#" title="Follow me on Twitter">Twitter</a></li> <li class="buzz"><a href="#" title="Come see what the buzz is about">Google Buzz</a></li> <li class="facebook"><a href="#" title="Let's connect on Facebook">Facebook</a></li> <li class="flickr"><a href="#" title="Peruse my Flickr gallery">Flickr</a></li> </ul> </div> </div> <!-- END SOCIAL MENU DEMO -->
The jQuery:
//David's script with a change to the DIV ID
$(document).ready(function() {
$('#MySocialMenu h3').each(function() {
var tis = $(this), state = false, answer = tis.next('div').hide().css('height','auto').slideUp();
tis.click(function() {
state = !state;
answer.slideToggle(state);
tis.toggleClass('active',state);
});
});
});
Pretty it up with some CSS:
#MySocialMenu {
position: fixed;
top: 20px;
right: 20px;
width: 220px;
min-height: 20px;
margin: 0;
background: #222;
cursor: pointer;
border: 3px solid #666;
/* OPTIONAL CSS3 DROPSHADOW */
-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
#MySocialMenu h3 {
display: block;
font-size: 1.2em;
font-weight: bold;
line-height: 20px;
color: #fff;
margin: 0;
padding: 15px 0 15px 40px;
background: url(../img/toggle-arrow.gif) no-repeat; /* SPRITE TO REDUCE IMAGE NEEDS*/
}
#MySocialMenu h3.active {
color: #ff0084;
background: url(../img/toggle-arrow.gif) 0px -50px no-repeat; /* SPRITE TO REDUCE IMAGE NEEDS*/
}
/* THIS IS THE HIDDEN MENU */
#SocialMenu {
height: 0;
}
#SocialMenu ul {
margin: -7px 0 7px 0;
padding: 0 20px;
list-style: none;
}
#SocialMenu ul li {
font-size: 1.0em;
line-height: 36px;
margin: 0;
padding: 7px 0 7px 40px; /* LEFT PADDING ACCOUNTS FOR THE ICONS */
}
#SocialMenu ul li a {
display: block;
color: #fff;
text-decoration: none;
}
#SocialMenu ul li a:hover {
color: #999;
text-decoration: none;
}
/* ADDS ICONS TO EACH LIST ITEM */
#SocialMenu ul li.rss {
background: url(../img/rss.png) left no-repeat;
}
#SocialMenu ul li.twitter {
background: url(../img/twitter.png) left no-repeat;
}
#SocialMenu ul li.buzz {
background: url(../img/google.png) left no-repeat;
}
#SocialMenu ul li.facebook {
background: url(../img/facebook.png) left no-repeat;
}
#SocialMenu ul li.flickr {
background: url(../img/flickr.png) left no-repeat;
}
This method shows just how versatile jQuery is. There are many other ways you can use this approach for navigation and content display. Play with it on your own and see what you can come up with.
Stay well.
0 
249 
Is this compatible with the latest version of jQuery 1.4?
Posted: February 20, 2010
You betcha! I use <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> in the demo.
Posted: February 20, 2010