Как сделать выпадающий список типа «Дополнительные действия» в Gmail

Question

Я вижу раскрывающееся окно «Дополнительные действия» на странице входящих сообщений Gmail. В списке есть уровни и некоторые отключенные элементы.

Как это сделать в HTML + CSS?

Спасибо

Answer 1

Я искал что-то подобное, и это мое решение. Вам понадобятся значки, чтобы показать / скрыть, добавить CSS и JavaScript (в этом примере jquery). Он показывает / скрывает меню, но может быть чем угодно внутри .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, который вызывает функцию jquery:

<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>

добавить метод в функцию jquery или отредактировать, чтобы добавить событие onClick в заголовок или создать свою функцию, или что-то еще, это пример с функцией jquery 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);

Извините, я не могу загрузить изображения, но мне нравится результат.

Answer 2

В ответ Робу причина не использовать отключена равна IE .

Причина, по которой это не очень хорошая идея, заключается в том, что IE по-прежнему не поддерживает этот в IE6, IE7 или IE8.

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

Answer 3

Вы можете группировать и отключать элементы в элементе HTML <select>, не прибегая к использованию JavaScript. Должно работать что-то вроде следующего:

<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>

Краткий осмотр в Firebug показывает, что Google подделывает свой выпадающий список с целым набором HTML и некоторыми умными CSS. Лично я считаю, что использование «правильного» подхода и придание ему более привлекательного вида гораздо более читабельно, чем изобретать велосипед здесь.

Answer 4

Требуется всплывающее / раскрывающееся меню с неупорядоченным списком.