"RT @willfrancis: The ultimate near-miss of 2019."

@ashleyford 1 hour ago

"RT @bendhalpern: Client-side validation"

@ashleyford 7 days ago

Designer and web developer, Co-founder and Technical Director at Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]

How to create a jQuery category drop down


Every couple of weeks I seem to find myself checking 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


And this is what we will be building.


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.


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 () {





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;


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=""><img src="" width="428" height="118"/></a><img src="images/browse.png" id="browse" height="64" width="255"/></div>
<div class="container">
  <div class="content">
    <div class="categories">
        <li><a href="">API's</a></li>
        <li><a href="">PHP</a></li>
        <li><a href="">MySQL</a></li>
        <li><a href="">OAuth</a></li>
        <li><a href="">Memcache</a></li>
        <li><a href="">CSS</a></li>
        <li><a href="">JavaScript</a></li>
        <li><a href="">jQuery</a></li>
        <li><a href="">MooTools</a></li>
        <li><a href="">Mobile</a></li>
        <li><a href="">iPhone</a></li>
        <li><a href="">Web Tools</a></li>
        <li><a href="">Frameworks</a></li>
        <li><a href="">Analytics</a></li>
        <li><a href="">Social Media</a></li>
        <li><a href="">Widgets</a></li>
        <li><a href="">Reviews</a></li>
        <li><a href="">Trends</a></li>
        <li><a href="">Social Networks</a></li>
        <li><a href="">Bookmarking</a></li>
        <li><a href="">Facebook</a></li>
        <div class="clear"></div>
    <div class="top_container">

    <a href=""><img src="images/subscribe.png" class="subscribe" width="957" height="125"/></a>


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

Designer and web developer, Co-founder and Technical Director at Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]

Comments 13
  • Jordan Rzymski
    Posted on

    Jordan Rzymski Jordan Rzymski

    Reply Author

    Is there any way of making this ease out.

  • ออกแบบเว็บไซต์
    Posted on

    ออกแบบเว็บไซต์ ออกแบบเว็บไซต์

    Reply Author

    It is very helpful for me

  • Bill
    Posted on

    Bill Bill

    Reply Author

    Thanks for this! It was the perfect solution for a site that I manage. It was so much easier than what I was doing before.
    If you click on “Applications” on the menu, you’ll see the submenu.

  • ElectiveArticles
    Posted on

    ElectiveArticles ElectiveArticles

    Reply Author

    Its really very helpful.
    Thanks for sharing this :)

  • Sunny
    Posted on

    Sunny Sunny

    Reply Author

    can we use these Jquery Dropdown menus in WordPress…??

  • ออกแบบเว็บไซต์
    Posted on

    ออกแบบเว็บไซต์ ออกแบบเว็บไซต์

    Reply Author

    Thanks for share.
    It is very helpful.

  • David Guzman
    Posted on

    David Guzman David Guzman

    Reply Author

    Amazing article, it really helped me achieve what I wanted on my site, however I am no genious for jquery. I know there is a way to add a timing effect to how fast the div comes out, does anyone have information on this? I just feel on my site the div comes down way to fast. Thanks all!!

  • Jess
    Posted on

    Jess Jess

    Reply Author

    execllent tutorial.. I would also good idea that you might set your CSS code

  • Eko Setiawan
    Posted on

    Eko Setiawan Eko Setiawan

    Reply Author

    We get inspiration to use this, for our next template..
    Thanks for share :)

  • Ross Martin
    Posted on

    Ross Martin Ross Martin

    Reply Author

    The button is deceptive; one expects it to behave like a drop-down list when clicked. I had to click it a few times to figure out what was happening.