Πώς να κάνει ένα drop-down μενού CSS

εντολή

Κατ 'αρχάς, ας καταλάβουμε τι είναι ένα αναπτυσσόμενο μενού. Σύμφωνα με τον ορισμό αυτό παίρνει πολλές διαφορετικές μεθόδους κατασκευής διαφορετικές διατάξεις. Σε αυτήν την περίπτωση, θα αναλύσουμε μια δομή που αποτελείται από πολλά συνεχώς ορατή αντικείμενα και διάφορα πρόσθετα (κρυφό). Ας τελειώσουμε με τη θεωρία και να αρχίσουν να πρακτική.

• Δημιουργούμε τη διάταξη του μενού μας. Για να γίνει αυτό, η σήμανση HTML κώδικα. Δημιουργήστε μια ένθετη λίστα:
  • • < / ul>. Κάτι τέτοιο θα πρέπει να μοιάζει drop-down μενού σας. CSS να παρέμβει αργότερα. Στην περίπτωση αυτή, ο κύριος κατάλογος αποτελείται από τρεις κύριους τομείς και δύο κλειστούς.
    • Απόκρυψη του υπο-μενού. Γι 'αυτό χρησιμοποιούμε ένα φύλλο στυλ, ορίστε τις παρακάτω ιδιότητες: ul ul {display: none?} Αυτό θα αφαιρέσει τα στοιχεία της δεύτερης λίστας από την οθόνη.
    • Δημιουργήστε ένα CSS μενού, drop down από την κύρια λίστα. Τα επικαλυπτόμενα φύλλα στυλ γράψει τον ακόλουθο κανόνα: ul li: αιωρούνται ul {display: block?}. Αυτή η καταχώρηση σημαίνει ότι όταν το ποντίκι είναι πάνω από το li στοιχείο, το οποίο βρίσκεται στο ul λίστα εμφανίζεται στην οθόνη ul (επισυνάπτεται). Με την πρώτη ματιά, ένα τέτοιο σύστημα μπορεί να φαίνεται περίπλοκη και σύγχυση. Αλλά στην πραγματικότητα, τα πάντα είναι πολύ απλό.
    • Χρησιμοποιήστε αυτή τη διάταξη εαυτό σας εισάγοντας τις ετικέτες
    • περιεχόμενό σας. Μπορείτε να αλλάξετε τον αριθμό των στοιχείων λίστας.

    διακοσμητικές αλλαγές

    Από τη στιγμή που η διάταξη του κύριου μενού είναι έτοιμο, μπορείτε να προχωρήσετε στην εγγραφή. Πιθανώς, πολλοί στην πρώτη θέση πρόθυμοι να απαλλαγούμε από τους δείκτες που δείχνει το στοιχείο της λίστας. Αυτό γίνεται χρησιμοποιώντας ένα μόνο CSS ιδιότητα, δηλαδή τον κατάλογο-style-τύπου. Θα πρέπει να προσθέσετε την ακόλουθη καταχώρηση: li {list-style-type: none?}. Στη συνέχεια, μπορείτε να εισάγετε το πλαίσιο και να κάνει το φόντο. Τα σύνορα και το φόντο σας βοηθήσει με αυτό. Ίσως κάποιοι δεν θα ήθελαν το αναπτυσσόμενο μενού θα εμφανιστεί ως συμπληρωματικό κατάλογο, ωθώντας στα ίδια βασικά στοιχεία. Για να το διορθώσετε αυτό, μπορείτε να το τοποθετήσετε. Για να το κάνετε αυτό, επικαλυπτόμενα φύλλα στυλ γράψει την ακόλουθη καταχώρηση: ul θέση ul {: απόλυτη? αριστερά: 15px? δεξιά: 15px? top: 15px? κάτω: 15px?}. Φυσικά, οι τιμές θα χρησιμοποιήσετε το δικό σας. Ανάλογα με το πού θέλετε να δείτε τα μενού drop-down, CSS θα προσφέρει πολλά περισσότερα χαρακτηριστικά γνωρίσματα που μπορούν να προσθέσουν διάφορα εφέ και να διακοσμήσετε τους καταλόγους μας.

    συμπέρασμα

    Για άλλη μια φορά αξίζει να σημειωθεί η κατασκευή της διάταξης μενού. Για να ορίσετε τους κανόνες CSS που χρησιμοποιούνται σε αυτή την περίπτωση ενσωματωμένη αξία, για παράδειγμα, ul ul. Αν είστε στο έγγραφο για να καλύψουν άλλα παρόμοια δομή, μπορεί να υπάρχουν μεγάλα προβλήματα. Σε αυτές τις περιπτώσεις, θα πρέπει να χρησιμοποιήσετε ένα συγκεκριμένο σκοπό, για παράδειγμα, επιλογείς ή id-αναγνωριστικά. Η παραπάνω αναπτυσσόμενο μενού διάταξης άρθρο έχει σχεδιαστεί για να εξοικειώσει το γενικό σχεδιασμό. Το υπόλοιπο του έργου στηρίζεται στους ώμους σας.