如何创建:可悬停的下拉菜单
- Προηγούμενη σελίδα Σύστημα πλοήγησης σε εικόνες
- Επόμενη σελίδα Κλικ στο παραθυράκι
学习如何使用 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
- Προηγούμενη σελίδα Σύστημα πλοήγησης σε εικόνες
- Επόμενη σελίδα Κλικ στο παραθυράκι