Μενού css οριζόντια. Εξαιρετική επισκόπηση των όμορφων μενού πολλαπλών επιπέδων με κωδικοποιητή

Γεια σας, αγαπητοί αναγνώστες του ιστολογίου μου! Το σημερινό άρθρο θα είναι πολύ χρήσιμο για αρχάριους σχεδιαστές διάταξης. Γιατί σήμερα θα δημιουργήσουμε ένα απλό οριζόντιο μενού. Πριν προχωρήσουμε απευθείας στη διάταξη, θέλω να πω λίγα λόγια για το γιατί αποφάσισα να επιλέξω το συγκεκριμένο θέμα για το άρθρο.

Στην πραγματικότητα, όλα είναι πολύ απλά, όταν σκεφτόμουν το θέμα του επόμενου μαθήματος για τον ιστότοπο, άρχισα να θυμάμαι και να αναλύω την εμπειρία μου στη μελέτη της διάταξης, τι έπρεπε να αντιμετωπίσω στο αρχικό στάδιο της καθιέρωσης μου ως σχεδιαστής διάταξης, τι ήταν πιο ακατανόητο για μένα όταν μελετούσα αυτόν τον τομέα κ.λπ. Έκανα στον εαυτό μου όλες αυτές τις ερωτήσεις για να καταλάβω καλύτερα τι μπορεί να είναι ενδιαφέρον για ένα άτομο που ξεκινά την καριέρα του ως σχεδιαστής layout. Και προσωπικά, μόλις άρχισα να μελετώ τη διάταξη, προέκυψαν οι περισσότερες ερωτήσεις σχετικά με τη διάταξη των διαφόρων μενού, ειδικά όταν πρόκειται για μενού πολλαπλών επιπέδων. Και έτσι σήμερα θα μιλήσουμε για το μενού, και πιο συγκεκριμένα για το οριζόντιο μενού. Ας ξεκινήσουμε λοιπόν!

Ας αρχίσουμε να σχεδιάζουμε το οριζόντιο μενού μας!

Όπως πιθανώς μαντέψατε, το πρώτο πράγμα που πρέπει να κάνουμε είναι να δημιουργήσουμε μια σελίδα HTML με τυπική σήμανση και να συνδέσουμε ένα αρχείο στυλ σε αυτήν. Δεν θα σταθώ λεπτομερώς σε αυτό το βήμα, καθώς ελπίζω ακόμα να μην είστε τόσο αρχάριος ώστε να σας πω λεπτομερώς τι είναι το σώμα και το κεφάλι και πώς συνδέονται τα στυλ. Να πω μόνο ότι εκτός από τα στυλ για το μενού μας, θα γράψω την απλούστερη επαναφορά στο αρχείο css για να επαναφέρω τα στυλ και να πετύχω την ίδια εμφάνιση εσοχών σε όλα τα προγράμματα περιήγησης. Αυτή είναι στην πραγματικότητα η πιο απλή επαναφορά μου:

Δεν θα πούμε τίποτα λεπτομερώς για την επαναφορά στυλ ακόμα, αφού ουσιαστικά αυτό είναι ένα θέμα για άλλο άρθρο Το μόνο πράγμα που πρέπει να γνωρίζετε για τον κώδικα που περιγράφεται παραπάνω είναι ότι χάρη σε αυτόν τον κώδικα, όλα τα στοιχεία της σελίδας που θα γράψουμε έχουν μηδενικό περιθώριο και εσοχές, αυτό πρέπει να γίνει ώστε η σελίδα μας να φαίνεται ίδια σε όλα τα προγράμματα περιήγησης.

Τι έχουμε λοιπόν σε αυτό το στάδιο; Έχουμε μια σελίδα html με τυπική σήμανση:

Οριζόντιο μενού

Και έχουμε ένα αρχείο στυλ συνδεδεμένο σε αυτήν τη σελίδα (για μένα είναι style.css), με το ακόλουθο περιεχόμενο:

Το επόμενο βήμα είναι να δημιουργήσουμε σήμανση html για το μενού μας.

Δημιουργία σήμανσης για το μενού

Στη σήμανση μας θα χρησιμοποιήσουμε τη νέα ετικέτα που εμφανίστηκε στην HTML5, αποφάσισα να σας συνηθίσω αμέσως στις νέες ετικέτες για να ακολουθήσετε την τάση και το πρότυπο, ας πούμε, παρά το γεγονός ότι οι νέες ετικέτες HTML 5 δεν υποστηρίζονται παλαιότερα προγράμματα περιήγησης, εξακολουθώ να προτείνω ανεπιφύλακτα τη χρήση τους στη διάταξή σας, καθώς αργά ή γρήγορα θα πρέπει να μεταβείτε σε αυτά, όπως οι σχεδιαστές διάταξης άλλαξαν από τη διάταξη πίνακα σε διάταξη μπλοκ, αυτή είναι η πραγματικότητα, είναι καλύτερα να ακολουθήσετε η τάση!

Και επειδή ήδη μιλάμε για υποστήριξη νέων ετικετών html 5, ώστε να μην έχουμε προβλήματα με αυτό σε παλαιότερα προγράμματα περιήγησης, πρέπει να συμπεριλάβουμε μια ειδική βιβλιοθήκη στο έγγραφό μας - html5shiv. Αυτό γίνεται με την εισαγωγή σε
την ενότητα κεφαλής της σελίδας σας με τον ακόλουθο κώδικα:

