Home & blog  /  2010  /  Jul  /  view post  /

jQuery drop-down selector

posted: 11 Jul '10 13:09 tags: select, drop-down, navigation

UI / UX developers have long wished the built-in <select> was a little more tangible, rather than a bunch of options that have no meaning until you set up some Javascript to detect and act on their selection.

Dropdown is a simulation of the in-built <select>, except with links, not options, and allowing you to specify the behaviour of each link (callback? disabled?) and precisely how the drop-down looks.

Head over here to download, get usage info or view a demo.

You call it by running dropdown(linkData), where 'linkData' is an array containing objects that hold data about each link, like so:

1dropdown([

2     {url: 'http://www.yahoo.co.uk', text: 'Yahoo!'],

3     {text: 'Bing', click: function() {

4         alert("Sorry - we're not going to Bing right now");

5     }},

6     {url: 'http://www.google.co.uk', text: 'Google', disabled: true}

7]);

As with everything I write, it's just one file. No dependent HTML or CSS - everything's DOM-scripted by the scirpt and styled within it, too.

post new comment

Comments (0)