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.

Exemple de menu déroulant

Menu déroulant de base

Quand la souris se déplace vers l'endroit spécifié. Lorsque sur un élément, un menu déroulant apparaît.

Instance

<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例|php中文网(runoob.com)</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);
  padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<h2>鼠标移动后出现下拉菜单</h2>
<p>将鼠标移动到指定元素上就能看到下拉菜单。</p>

<div class="dropdown">
  <span>鼠标移动到我这！</span>
  <div class="dropdown-content">
    <p>php 中文网</p>
    <p>www.php.cn</p>
  </div>
</div>

</body>
</html>

Exécuter l'instance»

Cliquez sur « Exécuter Bouton "Exemple" pour visualiser des exemples en ligne

Exemple d'analyse

Partie HTML :

On peut utiliser n'importe quel élément HTM pour ouvrir le drop -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 :

.dropdown la classe utilise position:relative, qui définira le contenu du menu déroulant à placer dans le coin inférieur droit de le bouton déroulant (en utilisant position:absolute) Emplacement. Dans la classe

.dropdown-content se trouve le menu déroulant actuel. 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 de 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, définissez width sur 100 % (le paramètre overflow:auto peut défiler sur un petit écran tailles).

Nous utilisons l'attribut box-shadow pour faire ressembler la liste déroulante à une "carte". Le sélecteur

:hover permet d'afficher un 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 :

Cet exemple est similaire à l'exemple précédent lorsque nous avons ajouté un lien à la liste déroulante et défini le style :

. Exemple

<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例|php中文网</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.runoob.com">php.cn 1</a>
    <a href="http://www.runoob.com">php.cn 2</a>
    <a href="http://www.runoob.com">php.cn 3</a>
  </div>
</div>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Alignement du contenu déroulant

Instance

<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例|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.cn 1</a>
    <a href="#">php.cn 2</a>
    <a href="#">php.cn 3</a>
  </div>
</div>

<div class="dropdown" style="float:right;">
  <button class="dropbtn">右</button>
  <div class="dropdown-content">
    <a href="#">php.cn 1</a>
    <a href="#">php.cn 2</a>
    <a href="#">php.cn 3</a>
  </div>
</div>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher le instance en ligne

Plus d'exemples

Exemple : liste déroulante d'images

<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例</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>

<h2>下拉图片</h2>
<p>移动鼠标到图片上显示下拉内容。</p>

<div class="dropdown">
  <img src="https://img.php.cn/upload/article/000/000/015/5c6a73f219783131.png" alt="Trolltunga Norway" width="100" height="50">
  <div class="dropdown-content">
    <img src="https://img.php.cn/upload/article/000/000/015/5c6a73f219783131.png" alt="Trolltunga Norway" width="400" height="200">
    <div class="desc">学的不仅是技术，更是梦想！</div>
  </div>
</div>

</body>
</html>

Exécuter l'instance ?

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Cette instance montre comment ajouter des images dans le menu déroulant.

Instance : liste déroulante de la barre de navigation

<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例</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="#home">主页</a></li>
  <li><a href="#news">新闻</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>

<h3>导航栏上的下拉菜单</h3>
<p>鼠标移动到 "下拉菜单" 链接先显示下拉菜单。</p>

</body>
</html>

Exécuter l'instance ?

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Cet exemple montre comment ajouter un menu déroulant à la barre de navigation.

Menu déroulant CSS