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

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

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 2

I'v been searching for something similar and this is my solution. You'll need icons to show/hide, add css and javascript (jquery in this example). It show/hide a menu but could be anything inside .hide div.
css:
.shortasc { background: url("/css/asc.gif") no-repeat 50% 50%;cursor:pointer;}
.shortdesc { background: url("/css/desc.gif") no-repeat 50% 50%;cursor:pointer;}
.hide{ display:none;}
.toggle-menu .title {
text-align:left;
}
.toggle-menu div.more{
position: absolute;
border:#999999 1px solid;
background-color:#FFFFFF;
}
.toggle-menu div.more ul{margin:0; padding:2px; text-align:left;}
.toggle-menu div.more ul li{list-style:none; padding:2px; border:#CCCCCC 1px solid;}
html wich call to a jquery function:
<span class="toggle-menu">
<span class="title" onclick="$(this).win('togglewin');">titulo del menu</span><span class="orden shortasc"> </span>
<div class="more hide">
<ul>
<li>Enlace 1</li>
<li>Enlace 2</li>
<li>and so on</li>
</ul>
</div>
</span>
add method to jquery function or edit to add onClick event in title or create your function, or whatever, this is an example with an jquery function http://docs.jquery.com/Plugins/Authoring#Getting_Started:
(function($) {
var methods={
//... your functions
togglewin:function(){
var p = $(this).position();
var parent = (this).closest('.toggle-menu');
if(parent.find('.more').is(':visible')){
parent.find('.orden').removeClass('shortdesc').addClass('shortasc');
parent.find('.more').slideUp();
}else{
parent.find('.orden').removeClass('shortasc').addClass('shortdesc');
parent.find('.more').slideDown().offset( { top:p.top+12,left:p.left } );
}
return this;
}
};
$.fn.win = function(method) {
if ( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' inexistente en jQuery.win' );
}
}
})(jQuery);
Sorry, I can't upload images, but I like the result.

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

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