如何创建:可悬停的下拉菜单

学习如何使用 CSS 创建可悬停的下拉菜单。

下拉菜单

下拉菜单是一种可切换的菜单,允许用户从预定义列表中选择一个值:

Δοκιμάστε προσωπικά

创建可悬停的下拉菜单

创建一个下拉菜单,当用户将鼠标移动到元素上时显示该菜单。

第一步 - 添加 HTML:

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Παράδειγμα εξήγησης:

使用任何元素打开下拉菜单,例如 <button>、<a> 或 <p> 元素。

使用容器元素(如 <div>)创建下拉菜单,并在其中添加下拉菜单链接。

使用 <div> 元素将按钮和 <div> 包装起来,以便使用 CSS 正确定位下拉菜单。

第二步 - 添加 CSS:

/* 下拉按钮 */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}
/* 容器<div> - 用于定位下拉菜单内容 */
.dropdown {
  position: relative;
  display: inline-block;
}
/* Περιεχόμενο αναπτυσσόμενης (προεπιλεγμένα κρυφή) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Σύνδεσμοι εντός της λίστας αναπτυσσόμενης */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Αλλαγή χρώματος του συνδέσμου της λίστας αναπτυσσόμενης όταν κάνει mouseover */
.dropdown-content a:hover {background-color: #ddd;}
/* Εμφάνιση της λίστας αναπτυσσόμενης όταν κάνει mouseover */
.dropdown:hover .dropdown-content {display: block;}
/* Αλλαγή χρώματος φόντου του κουμπιού αναπτυσσόμενης όταν εμφανίζεται το περιεχόμενο */
.dropdown:hover .dropbtn {background-color: #3e8e41;}

Δοκιμάστε προσωπικά

Παράδειγμα εξήγησης:

Έχουμε ρυθμίσει τη στυλ του κουμπιού της λίστας αναπτυσσόμενης με χρώμα φόντου, περιθώρια κ.λπ.

.dropdown κλάση position:relative, όταν θέλουμε να τοποθετήσουμε το περιεχόμενο της λίστας αναπτυσσόμενης ακριβώς κάτω από το κουμπί της λίστας αναπτυσσόμενης (χρησιμοποιώντας position:absolute),είναι απαραίτητο.

.dropdown-content Η κλάση περιέχει την πραγματική λίστα αναπτυσσόμενης. Είναι προεπιλεγμένα κρυφή και θα εμφανιστεί όταν ο χρήστης κάνει mouseover (βλέπε παρακάτω). Λάβετε υπόψη ότι ο ελάχιστος πλάτος είναι ρυθμισμένος σε 160px. Μπορείτε να αλλάξετε αυτή τη ρύθμιση. Σuggestion: Αν θέλετε το πλάτος του περιεχομένου της λίστας αναπτυσσόμενης να είναι ίσο με το πλάτος του κουμπιού, ρυθμίστε το πλάτος σε 100%(και ρυθμίστε overflow:auto για να ενεργοποιήσουμε τη κύλιση σε μικρά οθόνες).

Δεν χρησιμοποιούμε τα σύνορα, αλλά χρησιμοποιούμε box-shadow Η ιδιότητα χρησιμοποιείται για να κάνει τη λίστα αναπτυσσόμενης να φαίνεται σαν ένα 'χαρτί'. Επίσης χρησιμοποιούμε z-index Τοποθετήστε τη λίστα αναπτυσσόμενης μπροστά από άλλα στοιχεία.

:hover Ο επιλογέας χρησιμοποιείται για να εμφανίσει τη λίστα αναπτυσσόμενης όταν ο χρήστης μετακινεί το ποντίκι του πάνω στο κουμπί της λίστας αναπτυσσόμενης.

Αριστερά δεξιωμένη αναπτυσσόμενη λίστα

Δοκιμάστε προσωπικά

Η αναπτυσσόμενη λίστα στη γραμμή πλοήγησης

Δοκιμάστε προσωπικά

Σελίδες σχετικές

Εκμάθηση:Παραθυράκι CSS

Εκμάθηση:Πώς να δημιουργηθεί κλικ στο παραθυράκι