Question

Je recherche un menu JavaScript déroulant.

Ce devrait être le menu accessible le plus simple et le plus élégant qui fonctionne également dans IE6 et Firefox 2. Ce serait bien si cela fonctionnait sur une liste non numérotée ( ul ) afin que l'utilisateur puisse utiliser la page sans la prise en charge de JavaScript.

Lequel recommandez-vous et où puis-je trouver le code d'un tel menu?

Était-ce utile?

La solution

Je pense que le menu Jquery Superfish est fantastique et facile à utiliser:

http://users.tpg.com.au/j_birch/plugins/superfish /

Javascript n'est pas nécessaire et il est basé sur de simples listes valables et non ordonnées.

Autres conseils

Une liste à part - Des menus déroulants

J'utiliserais une solution CSS uniquement, comme ci-dessus, pour que l'utilisateur obtienne toujours des menus déroulants, même si javascript est désactivé.

Voici ma réponse à l'aide de jQuery:


jQuery.fn.ddnav = function() {
        this.wrap("");
        this.each(function() {
                var sel = document.createElement('select');
                jQuery(this).find("li.label, li a").each(function() {
                        jQuery("<option>").val(this.href ? this.href : '').html(jQuery(this).html()).appendTo(sel);
                });
                jQuery(this).hide().after(sel);
        });
        this.parent().find("select").after("<input type=\"button\" value=\"Go\">");
        var callback = function(button) {
                var url = jQuery(button.target).parent("div").find("select").val();
                if(url.length)
                        window.open(url, "_self")
        };
        this.parent().find("input[type='button']").click(callback);
        this.parent().find("select").change(callback);
        return this;
};

Et ensuite, dans votre gestionnaire précédent:


  $("ul.dropdown_nav").ddnav();

Mais je tiens à souligner que ceux-ci sont terribles pour la facilité d'utilisation. Mieux vaut utiliser une liste et montrer aux utilisateurs toutes les options en même temps, et il est préférable de ne pas quitter la liste après une sélection et / ou d’exiger que vous appuyiez sur un bouton différent pour aller où vous le souhaitez.

Je pense que vous avez intérêt à ne jamais utiliser ce qui précède (et j'ai écrit le code!)

Pour le puriste:   http://www.grc.com/menudemo.htm Absolument pas de JavaScript, pur-css uniquement - et fonctionne avec pratiquement tous les navigateurs.

Un petit ajustement peut les rendre aussi beaux que les menus sophistiqués (jQuery, etc.)

Mais nous avons également utilisé jQuery, YUI! et d'autres. YUI! dispose d'excellentes options d'accessibilité intégrées, si cela est nécessaire pour les menus JavaScript.

- Andrew

J'utilise celui-ci:

http://www.tanfa.co.uk/css /examples/menu/vs7.asp

Existe en versions verticale et horizontale.

J'aime les accordéon de Stickman, qui, en fonction de votre comportement, peuvent être intéressants. effet.

Je suis un fan (décontenancé) de Yahoo! Bibliothèque d'interface utilisateur. Ils ont un bon système de barre de menus facile à mettre en œuvre . Excellent support multi-navigateurs.

Vous pouvez probablement obtenir quelque chose de similaire avec les autres frameworks Javascript populaires, tels que jQuery.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top