Comment créer un menu en HTML sans utiliser Javascript?

StackOverflow https://stackoverflow.com/questions/233251

  •  04-07-2019
  •  | 
  •  

Question

Depuis de nombreuses années, les normes des interfaces graphiques sont les barres de menu des applications dans lesquelles des menus apparaissent, si vous cliquez ou survolez une entrée de la barre de menus. Certains sites Web implémentent également cette fonctionnalité, mais ils utilisent le langage Javascript, à ma connaissance. Pour différentes raisons, Javascript peut être un problème, ainsi la question est-elle possible: est-il possible de le mettre en œuvre sans utiliser Javascript, uniquement avec HTML et CSS?

Était-ce utile?

La solution

J'ai déjà fait quelque chose comme ça auparavant, et c'est une astuce obtenue en plaçant les éléments de menu dans des balises d'ancrage, avec des sous-menus dans des div cachés À L'INTÉRIEUR de ces balises d'ancrage. L'astuce CSS consiste à faire apparaître la division interne lors de l'événement a: hover.

Cela ressemble à quelque chose comme: 

<style>
    A DIV { display: none; }
    A:hover DIV { display: block; }
</style>
<a href="blah.htm">
    Top Level Menu Text
    <div><ul>
        <li><a href="sub1.htm">Sub Item 1</a></li>
        <li><a href="sub2.htm">Sub Item 2</a></li>
        <li><a href="sub3.htm">Sub Item 3</a></li>
    </ul></div>
</a>

Votre kilométrage peut varier ...

EDIT: Internet Explorer 6 et les versions antérieures NE prennent PAS en charge la pseudo-classe: hover sur d'autres éléments que A. Dans les navigateurs plus "modernes", il est accepté de pouvoir utiliser cette astuce avec LI, TD, DIV, SPAN. et la plupart des balises.

Autres conseils

La technique la plus connue est les menus suckerfish . La recherche de cela donnera beaucoup de menus intéressants. JavaScript n’a besoin que de javascript dans IE6 et inférieur.

Voici une liste des menus des menus de suckerfish.

Pensez à utiliser les méthodes CSS comme une sauvegarde lorsque JavaScript n'est pas disponible. JavaScript peut * offrir une meilleure expérience utilisateur pour les menus déroulants, car vous pouvez ajouter des facteurs de retard pour que les menus ne disparaissent pas immédiatement si la souris quitte brièvement leur zone de survol. Les menus purs en CSS peuvent parfois être un peu difficiles à utiliser, surtout si les cibles de survol sont petites.

*: bien sûr, tous les scripts de menus ne se donnent pas la peine de le faire ...

Vous pouvez utiliser la pseudo-classe: survol pour obtenir un effet de survol. 

a:link {
 color: blue;
}

a:hover {
  color: red;
}

Je peux donner un exemple plus complet mais pas pour le moment (nécessité d'amener les enfants chez le dentiste).

Il existe également un article original de Eric Meyer sur Menus CSS purs .

Il y aura forcément des prises beaucoup plus robustes et modernes que d'autres ont mentionnées, mais je pensais que je le mentionnerais pour la postérité. :)

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