Menu déroulant CSS
Menu déroulant CSS
Utilisez CSS pour créer un effet qui affiche un menu déroulant lorsque la souris est déplacée vers le haut.
Menu déroulant de base
Lorsque la souris se déplace sur l'élément spécifié, un menu déroulant apparaîtra.
Instance
<!DOCTYPE html>
<html>
<head>
<title> PHP中文网（php.cn）</title>
<meta charset="utf-8">
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgb(83, 251, 185);
padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<span>鼠标移动到我这！</span>
<div class="dropdown-content">
<p> PHP中文网（php.cn）</p>
<p>www.php.cn</p>
</div>
</div>
</body>
</html>Exécutez le programme et essayez-le
Analyse d'instance
Partie HTML :
Nous pouvons utiliser n'importe quel élément HTM pour ouvrir le menu déroulant, tel que : <span>, ou un élément <button>.
Utilisez des éléments conteneurs (tels que <div>) pour créer le contenu du menu déroulant et placez-le où vous le souhaitez.
Utilisez l'élément <div> pour envelopper ces éléments et utilisez CSS pour styliser le contenu de la liste déroulante.
Partie CSS : La classe
.dropdown utilise position:relative, qui définira le contenu du menu déroulant à placer dans le coin inférieur droit du bouton déroulant ( en utilisant position:absolu). La classe
.dropdown-content est le véritable menu déroulant. Il est masqué par défaut et sera affiché une fois que la souris se déplacera vers l'élément spécifié. Notez que la valeur min-width est définie sur 160px. Vous pouvez le modifier à votre guise. Remarque : Si vous souhaitez que le contenu de la liste déroulante soit cohérent avec la largeur du bouton déroulant, vous pouvez définir la largeur sur 100 % (le paramètre overflow:auto peut faire défiler les petites tailles d'écran).
Nous utilisons l'attribut box-shadow pour faire ressembler le menu déroulant à une "carte".
: le sélecteur de survol permet d'afficher le menu déroulant lorsque l'utilisateur déplace la souris sur le bouton déroulant.
Menu déroulant
Créez un menu déroulant et permettez aux utilisateurs de sélectionner un élément dans la liste. Nous avons ajouté un lien vers la liste déroulante et défini le style :
<!DOCTYPE html>
<html>
<head>
<title>PHP中文网(php.cn)</title>
<meta charset="utf-8">
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>下拉菜单</h2>
<p>鼠标移动到按钮上打开下拉菜单。</p>
<div class="dropdown">
<button class="dropbtn">下拉菜单</button>
<div class="dropdown-content">
<a href="http://www.php.cn">PHP中文网 1</a>
<a href="http://www.php.cn">PHP中文网 2</a>
<a href="http://www.php.cn">PHP中文网 </a>
</div>
</div>
</body>
</html>Exécutez le programme pour l'essayer
Alignement du contenu déroulant
gauche float:left;
right float:right;
Instance
<!DOCTYPE html>
<html>
<head>
<title>PHP中文网(php.cn)</title>
<meta charset="utf-8">
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>下拉内容的对齐方式</h2>
<p>left 和 right 属性指定了下拉内容是从左到右或从右到左。</p>
<div class="dropdown" style="float:left;">
<button class="dropbtn">左</button>
<div class="dropdown-content" style="left:0;">
<a href="#">PHP中文网 1</a>
<a href="#">PHP中文网 2</a>
<a href="#">PHP中文网 3</a>
</div>
</div>
<div class="dropdown" style="float:right;">
<button class="dropbtn">右</button>
<div class="dropdown-content">
<a href="#">PHP中文网 1</a>
<a href="#">PHP中文网 2</a>
<a href="#">PHP中文网 3</a>
</div>
</div>
</body>
</html>Exécutez le programme et donnez-le un essai
Plus d'exemples
Cet exemple montre comment ajouter un menu déroulant à la barre de navigation.
<!DOCTYPE html>
<html>
<head>
<title>PHP中文网(php.cn)</title>
<meta charset="utf-8">
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #111;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="">主页</a></li>
<li><a href="">新闻</a></li>
<div class="dropdown">
<a href="#" class="dropbtn">下拉菜单</a>
<div class="dropdown-content">
<a href="#">链接 1</a>
<a href="#">链接 2</a>
<a href="#">链接 3</a>
</div>
</div>
</ul>
<p>鼠标移动到 "下拉菜单" 链接先显示下拉菜单。</p>
</body>
</html>Exécutez le programme et essayez-le
Exemple
Comment ajouter une image dans le drop -menu bas.
<!DOCTYPE html>
<html>
<head>
<title>PHP中文网（php.cn）</title>
<meta charset="utf-8">
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown:hover .dropdown-content {
display: block;
}
.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<p>移动鼠标到图片上显示下拉内容。</p>
<div class="dropdown">
<img src="https://img.php.cn/upload/course/000/000/006/580837363b987802.jpg" alt="Trolltunga Norway" width="100" height="50">
<div class="dropdown-content">
<img src="https://img.php.cn/upload/course/000/000/006/580837363b987802.jpg" alt="Trolltunga Norway" width="400" height="200">
<div class="desc">PHP中文网（php.cn）</div>
</div>
</div>
</body>
</html>Exécutez le programme et essayez-le
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
