Πώς να δημιουργήσετε: Αναπτυσσόμενο μενού

Μάθετε πώς να δημιουργήσετε αναπτυσσόμενα μενού χρησιμοποιώντας CSS.

Δημιουργήστε αναπτυσσόμενο μενού που μπορεί να αναπτυχθεί

Δημιουργήστε ένα αναπτυσσόμενο μενού που εμφανίζεται όταν ο χρήστης μετακινεί το ποντίκι πάνω στο στοιχείο.

Βήμα 1 - Προσθήκη HTML:

<div class="dropup">
  <button class="dropbtn">Αναπτυσσόμενο</button>
  <div class="dropup-content">
    <a href="#">Σύνδεσμος 1</a>
    <a href="#">Σύνδεσμος 2</a>
    <a href="#">Σύνδεσμος 3</a>
  </div>
</div>

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

Μπορείτε να χρησιμοποιήσετε οποιοδήποτε στοιχείο για να ανοίξετε το αναπτυσσόμενο μενού, όπως στοιχεία <button>, <a> ή <p>.

Χρησιμοποιήστε στοιχεία κελούς (όπως <div>) για τη δημιουργία αναπτυσσόμενου μενού και προσθέστε σε αυτό συνδέσμους αναπτυσσόμενου μενού.

Χρησιμοποιήστε το στοιχείο <div> για να περιλαμβάνετε το κουμπί και το <div>, ώστε να χρησιμοποιήσετε σωστά το CSS για τη θέση του αναπτυσσόμενου μενού.

Βήμα 2 - Προσθήκη CSS:

/* Κουμπί με αναπτυσσόμενο μενού */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}
/* Στοιχείο κουτί <div> - Χρησιμοποιείται για τη τοποθέτηση του περιεχομένου του μενού ανασύνασης */
.dropup {
  position: relative;
  display: inline-block;
}
/* Περιεχόμενο του μενού ανασύνασης (προεπιλεγμένα κρυμμένο) */
.dropup-content {
  display: none;
  position: absolute;
  bottom: 50px;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Σύνδεσμοι στο μενού ανασύνασης */
.dropup-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Μεταβάλλτε το χρώμα του συνδέσμου όταν το ποντίκι είναι ανασηκωμένο */
.dropup-content a:hover {background-color: #ddd}
/* Εμφανίζεται το μενού ανασύνασης όταν το ποντίκι είναι ανασηκωμένο */
.dropup:hover .dropup-content {
  display: block;
}
/* Μεταβάλλτε το χρώμα του φόντου του κουμπιού ανασύνασης όταν το περιεχόμενο του μενού ανασύνασης εμφανίζεται */
.dropup:hover .dropbtn {
  background-color: #2980B9;
}

Προσπαθήστε το προσωπικά

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

Ρυθμίζουμε τους στυλ φόντου, περιθωρίου κ.λπ. για το κουμπί ανασύνασης.

.dropup κλάση position:relativeόταν θέλουμε να τοποθετήσουμε το περιεχόμενο του μενού ανασύνασης πάνω από το κουμπί ανασύνασης (χρησιμοποιώντας position:absolute），είναι απαραίτητο.

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

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

:hover Ο επιλογέας χρησιμοποιείται για να εμφανίζει το μενού pull-down όταν ο χρήστης επιλέγει το κουμπί pull-down