Όλες οι ετικέτες μετά από αυτό (και άλλες ετικέτες που σχετίζονται με το HTML5) θα γίνονται κανονικά αντιληπτές από τα παλαιότερα προγράμματα περιήγησης.

Ας επιστρέψουμε απευθείας στη σήμανση μας. Στη συνέχεια, πρέπει να εισαγάγουμε μια λίστα με κουκκίδες στην ετικέτα μας, για μένα μοιάζει με αυτό:

Σπίτι
Σχετικά με εμάς
Χαρτοφυλάκιο
Ιστολόγιο
Επαφές

Έτσι, φαίνεται ότι τελειώσαμε με τη σήμανση, ήρθε η ώρα να αρχίσουμε να γράφουμε στυλ, αφού τώρα το μενού μας δεν φαίνεται πολύ καλό, για να το θέσω ήπια:

Στυλ γραφής για το οριζόντιο μενού μας

Και έτσι, το πρώτο πράγμα που πρέπει να κάνουμε κατά τη διαμόρφωση του μενού είναι να αφαιρέσουμε τους δείκτες της λίστας, προφανώς δεν τους χρειαζόμαστε, το κάνουμε ως εξής:

Ul (στυλ λίστας: κανένας; )

Μετά από αυτό το μενού μας θα μοιάζει με αυτό:

Δεν μου αρέσει πολύ το πώς το μενού μας είναι κολλημένο στις άκρες του προγράμματος περιήγησης, ας το διορθώσουμε:

Με αυτόν τον κωδικό, ορίσαμε το πλάτος του μενού μας, του δώσαμε 50 px πάνω και κάτω περιθώρια και το τοποθετήσαμε στο κέντρο. Ποιος ξέρει, αν ένα στοιχείο μπλοκ έχει πλάτος, τότε για να τοποθετήσουμε αυτό το στοιχείο αυστηρά στο κέντρο, πρέπει απλώς να του δώσουμε ένα εξωτερικό περιθώριο (περιθώριο) δεξιά και αριστερά με την τιμή auto.

Το επόμενο βήμα είναι να κάνουμε τελικά το μενού μας οριζόντιο, αυτό γίνεται με τη ρύθμιση των στοιχείων

float: αριστερά

Μενού li ( float:αριστερά; )

Ολόκληρο το μενού μας έχει πλέον γίνει οριζόντιο.

Εάν δεν καταλαβαίνετε τι ακριβώς συνέβη και τι κάνει το ακίνητο float, σας συνιστώ να αναζητήσετε στο google πληροφορίες σχετικά με αυτό το ακίνητο και να το μελετήσετε διεξοδικά, καθώς
Ούτε μια σελίδα διάταξης δεν μπορεί να κάνει χωρίς αυτό, μπορώ να σας το πω σίγουρα. Λοιπόν, εντάξει, ας συνεχίσουμε!

