Question

I’m not 100% sure how to explain what it is I’m after, but I’ll give it my best shot.

I have a list of possible search “filters”. For the sake of argument, let’s say this is for a computer hardware store. The list of filters looks something like this:

(filters for hard drives, say)

Size -> 2.5"
        3.5"

Connection -> SATA -> SATA
                   -> SATA II
                   -> SATA III
           -> IDE

Capacity -> < 100GB
            < 500 GB
            > 1TB

Something like the above represents the kind of filters I have.

To avoid writing it myself, laziness being a virtue and all, I’m after a plugin that works as follows:

You click on a button which pops up a list of the first set of filters (Size, Connection, Capacity etc) and when you hover over these, it flys out a menu containing the next level (2.5″, 3.5″, for example) and this behaviour will allow for any depth of nesting.

Then, when you click on one of these items, it will add it to a list of “selected” filters, under their parent headings.

I realise that this could be as simple as customising a menu plugin and then building some sort of custom handler that adds the clicked-on items to a list, but I want this “add filter” button to be placed anywhere in the page and be re-positioned etc. If someone adds a filter, I’d like the button to move down underneath the selection ready for the next filter to be chosen (whilst results are displayed in realtime below that).

I know it’s pretty unlikely that this has been built as a plugin already, and various Google searches turned up blank so I thought I’d turn to the vast experience of SO to give me a hand.

Thanks in advance, and if the question needs any clarification, just ask and I’ll do my best to be more specific.

Answer 1

There are several jQuery plugins that do what you want.

Try any of this and tell me if any worked for you:

• jQuery UI Menu and Menubar (it is a work in progress)
• jQuery MacDropdown
• wdContextMenu