Comment faire une liste déroulante comme "Plus d'action" dans gmail

Question

Je vois le "Plus d'action". liste déroulante dans la page Boîte de réception Gmail. Il a des niveaux et un élément désactivé dans la liste.

Comment faire cela en HTML + CSS?

Merci

Answer 1

Vous pouvez grouper et désactiver des éléments dans un élément HTML < sélectionner > sans recourir à JavaScript. Quelque chose comme ce qui suit devrait fonctionner:

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

Une brève inspection de Firebug montre que Google simule son menu déroulant avec tout un tas de HTML et quelques CSS astucieux. Personnellement, je pense que prendre le "correct" l’approche et l’apparence plus jolies est beaucoup plus lisible que de réinventer la roue.

Autres conseils

En réponse à Rob, la raison de ne pas utiliser désactivé est IE .

La raison pour laquelle ce n’est pas une bonne idée est que IE ne prend toujours pas en charge cette dans IE6, IE7 ou IE8.

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

Je cherche quelque chose de similaire et c'est ma solution. Vous aurez besoin d’icônes pour afficher / masquer, ajouter css et javascript (jquery dans cet exemple). Cela montre / cache un menu mais pourrait être n'importe quoi dans .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 appelant une fonction 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>

ajouter une méthode à la fonction jQuery ou modifier pour ajouter un événement onClick au titre ou créer votre fonction, ou autre chose, voici un exemple avec une fonction 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);

Désolé, je ne peux pas télécharger d'images, mais j'aime le résultat.

Vous souhaitez un menu contextuel / déroulant basé sur une liste non ordonnée.

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow

Liens utiles

Mots clés À propos de nous Contacts Confidentialité

Facebook Instagram

Answer 2

En réponse à Rob, la raison de ne pas utiliser désactivé est IE .

La raison pour laquelle ce n’est pas une bonne idée est que IE ne prend toujours pas en charge cette dans IE6, IE7 ou IE8.

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

Je cherche quelque chose de similaire et c'est ma solution. Vous aurez besoin d’icônes pour afficher / masquer, ajouter css et javascript (jquery dans cet exemple). Cela montre / cache un menu mais pourrait être n'importe quoi dans .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 appelant une fonction 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>

ajouter une méthode à la fonction jQuery ou modifier pour ajouter un événement onClick au titre ou créer votre fonction, ou autre chose, voici un exemple avec une fonction 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);

Désolé, je ne peux pas télécharger d'images, mais j'aime le résultat.

Vous souhaitez un menu contextuel / déroulant basé sur une liste non ordonnée.

Answer 3

En réponse à Rob, la raison de ne pas utiliser désactivé est IE .

La raison pour laquelle ce n’est pas une bonne idée est que IE ne prend toujours pas en charge cette dans IE6, IE7 ou IE8.

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

Answer 4

Je cherche quelque chose de similaire et c'est ma solution. Vous aurez besoin d’icônes pour afficher / masquer, ajouter css et javascript (jquery dans cet exemple). Cela montre / cache un menu mais pourrait être n'importe quoi dans .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 appelant une fonction 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>

ajouter une méthode à la fonction jQuery ou modifier pour ajouter un événement onClick au titre ou créer votre fonction, ou autre chose, voici un exemple avec une fonction 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);

Désolé, je ne peux pas télécharger d'images, mais j'aime le résultat.

Answer 5

Vous souhaitez un menu contextuel / déroulant basé sur une liste non ordonnée.