Μενού li a( display:block;/* Κάντε τον σύνδεσμο ως στοιχείο μπλοκ*/ padding:12px 20px;/* Ορίστε το padding */ text-decoration: none; /* αφαιρέστε την υπογράμμιση */ color:#fff;/* ορίστε τους χρωματικούς συνδέσμους σε λευκό */ background:#444;/* κάντε το χρώμα του φόντου σκούρο */ font:14px Verdana, sans-serif;/* ορίστε το μέγεθος και το όνομα της γραμματοσειράς */ )

Ένας από τους πιο σημαντικούς κανόνες εδώ είναι το display:block;. Το γεγονός είναι ότι από προεπιλογή οι σύνδεσμοι είναι ενσωματωμένα στοιχεία και οι εσοχές εφαρμόζονται διαφορετικά σε ενσωματωμένα στοιχεία σε διαφορετικά προγράμματα περιήγησης, επομένως είναι σκόπιμο να γίνει ο σύνδεσμος στοιχείο μπλοκ και μόνο τότε να εφαρμόζονται σε αυτόν οι ιδιότητες που σχετίζονται με εξωτερικές ή εσωτερικές εσοχές. Τώρα δεν θέλω να σας επιβαρύνω με περιττές πληροφορίες με την πάροδο του χρόνου, χρησιμοποιώντας πραγματικά παραδείγματα, θα καταλάβετε γιατί δίνεται μια τέτοια έμφαση.

Ας δούμε τι πήραμε, ανανεώστε τη σελίδα του προγράμματος περιήγησης και ορίστε!:

Όπως μπορείτε να δείτε, δεν φαίνεται κακό, μπορούμε να πούμε ότι, κατ 'αρχήν, το μενού μας είναι έτοιμο. Το μόνο πράγμα που πρέπει ακόμα να γίνει είναι να ρυθμίσετε το φως των συνδέσμων κατά την αιώρηση, και μου φαίνεται ότι το μενού θα φαίνεται καλύτερα με διαχωριστικά μεταξύ των στοιχείων.

Ας ξεκινήσουμε με τους οριοθέτες:

Menu li( border-left: 1px solid #666; ) .menu li:first-child( border-left:none; )

Τι κάναμε εδώ; Ναι, όλα είναι πολύ απλά, ορίσαμε τους βαθμούς μας (

) αριστερό περίγραμμα μεγέθους 1 εικονοστοιχείου και χρώματος #666;. Όσον αφορά τον επιλογέα .menu li:first-child, εδώ χρησιμοποιούμε μια ειδική ψευδο-κλάση που μας επιτρέπει να επιλέξουμε το πρώτο θυγατρικό στοιχείο της λίστας. Συνιστώ επίσης να διαβάσετε για ψευδο-τάξεις με περισσότερες λεπτομέρειες στο Διαδίκτυο, θα μάθετε πολλά χρήσιμα πράγματα.

Ας δούμε ξανά τι έχουμε:

Κατά τη γνώμη μου, είναι πολύ καλύτερα με οριοθέτες.

Μενού li a:hover( φόντο:#888; )

Χρησιμοποιώντας πάλι μια ειδική ψευδο-κλάση, αυτή τη φορά το δείκτη του ποντικιού, ορίζουμε το χρώμα του συνδέσμου όταν τοποθετούμε το δείκτη του ποντικιού πάνω του, κοιτάξτε:

Νομίζω ότι είναι ωραίο :) Ελπίζω να καταλήξετε με το ίδιο μενού με το δικό μου.

Εδώ θα τελειώσω αυτό το μάθημα, ελπίζω πραγματικά να σας ήταν χρήσιμο και τώρα ξέρετε πώς να σχεδιάσετε ένα απλό οριζόντιο μενού χρησιμοποιώντας καθαρό html και css. Φυσικά, δημιουργήσαμε ένα μενού ενός επιπέδου, θα είναι λίγο πιο περίπλοκο με ένα μενού δύο επιπέδων (με ένθετη λίστα), αλλά αυτό είναι ένα θέμα για ένα άλλο μάθημα, αυτό είναι όλο για μένα. Ελάτε πάλι θα χαρώ!!!

Το έργο του κεντραρίσματος ενός οριζόντιου μενού μπορεί να είναι δύσκολο, ειδικά για όσους είναι νέοι στο CSS. Η αναζήτηση λύσεων οδηγεί σε μια πολύ περιορισμένη λίστα μεθόδων, οι περισσότερες από τις οποίες βασίζονται σε κόλπα CSS, JavaScript ή τη χρήση μη τυπικών κανόνων που δεν υποστηρίζονται από όλα τα προγράμματα περιήγησης. Σε αυτό το σεμινάριο, θα δούμε μια μέθοδο κεντραρίσματος ενός οριζόντιου μενού που χρησιμοποιεί μόνο τυπικούς κανόνες CSS και λειτουργεί σε όλα τα προγράμματα περιήγησης.

Παράδειγμα κεντρικού μενού

Παρακάτω υπάρχει ένα οριζόντιο μενού στο κέντρο αυτής της στήλης, στο οποίο είναι ενεργοποιημένη η δεύτερη καρτέλα. Μπορείτε να δοκιμάσετε να αλλάξετε το μέγεθος του παραθύρου ή της σελίδας του προγράμματος περιήγησής σας για να βεβαιωθείτε ότι το μενού παραμένει πάντα κεντραρισμένο και λειτουργικό.

Στη σελίδα επίδειξης μπορείτε να δείτε πολλές επιλογές σχεδίασης για ένα οριζόντια κεντραρισμένο μενού. Οποιοδήποτε από αυτά μπορεί να χρησιμοποιηθεί στα έργα σας.

Σήμανση HTML

Όλα τα μενού που εμφανίζονται σε αυτό το σεμινάριο χρησιμοποιούν μια απλή δομή. Αυτή είναι μια συνηθισμένη μη ταξινομημένη λίστα συνδέσμων που τοποθετούνται σε ένα στοιχείο div.

Πρώτος σελιδοδείκτης
Δεύτερος σελιδοδείκτης
Τρίτη καρτέλα
Τέταρτη καρτέλα

Κεντρικό μενού Κωδικός CSS

Παρακάτω είναι ο πλήρης κώδικας CSS που χρησιμοποιείται για το κέντρο του μενού. Μια εξήγηση της αρχής λειτουργίας δίνεται αργότερα στο μάθημα.

#centeredmenu ( float:left; width:100%; background:#fff; border-bottom:4px solid #000; overflow:hidden; position:relative; ) #centeredmenu ul (clear:left; float:left; list-style :none padding:0 0 1px; 3px 10px:#ddd color:#000 line-height:1.3em ) #centeredmenu ul li a:hover; a.active, #centeredmenu ul li a.active:hover ( color:# fff; background:#000;

Πώς λειτουργεί η μέθοδος κεντραρίσματος;

Η δράση της μεθόδου βασίζεται στη σχετική τοποθέτηση των στοιχείων πλωτού μπλοκ το ένα μέσα στο άλλο. Αρχικά, ας δούμε πώς αλλάζει το μέγεθος των στοιχείων με τη μετατόπιση.

Στοιχείο div(μπλοκ) χωρίς μετατόπιση τεντώνεται σε όλο το πλάτος που διαθέτει.

Αλλά αν μετακινήσουμε το div προς τα αριστερά, θα συρρικνωθεί αυτόματα για να χωρέσει το περιεχόμενό του. Η συμπίεση είναι το κλειδί για την εφαρμογή αυτής της μεθόδου κεντραρίσματος μενού. Σας βοηθά να μετακινήσετε το μενού στη σωστή θέση.

Τυπικό μενού με αριστερή στοίχιση

Ας πάρουμε ένα τυπικό μενού με αριστερή στοίχιση και ας το επαναλάβουμε βήμα προς βήμα. Για λόγους σαφήνειας, τα αντικείμενα είναι χρωματισμένα σε διαφορετικά χρώματα, επομένως είναι αμέσως σαφές τι πηγαίνει.

Σημειώστε τα ακόλουθα σημεία:

Στοιχείο κεντρικό μενού div(μπλε ορθογώνιο) μετατοπίζεται προς τα αριστερά, αλλά έχει πλάτος 100%, επομένως παραμένει τεντωμένο σε ολόκληρη τη σελίδα.
Στοιχείο ul(ροζ ορθογώνιο) βρίσκεται μέσα στο στοιχείο κεντρικό μενού divκαι κινείται προς τα αριστερά. Αυτό σημαίνει ότι θα συμπιεστεί στο πλάτος του περιεχομένου του, δηλαδή στο συνολικό πλάτος όλων των σελιδοδεικτών.
Όλα τα στοιχεία li (πράσινα ορθογώνια) βρίσκονται μέσα στο στοιχείο ulκαι μετακινηθείτε προς τα αριστερά. Έτσι, συμπιέζονται στο μέγεθος των συνδέσμων σε αυτά και παρατάσσονται σε μία οριζόντια γραμμή.
Μέσα σε κάθε σύνδεσμο (πορτοκαλί ορθογώνια) εμφανίζεται το κείμενο σελιδοδείκτη: Σελιδοδείκτης 1, Σελιδοδείκτης 2 και ούτω καθεξής.

Μετατόπιση της θέσης μιας μη ταξινομημένης λίστας

Στη συνέχεια αντισταθμίζουμε το στοιχείο ulπρος τα δεξιά κατά 50% χρησιμοποιώντας τη θέση:relative; . Όταν ένα στοιχείο αντισταθμίζεται κατά ποσοστό υπό αυτές τις συνθήκες, είναι σημαντικό να θυμάστε ότι το συνολικό πλάτος των στοιχείων που περιέχει δεν είναι το πλάτος του. Στην περίπτωσή μας, η μετατόπιση γίνεται κατά το ήμισυ του παραθύρου του προγράμματος περιήγησης (ή του διαθέσιμου χώρου για εμφάνιση). Και ας προχωρήσουμε στο επόμενο βήμα.

Αλλάξτε τη θέση όλων των στοιχείων μενού

Το μόνο που μένει είναι να μετακινηθούν όλα τα στοιχεία liέμεινε κατά 50%. Αυτό είναι το 50% του πλάτους του στοιχείου μας ul (το δοχείο που περιέχει το μενού). Έτσι, οι σελιδοδείκτες μετατοπίζονται ακριβώς στο κέντρο του παραθύρου.

Μερικές σημαντικές σημειώσεις

Όταν χρησιμοποιείτε αυτήν τη μέθοδο κεντραρίσματος, υπάρχουν πολλά σημαντικά σημεία που πρέπει να θυμάστε:

Δεδομένου ότι το στοιχείο ulεκτείνεται εν μέρει πέρα από το παράθυρο, με αποτέλεσμα την εμφάνιση των γραμμών κύλισης. Επομένως, πρέπει να χρησιμοποιήσετε τον κανόνα υπερχείλισης:κρυφό. για στοιχείο κεντρικό μενού div. Έτσι, το προεξέχον τμήμα του στοιχείου divθα αποκοπεί.
Δεδομένου ότι το στοιχείο ulδεν είναι ευθυγραμμισμένο με σελιδοδείκτες, δεν μπορείτε να χρησιμοποιήσετε κανένα οπτικό στυλ για αυτό. Αφήστε το στοιχείο ul χωρίς χρώμα φόντου και χωρίς περίγραμμα ώστε να γίνει εντελώς αόρατο. Και τα στυλ για σελιδοδείκτες θα πρέπει να χρησιμοποιούνται μόνο για στοιχεία li.
Εάν πρέπει να ορίσετε ειδικά στυλ για τον πρώτο και τον τελευταίο σελιδοδείκτη, πρέπει να προσθέσετε μια τάξη για το πρώτο και το τελευταίο στοιχείο li, ώστε να μπορείτε να τα διαμορφώσετε ξεχωριστά.

συμπέρασμα

Η προτεινόμενη λύση είναι συμβατή με όλα τα προγράμματα περιήγησης, δεν χρησιμοποιεί JavaScript και υποστηρίζει κείμενο με δυνατότητα αλλαγής μεγέθους.

Από τον συγγραφέα: Γεια σε όλους. Για κάποιο λόγο, οι webmasters συσχετίζουν τα αναπτυσσόμενα μενού με σενάρια, αλλά για μεγάλο χρονικό διάστημα μια τέτοια πλοήγηση μπορεί να γίνει απολύτως εύκολα χρησιμοποιώντας καθαρό CSS. Επιπλέον, ένα τέτοιο μενού δεν θα είναι χειρότερο. Σήμερα θα σας δείξω πώς να δημιουργήσετε ένα αναπτυσσόμενο μενού στο css. Θα μοιραστώ, ας πούμε, τη συνταγή.

Σχέδιο μαθήματος και διάταξη του μενού μας

Γενικά, ας αποφασίσουμε πρώτα πώς θα δημιουργήσουμε το ίδιο το μενού. Στο html5, ο τυπικός τρόπος είναι να το δημιουργήσετε στο κοντέινερ πλοήγησης χρησιμοποιώντας μια λίστα με κουκκίδες. Ας κάνουμε ακριβώς αυτό. Θα αφαιρέσουμε τους δείκτες αργότερα χρησιμοποιώντας css, δεν τους χρειαζόμαστε καθόλου στο μενού.

Στην πραγματικότητα, θα γράψω αμέσως σήμανση με ένθετες λίστες σε html. Δηλαδή, η λίστα μας θα είναι δύο επιπέδων - θα περιέχει άλλες λίστες. Δηλαδή, για κάθε στοιχείο υπάρχει 1 λίστα, η οποία θα σχηματίσει ένα αναπτυσσόμενο μενού.

Υπάρχει ένα σημαντικό σημείο εδώ, το οποίο είναι ότι μπορεί να μην χρειάζεται να κάνετε κάθε στοιχείο αναπτυσσόμενο, αλλά μόνο μερικά. Κανένα πρόβλημα, τότε σε αντικείμενα χωρίς αναπτυσσόμενα μενού απλά δεν δημιουργούμε ένθετες λίστες.

Στην πραγματικότητα, εδώ είναι όλη η σήμανση:

< nav id = "nav" >

< ul >

< li > < a href = "#" >Παράγραφος 1< / a >

< ul class = "second" >

< li > < a href = "#" >Υπο-ρήτρα< / a > < / li >

< / ul >

< / li >

< li > < a href = "#" >Σημείο 2< / a >

< ul class = "second" >

< li > < a href = "#" >Υπο-ρήτρα< / a > < / li >

< / ul >

< / li >

< li > < a href = "#" >Σημείο 3< / a >

< ul class = "second" >

< li > < a href = "#" >Υπο-ρήτρα< / a > < / li >

< / ul >

< / li >

< li > < a href = "#" >Σημείο 4< / a >

< ul class = "second" >

< li > < a href = "#" >Υπο-ρήτρα< / a > < / li >

< / ul >

< / li >

< / ul >

< / nav >

Καταλαβαίνω ότι είναι τεράστιο. Αυτό είναι το πρόβλημα με τις ένθετες λίστες, ότι πρέπει να γράψετε πολύ κώδικα. Λάβετε όμως υπόψη το γεγονός ότι κάνουμε 4 βασικά σημεία και για το καθένα θα υπάρχει ένα αναπτυσσόμενο μενού.

Στην πραγματικότητα, έδωσα σε ολόκληρη την πλοήγηση ένα αναγνωριστικό nav και όλες οι ένθετες λίστες μια κλάση στυλ δευτερολέπτων για να καταλάβω ότι είναι ένθετες.

Τέλεια, έχουμε έτοιμη τη σήμανση, μπορείτε να δείτε το αποτέλεσμα:

Ναι, φαίνεται τρομερό. Τώρα όμως θα ενεργοποιήσουμε το css και σε λίγα λεπτά η πλοήγησή μας θα μεταμορφωθεί. Ας δουλέψουμε.

Γράψιμο στυλ CSS

Το πρώτο πράγμα που θα κάνω είναι να επαναφέρω όλη την πλήρωση στην προεπιλογή για όλα τα στοιχεία. Θα μπουν μόνο στο δρόμο μας, είναι καλύτερα να ορίσουμε τις εσοχές αργότερα, όπου χρειάζεται.

*( περιθώριο: 0, γέμιση: 0; )

περιθώριο: 0;

γέμιση: 0;

#nav(ύψος: 70px; ) #nav ul(στυλ λίστας: κανένας; )

#nav(

ύψος: 70 px;

#navul(

list-style: κανένας;

Τώρα πρέπει να αποφασίσουμε πραγματικά ποιο θα είναι το μενού μας. Οριζόντια ή κάθετη; Προτείνω να κάνετε πρώτα μια οριζόντια και να δείτε τα πάντα στο παράδειγμά της. Για να το κάνετε αυτό, πρέπει να γράψετε τα ακόλουθα στυλ:

#nav > ul > li( float: αριστερά; πλάτος: 180 px; θέση: σχετική; )

#nav > ul > li(

float: αριστερά;

πλάτος: 180 px;

θέση: σχετική;

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

Αλλά εσείς, φυσικά, μπορείτε να το κάνετε διαφορετικά, σύμφωνα με την ιδέα σας. Μπορείτε να βεβαιωθείτε ότι όλα τα σημεία βρίσκονται σε μία γραμμή.

Τέλος πάντων, τον παραπάνω κώδικα ελπίζω να καταλάβατε. Αναγκάζει τα στοιχεία της κύριας λίστας να ωθηθούν προς τα αριστερά, έτσι ώστε να εμφανίζονται όλα στην ίδια γραμμή, παρόλο που είναι στοιχεία μπλοκ. Τους έδωσα επίσης σαφές πλάτος και σχετική τοποθέτηση.

Γιατί τοποθέτηση; Είναι απαραίτητο για να τοποθετηθούν στη συνέχεια οι ένθετες λίστες. Εάν έχετε σπουδάσει τοποθέτηση σε CSS, τότε πιθανότατα γνωρίζετε ότι εάν δώσετε σε ένα μπλοκ σχετική τοποθέτηση, τότε όλα τα στοιχεία σε αυτό μπορούν να τοποθετηθούν απολύτως μέσα σε αυτό το συγκεκριμένο μπλοκ και όχι ολόκληρο το παράθυρο του προγράμματος περιήγησης.

Εν τω μεταξύ, ορίστε τι έχουμε μέχρι στιγμής:

Από αυτό το στιγμιότυπο οθόνης μπορείτε ήδη να φανταστείτε το κατά προσέγγιση αποτέλεσμα. Φυσικά, πρέπει ακόμα να σχεδιάσουμε όμορφα τα αντικείμενα, ώστε τα μάτια να μην εκλιπαρούν για έλεος κατά την προβολή της πλοήγησης.

#nav li a( οθόνη: μπλοκ; φόντο: #90DA93; περίγραμμα: 1px συμπαγές #060A13; χρώμα: #060A13; padding: 8 px; text-align: center; text-decoration: none; ) #nav li a:hover( φόντο: #2F718E )

#navli a(

οθόνη: μπλοκ;

φόντο : #90DA93;

περίγραμμα: 1px στερεό #060A13;

χρώμα : #060A13;

padding: 8px;

κείμενο - στοίχιση : κέντρο ;

κείμενο - διακόσμηση : κανένα ;

#nav li a:hover(

φόντο : #2F718E;

Πρώτον, οι ίδιοι οι σύνδεσμοι πρέπει να γίνουν μπλοκ. Αυτό είναι απαραίτητο για να λειτουργήσει η επένδυση και να εφαρμοστούν σωστά όλες οι ιδιότητες. Στη συνέχεια, καθορίζω τα χρώματα του φόντου, το κείμενο, τις παραμέτρους του πλαισίου, την εσωτερική επένδυση και τη στοίχιση κειμένου στο κέντρο. Τέλος, αναιρώ την υπογράμμιση των συνδέσμων.

Όλες αυτές οι παράμετροι δεν χρειάζεται να προσδιορίζονται με τον τρόπο που έκανα. Μπορείτε να επιλέξετε τα χρώματα αυθαίρετα, να κάνετε διαφορετικό πλαίσιο ή να μην το χρησιμοποιήσετε καθόλου, οι εσοχές μπορούν να μειωθούν ή να αυξηθούν.

Λάβετε υπόψη ότι σε αυτήν την περίπτωση δεν χρησιμοποιήσαμε το σύμβολο >, επομένως οι παραπάνω κανόνες θα ισχύουν για όλους τους συνδέσμους, συμπεριλαμβανομένων εκείνων στις ένθετες παραγράφους. Τώρα λοιπόν έχουμε τα εξής:

Τέλεια, αλλά καταλαβαίνετε ότι τα δευτερεύοντα στοιχεία δεν πρέπει να είναι ορατά, πρέπει να ανοίγουν όταν τοποθετείτε το δείκτη του ποντικιού πάνω από το επιθυμητό στοιχείο. Χωρίς αυτό, το μενού μας μοιάζει με τραπέζι. Λοιπόν, ήρθε η ώρα να κρύψετε τα ένθετα αντικείμενα.

#nav li .second( εμφάνιση: καμία; θέση: απόλυτη; κορυφή: 100%; )

#nav li .second(

οθόνη: καμία;

θέση: απόλυτη;

κορυφή: 100%;

Αρχικά, κρύβουμε εντελώς ένθετες λίστες. Δεύτερον, τους δίνουμε απόλυτη τοποθέτηση και κορυφαία συντεταγμένη: 100%. Αυτό σημαίνει ότι το αναπτυσσόμενο μενού θα εμφανίζεται καθαρά κάτω από το κύριο στοιχείο στο οποίο ανήκει, σαφώς στο 100% του ύψους αυτού του στοιχείου.

Τώρα βλέπουμε μόνο το κύριο μενού στην ιστοσελίδα, το οποίο είναι αυτό που χρειαζόμαστε.

Ας εφαρμόσουμε την εγκατάλειψη

Αυτό που μένει να κάνουμε είναι το πιο σημαντικό πράγμα - να συνειδητοποιήσουμε την ίδια την πτώση. Δεν υπάρχει τίποτα περίπλοκο σε αυτό, δείτε αυτόν τον κώδικα:

#nav li:hover .second( display: block; )

#nav li:hover .second(

οθόνη: μπλοκ;

Αυτός ο κωδικός θα λειτουργεί άψογα. Όταν τοποθετείτε το δείκτη του ποντικιού πάνω από ένα στοιχείο του κύριου μενού, η υπολίστα θα είναι ορατή. Επιπλέον, μόνο η λίστα που είναι ένθετη στο στοιχείο πάνω από το οποίο αιωρείται ο κέρσορας.

Υπάρχει μόνο ένα μικρό πρόβλημα - το πλάτος των ένθετων στοιχείων δεν ταιριάζει με το πλάτος των κύριων. Αλλά αυτό μπορεί να λυθεί πολύ εύκολα προσθέτοντας τα κατάλληλα στυλ:

#nav li li (πλάτος: 180 px; )

#navlili(

πλάτος: 180 px;

Αυτό ήταν, το πρόβλημα λύθηκε:

Όλα λειτουργούν τέλεια. Όταν τοποθετείτε το δείκτη του ποντικιού πάνω από το κύριο στοιχείο, εμφανίζεται ένα αναπτυσσόμενο μενού που αντιστοιχεί σε αυτό. Εάν μετακινήσετε τον κέρσορα στο πλάι, εξαφανίζεται. Εάν μετακινήσετε τον κέρσορα στα ίδια τα ένθετα στοιχεία, μπορείτε να κάνετε κλικ σε αυτά και να μεταβείτε στην επιθυμητή ενότητα του ιστότοπου. Έτσι, δημιουργήσαμε για εσάς ένα πολύ απλό και ελαφρύ αναπτυσσόμενο μενού χωρίς απολύτως κανένα σενάριο.

Μετατροπή του μενού σε κατακόρυφο

Λοιπόν, εντάξει, καταλάβαμε πλήρως την οριζόντια πλοήγηση, αλλά εκτός από αυτήν, η κατακόρυφη πλοήγηση βρίσκεται πολύ συχνά σε ιστότοπους και μπορεί επίσης να είναι αναπτυσσόμενη. Στην πραγματικότητα, η αλλαγή του μενού από οριζόντια σε κατακόρυφη είναι πολύ εύκολη, πρέπει να αλλάξουμε μόνο μερικές γραμμές κώδικα.

Αρχικά, θα χρειαστεί να αφαιρέσετε το float:left από τα κύρια στοιχεία της λίστας. Αυτή η ιδιότητα είναι που διασφαλίζει ότι τα στοιχεία μας εμφανίζονται σε μία γραμμή, αλλά γιατί το χρειαζόμαστε αν η πλοήγηση πρέπει να είναι κάθετη;

Τώρα το μόνο που μένει είναι να αλλάξουμε τους κανόνες για τον επιλογέα #nav li .second, δηλαδή για τις ένθετες λίστες, δηλαδή, πρέπει να τοποθετηθούν λίγο διαφορετικά. Σαν αυτό:

#nav li .second( εμφάνιση: καμία; θέση: απόλυτη; αριστερά: 100%; επάνω: 0; )

#nav li .second(

οθόνη: καμία;

θέση: απόλυτη;

αριστερά: 100%;

κορυφή: 0;

Δηλαδή, είναι απαραίτητο να καταχωρήσετε δύο συντεταγμένες αντί για μία. Πρώτον, στην περίπτωση της οριζόντιας πλοήγησης, είπα ότι, όπως είχε προγραμματιστεί, τα στοιχεία του υπομενού θα πρέπει να εμφανίζονται κάτω από τα κύρια στοιχεία. Στην περίπτωση κατακόρυφου μενού, αυτό δεν είναι κατάλληλο - τα στοιχεία πρέπει να εμφανίζονται στο πλάι.

Επομένως, αλλάζουμε την κορυφή: 100% προς τα αριστερά: 100%. Επιπλέον, χρειαζόμαστε και την κορυφαία συντεταγμένη. Το βάλαμε στο 0 ώστε το υπομενού να βρίσκεται στο ίδιο επίπεδο με το αντικείμενο που αντιστοιχεί.

Αυτό ήταν, τώρα όλα λειτουργούν όπως πρέπει. Μπορείτε να το δοκιμάσετε. Όπως μπορείτε να δείτε, δεν είπα ψέματα όταν είπα ότι θα έπρεπε να ξαναγράψω μόνο μερικές γραμμές κώδικα.

Οριζόντιο μενού με πολλά επίπεδα

Χρησιμοποιώντας την ίδια προσέγγιση, μπορείτε να δημιουργήσετε περισσότερα επίπεδα μενού εάν χρειάζεται. Για παράδειγμα, ας δημιουργήσουμε μια λίστα για το τέταρτο στοιχείο του κύριου μενού, η οποία θα είναι ένθετη σε ένα από τα υποστοιχεία.

Όλοι όσοι αποφασίζουν να δημιουργήσουν τη δική τους ιστοσελίδα έρχονται αντιμέτωποι με την ανάγκη να δημιουργήσουν έναν ωραίο μενού για τον ιστότοπό σας. Σε αυτό το άρθρο θα σας πω πώς, χρησιμοποιώντας κανονικό κώδικα HTML και απλούς κανόνες CSS, μπορείτε να δημιουργήσετε ένα εξαιρετικό αναπτυσσόμενο μενού που είναι εύκολο να αλλάξει και να επεκταθεί. Και δεν χρειαζόμαστε κώδικα JavaScript για αυτό!

Το πρώτο και πιο σημαντικό βήμα κατά τη δημιουργία ενός αναπτυσσόμενου μενού είναι η δημιουργία της δομής του. Αυτό γίνεται καλύτερα χρησιμοποιώντας μη αριθμημένες λίστες. Ας δημιουργήσουμε ένα απλό μενού όπως αυτό:

Ο κώδικας html αποδείχθηκε αρκετά απλός και όχι περίπλοκος. Αυτή η λίστα θα μοιάζει Έτσι.

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

#nav ul ( περιθώριο: 0 εικονοστοιχεία, συμπλήρωση: 0 εικονοστοιχεία, στυλ λίστας: κανένα, πλάτος: 200 εικονοστοιχεία; )

Τώρα πρέπει να ορίσουμε τη θέση των στοιχείων της λίστας. Δεδομένου ότι το μενού μας θα είναι κάθετο, αυτό διευκολύνει τη δουλειά μας. Ωστόσο, πρέπει να ορίσουμε μια τιμή για το ακίνητο "θέση", Πως "συγγενής". Αυτό είναι απαραίτητο για να τοποθετήσετε απόλυτα το υπομενού σε σχέση με το κύριο μενού. Θα ορίσουμε επίσης την υπογράμμιση για τα στοιχεία μενού.

#nav ul li (θέση: σχετική; περιθώριο-κάτω: 1px συμπαγές #cccc; )

Τώρα πρέπει να διορθώσουμε το δικό μας υπομενού. Εφόσον θέλουμε το μενού μας να εμφανίζεται στα δεξιά του κύριου μενού τη στιγμή που ο δρομέας βρίσκεται πάνω από αυτό το στοιχείο, χρειαζόμαστε μια ιδιότητα ένθετης λίστας "θέση"καθορισμένη τιμή "απόλυτος". Πρέπει επίσης να ορίσουμε τη θέση του. Αυτό γίνεται ως εξής

#nav li ul (θέση: απόλυτη; αριστερά: 200 εικονοστοιχεία; επάνω: 0; οθόνη: καμία; )

Χρήση Ιδιοτήτων αριστεράΚαι μπλουζαορίζουμε την απόλυτη θέση του υπομενού μας σε σχέση με το γονικό στοιχείο μενού. Ανέθεσα και το χαρακτηριστικό "απεικόνιση"έννοια "κανένας", αφού δεν θέλουμε να βλέπουμε το υπομενού κατά το άνοιγμα της σελίδας.

Τώρα λοιπόν το μενού μας μοιάζει Ετσι.

Τώρα ας ρίξουμε μια ματιά στους συνδέσμους μας. Πρώτα απ 'όλα, προκειμένου κάθε σύνδεσμος να καταλαμβάνει όλο τον χώρο που έχει εκχωρηθεί για αυτόν μέσα στο στοιχείο λίστας που τον περιέχει, εκχωρούμε το χαρακτηριστικό "απεικόνιση"έννοια "ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ". Θα αφαιρέσουμε επίσης την υπογράμμιση και θα ορίσουμε το χρώμα φόντου και το χρώμα του κειμένου των συνδέσμων.

#nav ul li a ( οθόνη: μπλοκ; διακόσμηση κειμένου: κανένα; χρώμα: #777; φόντο: #fff; padding: 5 px; )

#nav li:hover ul ( οθόνη: μπλοκ; )

Τώρα το μενού μας λειτουργεί ήδη και μοιάζει Έτσι.

Το μόνο που μένει είναι να του δώσουμε μια πιο ελκυστική εμφάνιση.

Αρχικά, ας βεβαιωθούμε ότι όταν τοποθετείτε το δείκτη του ποντικιού πάνω από τα στοιχεία του μενού μας, το φόντο και το χρώμα του κειμένου αλλάζουν. Για να το κάνετε αυτό, προσθέστε τον ακόλουθο κώδικα

#nav li:hover a ( χρώμα:#FFFFFF; φόντο: url(img/fone-tr.png); )

Εδώ χρησιμοποιώ ως φόντο αυτή η εικόνα, αλλά μπορείτε να χρησιμοποιήσετε το γέμισμα με οποιοδήποτε άλλο χρώμα (για παράδειγμα: background-color:#0000ff; ).

#nav li:hover ul a:hover ( background-color:#cccccc; background-image:none; color:#FFFFFF; )

Εντάξει όλα τελείωσαν τώρα! Είναι δικό μας αναπτυσσόμενο μενού htmlΚαι CSS έτοιμος. Μπορείτε να δείτε τι καταλήξαμε.

Φαίνεται ότι αυτό θα μπορούσε να είναι το τέλος, αλλά όχι. Δυστυχώς, οι πρώτες εκδόσεις του Internet Explorer κατανοούν την ψευδο-κλάση :φτερουγίζωμόνο για ετικέτα - Ετσι li:hover, που ευθύνεται για την εμφάνιση των υπομενού και την αλλαγή του χρώματος του φόντου, δεν του λέει τίποτα.

Για να διορθώσετε αυτό το πρόβλημα, ας προσθέσουμε έναν μικρό κώδικα JavaScript:

Τώρα ας βεβαιωθούμε ότι όταν τοποθετείτε το δείκτη του ποντικιού πάνω από ένα στοιχείο υπομενού, θα αλλάξει επίσης το χρώμα του φόντου του. Για να το κάνουμε αυτό χρησιμοποιούμε τον παρακάτω κώδικα:

jsHover = function() ( var hEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0, len=hEls.length; i