Καταπτώσεις CSS
- Προηγούμενη Σελίδα Οριζόντια Ναυτιλιακή Λωρίδα CSS
- Επόμενη Σελίδα Συλλογή Εικόνων CSS
使用 CSS 创建可悬停的下拉列表。
演示：下拉式案例
Παράδειγμα
请把鼠标指针移动到下面的例子上：
基础的下拉菜单
创建当用户将鼠标移到元素上时出现的下拉框。
Παράδειγμα
<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;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
例子解释：
HTML
使用任何元素打开下拉菜单内容，例如 <span> 或 <button> 元素。
使用容器元素（如 <div>）创建下拉内容，并在其中添加任何内容。
用 <div> 元素包围这些元素，使用 CSS 正确定位下拉内容。
CSS
.dropdown 类使用 position: relative，当我们希望将下拉内容放置在下拉按钮的正下方（使用 position: absolute）时，需要使用该类。
.dropdown-content 类保存实际的下拉菜单内容。默认情况下它是隐藏的，并将在悬停时显示（请看下文）。请注意，min-width 设置为 160px。可随时更改此设置。提示：如果您希望下拉内容的宽度与下拉按钮的宽度一样，请将宽度设置为 100％（设置 overflow: auto 可实现在小屏幕上滚动）。
Χρησιμοποιήσαμε CSS box-shadow παρά τα περιθώρια, ώστε το μενού αναπτυσσόμενο να μοιάζει με μια " κάρτα".
Όταν ο χρήστης μετακινεί το ποντίκι του πάνω στο κουμπί αναπτυσσόμενου:hover Ο επιλογέας χρησιμοποιείται για την εμφάνιση του μενού αναπτυσσόμενου.
Μενού αναπτυσσόμενου
Δημιουργία ενός μενού αναπτυσσόμενου και επιτρέποντας στον χρήστη να επιλέξει μια επιλογή από τη λίστα:
Αυτό το παράδειγμα είναι παρόμοιο με το προηγούμενο παράδειγμα, εκτός αν έχουμε προσθέσει συνδέσμους στο πλαίσιο αναπτυσσόμενου μετονομασίου και τους έχουμε ρυθμίσει με στυλ που ταιριάζει με το στυλ του κουμπιού αναπτυσσόμενου μετονομασίου:
Παράδειγμα
<style>
/* Ορισμός στυλ κουμπιού αναπτυσσόμενου μετονομασίου */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Κουτί <div> - Χρειάζεται να τοποθετηθεί το περιεχόμενο αναπτυσσόμενου μετονομασίου */
.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);
z-index: 1;
}
/* Σύνδεσμοι αναπτυσσόμενου μετονομασίου */
.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>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Σύνδεσμος 1</a>
<a href="#">Σύνδεσμος 2</a>
<a href="#">Σύνδεσμος 3</a>
</div>
</div>
Το περιεχόμενο του μενού πτώσης με δεξιό στίγμα
Αν θέλετε να ανοίξει το μενού πτώσης από τα δεξιά προς τα αριστερά αντί για τα αριστερά προς τα δεξιά, προσθέστε right: 0;:
Παράδειγμα
.dropdown-content {
right: 0;
}
Περισσότερα Παράδειγματα
1 - Εικόνα Πτώσης
Πώς να προσθέσετε εικόνες και άλλο περιεχόμενο στο μενού πτώσης.
Καθίστε τον δείκτη του ποντικιού σας πάνω στην εικόνα:
2 - Μενού Πτώσης
Πώς να προσθέσετε μενού πτώσης στην γραμμή πλοήγησης.
- Προηγούμενη Σελίδα Οριζόντια Ναυτιλιακή Λωρίδα CSS
- Επόμενη Σελίδα Συλλογή Εικόνων CSS
