Maison > Article > interface Web > Comment créer un menu déroulant HTML ? Comment implémenter le menu déroulant HTML
Comment créer un menu déroulant HTML ? Comment implémenter le menu déroulant HTML
- 不言original
- 2018-10-19 11:42:1521480parcourir
Lors de la navigation sur des sites Web, nous pouvons souvent voir l'effet des menus déroulants, donc les menus déroulants doivent parfois être utilisés lors du développement de pages Web. L'article d'aujourd'hui partagera avec vous la mise en œuvre des menus déroulants HTML. .Méthode, les amis dans le besoin peuvent s'y référer.
Sans plus tard, passons directement au texte~
Il existe une balise select en HTML qui peut créer des menus à sélection unique et multi-sélection. L'attribut option dans la balise select est. utilisé pour définir la liste des options disponibles dans .
Jetons un coup d'oeil au code spécifique du menu déroulant html :
<html> <body> <form> <select name="cars"> <option value="city">城市</option> <option value="hefei">合肥</option> <option value="wuhu">芜湖</option> <option value="nanjing">南京</option> <option value="gaoyou">高邮</option> </select> </form> </body> </html>
L'effet du menu déroulant html est comme suit :
Pour expliquer ici : l'élément select est un contrôle de formulaire qui peut être utilisé pour accepter la saisie de l'utilisateur dans un formulaire.
Le menu déroulant HTML ci-dessus semble trop monotone. Ensuite, nous examinerons l'utilisation de CSS pour implémenter un menu déroulant plus esthétique.
html+css implémenté code du menu déroulant :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.a{
width: 200px;
}
.b{
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
background: lightblue;
font-size: 30px;
}
.c{
height: 200px;
width: 100px;
display: none;
background: gray;
}
.b:hover{
background: green;
cursor: pointer;
}
.a:hover .c{
display: block;
}
a{
display: block;
text-decoration: none;
height: 40px;
text-align: center;
line-height: 40px;
color: #ccc;
}
a:hover{
background: green;
color: pink;
}
</style>
</head>
<body>
<div class="a">
<div class="b">城市</div>
<div class="c">
<a href="#">合肥</a>
<a href="#">南京</a>
<a href="#">芜湖</a>
<a href="#">高邮</a>
<a href="#">上海</a>
</div>
</div>
</body>
</html>L'effet du menu déroulant est le suivant :
Explication : Dans le code ci-dessus, le sélecteur :hover est utilisé pour afficher le menu déroulant lorsque l'utilisateur déplace la souris sur le bouton déroulant.
Cet article se termine ici. Pour un contenu plus passionnant, vous pouvez faire attention aux colonnes pertinentes du site Web php chinois ! ! !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!