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

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

Answers


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.


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


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">&nbsp;&nbsp;&nbsp;</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.


Need Your Help

NHibernate 3.1 Linq with Contains and Any

linq nhibernate

We are in the process of upgrading to NH3.1 which is going well -

C# unit testing number precision questions

c# visual-studio-2008 unit-testing

I am testing basic math functions that'll return its mean/variance/standard deviation. The problem I am facing is that I cannot get the precision of "expected value" to math what is returned by the

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.