Use your left/right keys to browse tutorials
How to create a jQuery category drop down

How to create a jQuery category drop down

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on January 31, 2010

Every couple of weeks I seem to find myself checking 9rules.com to see if they’re accepting new submissions as I’d like to submit this site. Any how on this occasion I couldn’t help but notice the browse by community section at the top of the page. Clicking the button reveals a section that contains a list of category names. I thought this would be a good example to base this post on, and to show how simple it is to achieve this effect. I’ve approached this tutorial slightly differently and design a mock homepage for a website to show exactly how to implement such a technique.

Here is the ‘Browse Community’ button found on 9Rules.com

browse

And this is what we will be building.

cats

The design and UX

It’s important to question your decision when choosing to position an important interactive element within a web page. Does it really need to be there? Does the design detract from other important page content? What’s so useful about an element like this is that it actually doesn’t take up any extra real estate on your page other than the button itself, so instead of having one banner at the top of the page that i always there we can add another layer of information onto the site. You can see below that I’ve take two screenshots of the demo page and layered them removing one section so you can see that the space for the banner section just under the header is effectively used twice, when you browse the categories the rest of the page is shifted down to reveal the list, so we’re not loosing valuable page space with a list.

cross-diff

9Rules have opted for a simple show and hide effect which works just fine for this module. I guess it was designed like this because it is both simple and functional, the user isn’t delayed or bombarded by fancy sliding effects etc.

The JavaScript

I’ve covered this effect in the past and I’m sure you hardcore jQueryers will be more than familiar with this simple JavaScript. We will of course need to include the jQuery framework which you can get from Google.

Below we have our onDOM ready function which is executed once the users web browser has loaded the HTML code into their browser, this doesn’t include images or flash just the main page structure. Once this function is run we then have an event handler or event listener as they’re also known, in our case the event is a click. So the second line on the code below is set to listen for a user clicking on the element with an id of ‘browse’, which is our browse categories image. So once the .click event listener is triggered it does whatever is within the brackets or function, in our case we’re toggling the div with the list of categories. and because we’re not passing anything into the toggle function i.e a duration the categories div is just set to show an hide.

$("document").ready(function () {

    $('#browse').click(function(){

	 $('.categories').toggle();

		});

	});

You’ll notice if you download the HTML code that I’ve used some CSS3 techniques to achieve the rounded corners on the boxes and the slight drop shadows. I’ve set the .categories div to display:none; when the page loads, this is
so the user has to click browse to see it, however you could leave it visible and allow the user to hide it simply by changing this to display:block;

The HTML

This is just a snippet of the HTML code as the code is quite long for the demo page.

<div class="head">
  <div class="main"><a href="http://papermashup.com"><img src="http://papermashup.com/wp-content/themes/arthemia/images/logo.png" width="428" height="118"/></a><img src="images/browse.png" id="browse" height="64" width="255"/></div>
</div>
<div class="container">
  <div class="content">
    <div class="categories">
      <ul>
        <li><a href="http://papermashup.com/category/api/">API's</a></li>
        <li><a href="http://papermashup.com/category/php/">PHP</a></li>
        <li><a href="http://papermashup.com/category/mysql/">MySQL</a></li>
        <li><a href="http://papermashup.com/category/oauth/">OAuth</a></li>
        <li><a href="http://papermashup.com/category/memcache/">Memcache</a></li>
        <li><a href="http://papermashup.com/category/css/">CSS</a></li>
        <li><a href="http://papermashup.com/category/api/javascript">JavaScript</a></li>
        <li><a href="http://papermashup.com/category/jquery/">jQuery</a></li>
        <li><a href="http://papermashup.com/category/mootools/">MooTools</a></li>
        <li><a href="http://papermashup.com/category/mobile/">Mobile</a></li>
        <li><a href="http://papermashup.com/category/iphone/">iPhone</a></li>
        <li><a href="http://papermashup.com/category/web-tools/">Web Tools</a></li>
        <li><a href="http://papermashup.com/category/frameworks/">Frameworks</a></li>
        <li><a href="http://papermashup.com/category/analytics/">Analytics</a></li>
        <li><a href="http://papermashup.com/category/social-media/">Social Media</a></li>
        <li><a href="http://papermashup.com/category/widgets/">Widgets</a></li>
        <li><a href="http://papermashup.com/category/reviews/">Reviews</a></li>
        <li><a href="http://papermashup.com/category/trends/">Trends</a></li>
        <li><a href="http://papermashup.com/category/social-networks/">Social Networks</a></li>
        <li><a href="http://papermashup.com/category/social-bookmarking/">Bookmarking</a></li>
        <li><a href="http://papermashup.com/category/facebook/">Facebook</a></li>
        <div class="clear"></div>
      </ul>
    </div>
    <div class="top_container">

    <a href="http://feeds2.feedburner.com/AshleyFord-Papermashupcom"><img src="images/subscribe.png" class="subscribe" width="957" height="125"/></a>

    </div>

This tutorial is aimed at beginners who are starting out with jQuery, I hope that It shows you how easy it is to add simple effects to your site.

demo download



More tutorials from Papermashup
Comments
13 discussions around How to create a jQuery category drop down
Older Comments
  1. Pingback: jQuery Menu Tutorials, jquery tutorial

  2. Is there any way of making this ease out.

Older Comments




Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.
Subscribe
OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.
Subscribe

Get in contact

Please use the form below to get in contact. If your question is related to a free script download, please use the comments on the article page as community members are more likely to respond quicker than I can personally.

About Me

I'm Ashley Ford, Co-founder and Technical Director at Harkable.com London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.



What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on Papermashup.com please get in touch via the contact link below for advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.