Créer une liste déroulante en HTML contenant des liens

Vous souhaitez créer une liste déroulant qui redirige vers un fichier ou une page lorsque la sélection est effectuée ? Alors vous êtes au bon endroit. Suivez le guide !

Le code HTML

Vous devez tout d’abord créer une liste déroulante. Au sein de cette liste déroulante, pour chacune des options vous devez renseigner l’url de la page ou du fichier dans l’attribut value.

Un exemple de code HTML :

<select name= »Choix » onChange= »location.href= »+this.options[this.selectedIndex].value+ »; »>
<option>Faire un choix</option>
<option value= »lien 1″>CHOIX 1</option>
<option value= »lien 2″>CHOIX  2</option>
</select>

Mettre en page votre liste déroulante

Pour mettre en page votre liste déroulante avec des liens, vous devez bien entendu utilisez les propriétés CSS. Allez, comme je suis sympa, je vous fournit un exemple :

select {
margin: 0;
padding-left: 15px;
color: #555555;
cursor: pointer;
}
.select {
position: relative;
width: 100%;
height: 45px;
border-radius: 5px;
border: 1px solid #CED4DA;
}

La balle est dans votre camp !

Les requêtes qui ont permis d'accéder à cet article:

• comment ajouter des liens dans une listes déroulante html
• https://jng-web com/labo/creer-une-liste-deroulante-en-html-contenant-des-liens/