How to do drop-down box like "More action" in gmail

Question

I see the "More Action" drop-down box in gmail inbox page. It has levels and some disabled item in the list.

How to do that in HTML+CSS?

Thank you

Answer 1

You want to look into jQuery and the available code that is already out there.

Google jQuery and jQuery Examples and see what you get back. I think you will be happy with the result.

Answer 2

You want an unordered list based popup/drop-down menu.

Answer 3

You can group and disable elements in an HTML <select> element without resorting to the use of JavaScript. Something like the following should work:

<select name="foo">
    <optgroup label="Odds">
        <option value="1">1</option>
        <option value="3">3</option>
        <option value="5">5</option>
    </optgroup>
    <optgroup label="Evens">
        <option value="2">2</option>
        <option value="4">4</option>
        <option value="6" disabled="disabled">6</option>
    </optgroup>
</select>

A brief inspection in Firebug shows that Google are faking their drop-down box with a whole bunch of HTML and some clever CSS. Personally, I think taking the "correct" approach and styling it to look prettier is a lot more readable than reinventing the wheel here.

Answer 4

In response to Rob, the reason not to use disabled is IE.

The reason why this is not a good idea is that IE still does not support this in IE6, IE7 or IE8.

http://webbugtrack.blogspot.com/2007/11/bug-293-cant-disable-options-in-ie.html

Answer 5

Does anyone now how to replicate the drop down menu that gmail uses for labels using jquery?

Thanks