Οδηγός αναπτυσσόμενου CSS: Πώς να φτιάξετε ένα αναπτυσσόμενο μενού στο CSS

Τι είναι τα Dropdowns;

Τα αναπτυσσόμενα μενού χρησιμοποιούνται στο CSS για να αποκρύψουν μια προκαθορισμένη λίστα μέσα σε ένα κουμπί.

Παραδείγματα:

 Name One Two Three 

Τότε θα πρέπει να προσαρμόσετε τα μαθήματα σε CSS ως εξής:

.dropdown { position: relative; display: inline-block; } .dropbtn { background-color: red; padding: 10px; } .dropdown-content { display: none; position: absolute; } .dropdown:hover .dropdown-content { display:block; }

Χρειάζεστε τις ξεχωριστές κλάσεις div για να δημιουργήσετε το κουμπί και ένα άλλο div για να διαχωρίσετε τη λίστα με αυτό που περιέχει το κουμπί.

Ενα παράδειγμα

 Content 1 Content 2 × Content 3 Content 4 Content 5 

#myNav1 { height: 0; width: 50%; position: fixed; z-index: 6; top: 0; left: 0; background-color: #ffff; overflow: hidden; transition: 0.3s; opacity: 0.85; } #myNav2 { height: 0; width: 50%; position: fixed; z-index: 6; bottom: 0; right: 0; background-color: #ffff; overflow: hidden; transition: 0.3s; opacity: 0.85; } .overlay-content { position: relative; width: 100%; text-align: center; margin-top: 30px; } #myNav1-content{ top: 12%; left: 5%; display: none; } #myNav2-content{ top: 12%; right: 10%; display: none; }

Περισσότερες πληροφορίες για τα αναπτυσσόμενα μενού CSS:

• Πώς να δημιουργήσετε ένα αναπτυσσόμενο μενού με CSS και JavaScript