Maintenant créons un menu de navigation attractif! 2. Ajoutez CSS. Maintenant quand nous allons la première moitié de notre code, ajoutons des styles à lui. À l'aide des propriétés CSS, on peut créer un menu déroulant. Définissez la largeur et la hauteur du menu avec les propriétés width et height. Définissez z-index pour s'assurer que le menu de navigation soit placé au sommet d'autres éléments. De plus, définissez la couleur de tout le menu avec la propriété color. Création d’un menu déroulant en HTML et CSS - Pierre Giraud. Vous pouvez choisir les couleurs de notre outil Pipette de couleur. #wrap {
width: 100%;
height: 50px;
margin: 0;
z-index: 99;
position: relative;
background-color: #444444;}
Définissez la position à "absolute" pour que notre menus déroulant ne tirent pas d'autres éléments vers le bas. {
padding: 0;
position: absolute;}
Alignez les éléments de notre menu horizontalement en haut de la page en définissant la propriété float à "left". li {
height: auto;
width: 135. 8px;
float: left;
text-align: center;
list-style: none;
font: normal bold 13px / 1em Arial, Verdana, Helvetica;
Stylisez la reste des balises d'ancrage.
Une des tentatives les plus proches est celui proposé sur Fairy Tells:
(Mais 1. ça n'est pas parfait et 2. c'est lourd à mettre en place... ) Diti a écrit: cependant je la trouve lourde
Ce tutoriel est un mourant en phase terminale, effectivement. Diti a écrit: Auriez-vous dans un recoin de votre disque dur une astuce pour réaliser un beau menu déroulant simple? Non... ça ne pourra pas prendre la forme d'une « astuce », d'ailleurs, ça ne peut qu'être plus compliqué. Par contre, j'ai dans mes marque-pages une astuce pour choisir de ne pas utiliser de menu déroulant: article - L'accessibilité des menus de navigation en cascade. Menu déroulant vertical – FrogWeb. Voir aussi sur le forum: Accessibilité menu déroulant. Plus globalement, on peut rappeler:
- qu'un menu déroulant non fonctionnel au clavier mais dont les titres de rubrique sont des liens vers une page de rubrique permettant d'accéder aux pages ou articles ou sous-rubriques... c'est déjà limiter la casse;
- que bien souvent il n'est pas nécessaire d'utiliser un menu déroulant, et que la réflexion sur « comment puis-je organiser la navigation pour rendre l'information claire et facilement accessible sans système compliqué comme un menu déroulant » est généralement bénéfique pour l'ergonomie d'un site.
Le texte placé dans le contenu ne se se déplace pas avec le déroulement des sous-menus car les sous-menus sont en position absolute. L'opacité des arrières plans a ul été réduite à 0.