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

回答1:

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.

回答2:

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

回答3:

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.

回答4:

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

来源：https://stackoverflow.com/questions/327643/how-to-do-drop-down-box-like-more-action-in-gmail

标签

css

html-select