Σωστός σχεδιασμός μενού σε html5 css3. CSS - οριζόντιο μενού για αρχάριους

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

Ποιες είναι οι διαφορές

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

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

Έτσι, με την εμφάνιση νέων ετικετών, τώρα μπορείτε να το κάνετε πιο σωστά - αντί για την ετικέτα div, τυλίξτε το μενού στο nav - ένα νέο σημασιολογικό στοιχείο που δημιουργήθηκε ειδικά για τη συλλογή των πιο σημαντικών συνδέσμων σε αυτό, ομαδοποιήστε τα μαζί.

Μπορείτε να βάλετε και μια λίστα και μόνο ένα σύνολο συνδέσμων στο nav. Μου φαίνεται ότι αυτή είναι μια ακόμη πιο απλή και σωστή λύση, αν και σε πολλά πρότυπα μπορείτε ακόμα να δείτε την υλοποίηση του μενού χρησιμοποιώντας ul, li, a tags.

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

Πώς να δημιουργήσετε ένα οριζόντιο μενού χρησιμοποιώντας το html5

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

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

Εδώ θα πρέπει να μετατρέψουμε τα στοιχεία μας σε στοιχεία μπλοκ. Για να γίνει αυτό, πρέπει να γράψουν μια ιδιότητα:

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

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

Κάθετη πλοήγηση

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

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

a( κείμενο-διακόσμηση: κανένα; χρώμα: #fff; padding: 5px; μέγεθος γραμματοσειράς: 22px; οθόνη: block; φόντο: linear-gradient(προς τα δεξιά, rgba(96,108,136,1) 0%, rgba(63,76,107 ,1) 100%), πλάτος: 200 εικονοστοιχεία, στοίχιση κειμένου: κέντρο )

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

χρώμα : #fff;

padding: 5px

μέγεθος γραμματοσειράς : 22 px ;

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

φόντο : γραμμική κλίση (προς τα δεξιά, rgba (96 , 108 , 136 , 1 ) 0 % , rgba (63 , 76 , 107 , 1 ) 100 % ) ;

πλάτος: 200 px

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

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

Πώς να δημιουργήσετε ένα οριζόντιο μενού: παραδείγματα σήμανσης και σχεδίασης

Σήμανση HTML και βασικά στυλ για το οριζόντιο μενού

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

Σήμανση HTML για οριζόντια πλοήγηση

Στοιχείο μενού
Στοιχείο μενού
Στοιχείο μενού

Ένα οριζόντιο μενού που βρίσκεται μέσα στην ετικέτα μπορεί επιπλέον να τοποθετηθεί μέσα στο στοιχείο

...

πρόσθετη ευκαιρία

Υπάρχουν διάφοροι τρόποι για να τα τοποθετήσετε οριζόντια. Πρώτα πρέπει να επαναφέρετε τα προεπιλεγμένα στυλ του προγράμματος περιήγησης για τα στοιχεία πλοήγησης:

Ul (στυλ λίστας: κανένας; /*αφαίρεση των δεικτών λίστας*/ περιθώριο: 0; /*αφαίρεση του επάνω και του κάτω περιθωρίου του 1em*/ padding-left: 0; /*αφαίρεση του αριστερού περιθωρίου 40 px*/ ) a ( κείμενο-διακόσμηση: κανένα; /*αφαιρέστε την υπογράμμιση του κειμένου του συνδέσμου*/)

Μέθοδος 1. li (οθόνη: ενσωματωμένη;)

Κάντε ενσωματωμένα στοιχεία λίστας. Ως αποτέλεσμα, είναι διατεταγμένα οριζόντια, στη δεξιά πλευρά, προστίθεται ένα κενό ίσο με 0,4em μεταξύ τους (υπολογισμένο σε σχέση με το μέγεθος της γραμματοσειράς). Για να το αφαιρέσετε, προσθέστε ένα αρνητικό δεξιό περιθώριο στο li li (περιθώριο-δεξιά: -4px;) . Στη συνέχεια, διαμορφώστε τους συνδέσμους όπως θέλετε.

Μέθοδος 2. li (float: αριστερά;)

Κάνουμε τα στοιχεία της λίστας να αιωρούνται. Ως αποτέλεσμα, είναι διατεταγμένα οριζόντια. Το ύψος του μπλοκ δοχείου ul γίνεται μηδέν. Για να λύσουμε αυτό το πρόβλημα, προσθέτουμε (overflow: hidden;) στο ul , επεκτείνοντάς το και επιτρέποντάς του έτσι να περιέχει αιωρούμενα στοιχεία. Για συνδέσμους, προσθέστε ένα (εμφάνιση: μπλοκ;) και το στυλ τους όπως θέλετε.

Μέθοδος 3. li (οθόνη: inline-block;)

Δημιουργία στοιχείων λίστας inline-block. Είναι διατεταγμένα οριζόντια, σχηματίζεται ένα κενό στη δεξιά πλευρά, όπως στην πρώτη περίπτωση. Για συνδέσμους, προσθέστε ένα (εμφάνιση: μπλοκ;) και το στυλ τους όπως θέλετε.

Μέθοδος 4. ul (οθόνη: flex;)

Κάνοντας τη λίστα ul ένα εύκαμπτο δοχείο χρησιμοποιώντας το . Ως αποτέλεσμα, τα στοιχεία της λίστας τοποθετούνται οριζόντια. Προσθέστε μια (εμφάνιση: μπλοκ;) για συνδέσμους και στυλ τους όπως θέλετε.

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

2. Responsive μενού για ιστότοπο γάμου

3. Responsive μενού με χτένια

4. Responsive Ribbon Menu

5. Responsive μενού με λογότυπο στη μέση

6. Responsive μενού με λογότυπο στα αριστερά

Πρώτα απ 'όλα, ας καταλάβουμε τι είναι το μενού και τι είναι.

μενού τοποθεσίας- αυτή είναι μια λίστα σελίδων ή ενοτήτων του ιστότοπου, τοποθετημένες σε εμφανές σημείο και προορίζονται για πρόσβαση χρηστών σε αυτές τις σελίδες ή ενότητες. Τα μενού είναι δύο τύπων: κύρια και πρόσθετα. Συνήθως, το κύριο μενού περιέχει συνδέσμους προς βασικές ενότητες του ιστότοπου. Τα πρόσθετα μενού συνήθως περιέχουν συνδέσμους προς υποενότητες ή συγκεκριμένες σελίδες. Επιπλέον, τα μενού μπορούν να έχουν μια ιεραρχική δομή 3 τύπων: αναπτυσσόμενη λίστα, αναπτυσσόμενη λίστα και εκτεταμένη λίστα (μπορεί να έχει δομή δέντρου).

Έτσι, ανακαλύψαμε ότι το μενού είναι μια λίστα μονού ή πολλαπλών επιπέδων. Αντίστοιχα, θα το κάνουμε με τη βοήθεια ενός στοιχείου που αντιπροσωπεύει μια λίστα. Στην HTML, τέτοια στοιχεία ορίζονται από ετικέτες ulΚαι ol, που δηλώνουν λίστες με κουκκίδες και αριθμημένες λίστες, αντίστοιχα. Κάθε στοιχείο της λίστας οριοθετείται από μια ετικέτα li.

Στο έγγραφο ιστού μας, στη θέση που προορίζεται για τον οριζόντιο κώδικα μενού, γράψτε τον ακόλουθο κώδικα HTML:

Σπίτι

Υπηρεσίες και τιμές

Εγγυήσεις

τεχνολογίες

Σχετικά με την εταιρεία

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

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

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

Προσθέστε τους ακόλουθους κανόνες στο αρχείο στυλ:

#hmenu(
περιθώριο-αριστερά: 160 εικονοστοιχεία; /* χρησιμεύει για την ευθυγράμμιση του μενού έτσι ώστε να ξεκινά πάνω από την περιοχή περιεχομένου */
}

/* στυλ της καρτέλας */
#hmenu li (
/* ορίστε τη γραμματοσειρά */
γραμματοσειρά-οικογένεια: Calibri;
μέγεθος γραμματοσειράς: 14 px;
/* γέμιση από πάνω */
margin-top: 5px;
/* απόσταση μεταξύ καρτελών */
περιθώριο-αριστερά: 0,5 εκ
περιθώριο-δεξιά: 0,5 εκ
/* δείκτης ποντικιού */
δρομέας: δείκτης;
/* Ιστορικό */
background-image: url("mm_button.png");
background-repeat: no-repeat;
/* διαστάσεις καρτέλας */
πλάτος: 100 px
ύψος: 40 px;
/* κάνει το στοιχείο και ενσωματωμένο και μπλοκ ταυτόχρονα */
οθόνη: inline-block
}

/* ενεργό στυλ καρτέλας */
.selected( /* ... */)

/* καρτέλα στο δείκτη του ποντικιού */
#hmenu li:hover(
background-image: url("mm_button_hover.png");
}

/* στυλ κειμένου συνδέσμων */
#hmenu li a (
χρώμα: πράσινο;
κείμενο-διακόσμηση: κανένα; /* απενεργοποίηση υπογράμμισης συνδέσμου */
}

/* κάθετα στο κέντρο του κειμένου */
#hmenu li a span (
display:block; /* κάντε το μπλοκ στοιχείου */
padding-top: 0,8em;
padding-bottom: 0,8em
}

Όλα περιγράφονται εδώ μέσα στον κώδικα, απλώς θα σημειώσω ότι χρησιμοποιώντας τον παραπάνω κώδικα CSS, μόνο τα σύγχρονα προγράμματα περιήγησης θα εμφανίζουν σωστά τη σελίδα. Δηλαδή μέσα Internet Explorerκάτω από την έκδοση 8, η σελίδα θα αποδοθεί λανθασμένα. Αυτό συμβαίνει επειδή τα παλαιότερα προγράμματα περιήγησης όπως ο Internet Explorer 6 και 7 δεν υποστηρίζουν τις τιμές inline και inline-block για λίστες. Αντικατάσταση της οθόνης: γραμμή inline-block στον δεύτερο κανόνα με

/* για χαμηλότερες εκδόσεις του Firefox */
οθόνη: -moz-inline-stack;
/* για όλους εκτός από τον IE 7- και τον Firefox */
οθόνη: inline-block
/* Για IE 7 και κάτω */
*display:inline;
_υπερχείλιση: κρυφό?
ζουμ: 1;

Ομοίως, θα δημιουργήσουμε ένα μενού στα αριστερά.

Διαγνωστικά

Πρόληψη

Θεραπεία

Χειρουργική επέμβαση

Ας το διαμορφώσουμε με CSS.

#vmenu li a (
χρώμα:Πράσινο;
κείμενο-διακόσμηση:κανένα;
}

#vmenu li(
γραμματοσειρά-οικογένεια: Calibri;
μέγεθος γραμματοσειράς: 14 px;
στυλ γραμματοσειράς:κανονικό;
πλάτος: 115 px;
display:block;
υπερχείλιση:κρυφό; /* απόκρυψη αναδυόμενων στοιχείων */
padding:0,5em 0em 0,5em 0;
/* κάντε το στοιχείο να μοιάζει με κουμπί ορίζοντας το κατάλληλο φόντο */
background-image:url("sm_button.png");
φόντο-θέση:κέντρο;
background-repeat:no-repeat;
}

#vmenu σε ένα διάστημα(
πλάτος: 100 px;
padding-left:1em;
padding-right:100px;
display:block;
}

#vmenu li:hover(
background-image:url("sm_button_hover.png");
}

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

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

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

Κάθετο μενού

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

Η λίστα μας θα περιέχει έναν σύνδεσμο:
- Σπίτι
- Νέα
- Επαφές
- Σχετικά με εμάς
Η επόμενη εργασία μας είναι να επαναφέρουμε τα προεπιλεγμένα στυλ λίστας. Πρέπει να αφαιρέσουμε την εξωτερική και την εσωτερική εσοχή από την ίδια τη λίστα και τους δείκτες από τα στοιχεία της λίστας. Στη συνέχεια ορίστε το επιθυμητό πλάτος:
#navbar ( περιθώριο: 0; padding: 0; list-style-type: none; πλάτος: 100 px; )
Τώρα ήρθε η ώρα να διαμορφώσετε τους ίδιους τους συνδέσμους. Θα προσθέσουμε ένα χρώμα φόντου σε αυτά, θα αλλάξουμε τις παραμέτρους του κειμένου: χρώμα, μέγεθος και κορεσμό της γραμματοσειράς, θα αφαιρέσουμε την υπογράμμιση, θα προσθέσουμε μικρές εσοχές και θα επαναπροσδιορίσουμε την οθόνη στοιχείο από ενσωματωμένο σε μπλοκ. Επιπλέον, το αριστερό και το κάτω πλαίσιο προστέθηκαν στα στοιχεία της λίστας.
Το πιο σημαντικό μέρος των αλλαγών μας είναι ο επαναπροσδιορισμός των ενσωματωμένων στοιχείων σε μπλοκ στοιχεία. Τώρα οι σύνδεσμοί μας καταλαμβάνουν ολόκληρο τον διαθέσιμο χώρο των στοιχείων της λίστας, που σημαίνει ότι δεν χρειάζεται πλέον να τοποθετούμε το δείκτη του ποντικιού πάνω από το ακριβές κείμενο για να ακολουθήσουμε τον σύνδεσμο.
#navbar a (χρώμα φόντου: #949494; χρώμα: #fff; padding: 5px; κείμενο-διακόσμηση: κανένα; βάρος γραμματοσειράς: έντονη γραφή; περίγραμμα αριστερά: 5px συμπαγές #33ADFF; οθόνη: block; ) #navbar li ( περίγραμμα-αριστερά: 10 εικονοστοιχεία συμπαγές #666; κάτω περιγράμματος: 1 εικονοστοιχείο συμπαγές #666; )
Συνδυάσαμε όλο τον παραπάνω κώδικα σε ένα παράδειγμα, τώρα κάνοντας κλικ στο κουμπί δοκιμής, μπορείτε να μεταβείτε στη σελίδα του παραδείγματος και να δείτε το αποτέλεσμα:
Όνομα εγγράφου
- Σπίτι
- Νέα
- Επαφές
- Σχετικά με εμάς
Δοκιμάστε "
Όταν τοποθετείτε το ποντίκι σας πάνω από ένα στοιχείο μενού, αυτό εμφάνισημπορεί να αλλάξει για να προσελκύσει την προσοχή του χρήστη. Μπορείτε να δημιουργήσετε ένα τέτοιο εφέ χρησιμοποιώντας την ψευδο-κλάση :hover.

Ας επιστρέψουμε στο προηγούμενο παράδειγμα κατακόρυφου μενού και προσθέστε τον ακόλουθο κανόνα στο φύλλο στυλ:
#navbar a:hover (χρώμα φόντου: #666; περίγραμμα αριστερά: 5px συμπαγές #3333FF; ) Δοκιμάστε »
Οριζόντιο μενού

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

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

Για να τακτοποιήσετε τα στοιχεία μενού οριζόντια, δημιουργήστε πρώτα μια λίστα με κουκκίδες με συνδέσμους:
- Σπίτι
- Νέα
- Επαφές
- Σχετικά με εμάς
Ας γράψουμε μερικούς κανόνες για τη λίστα μας που επαναφέρουν το στυλ που χρησιμοποιείται για τις λίστες από προεπιλογή και ας επαναπροσδιορίσουμε τα στοιχεία της λίστας από μπλοκ σε ενσωματωμένο:
#navbar ( περιθώριο: 0; padding: 0; list-style-type: none; ) #navbar li ( display: inline; ) Δοκιμάστε »
Τώρα πρέπει απλώς να ορίσουμε το στυλ για το οριζόντιο μενού μας:
#navbar ( περιθώριο: 0; padding: 0; list-style-type: none; περίγραμμα: 2px solid #0066FF; border-radius: 20px 5px; πλάτος: 550px; text-align: center; background-color: #33ADFF; ) #navbar a ( χρώμα: #fff; padding: 5 px 10 px; text-decoration: none; font-weight: bold; display: inline-block; πλάτος: 100px; ) #navbar a:hover ( border-radius: 20px 5px ; χρώμα φόντου: #0066FF; ) Δοκιμάστε »
Πτυσώμενο μενού

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

Πρώτα πρέπει να δημιουργήσουμε τη δομή HTML του μενού μας. Θα τοποθετήσουμε τους κύριους συνδέσμους πλοήγησης σε μια λίστα με κουκκίδες:
- Σπίτι
- Νέα
- Επαφές
- Σχετικά με εμάς
Θα τοποθετήσουμε υπο-στοιχεία σε μια ξεχωριστή λίστα, τοποθετώντας τα σε ένα στοιχείο
, το οποίο περιέχει τον γονικό σύνδεσμο σε σχέση με τα υποστοιχεία. Τώρα έχουμε μια σαφή δομή για τη μελλοντική μας γραμμή πλοήγησης:
- Σπίτι
- Νέα
- Επαφές
  - Διεύθυνση
  - Τηλέφωνο
  - ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ
- Σχετικά με εμάς
Δοκιμάστε "
Τώρα ας αρχίσουμε να γράφουμε τον κώδικα CSS. Το πρώτο βήμα είναι να αποκρύψετε τη λίστα με τα δευτερεύοντα στοιχεία με την εμφάνιση: κανένα, δήλωση, ώστε να μην εμφανίζονται συνεχώς στην ιστοσελίδα. Για να εμφανίσουμε υποστοιχεία, το χρειαζόμαστε όταν τοποθετούμε τον δείκτη του ποντικιού πάνω από ένα στοιχείο

η λίστα έχει μετατραπεί ξανά σε στοιχείο μπλοκ:

#navbar ul ( οθόνη: κανένα; ) #navbar li:hover ul ( εμφάνιση: μπλοκ; )

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

#navbar, #navbar ul ( περιθώριο: 0; padding: 0; list-style-type: none; ) #navbar li ( float: αριστερά; ) #navbar ul li ( float: none; )

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

#navbar ul ( οθόνη: καμία; θέση: απόλυτη; επάνω: 100%; ) #navbar li ( float: αριστερά; θέση: σχετική; ) #navbar ( ύψος: 30 px; ) Δοκιμάστε »

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

Τώρα πρέπει απλώς να διαμορφώσουμε στυλ και στις δύο λίστες μας και το αναπτυσσόμενο μενού μας θα είναι έτοιμο:

#navbar ul ( οθόνη: κανένα; χρώμα φόντου: #f90; θέση: απόλυτο; επάνω: 100%; ) #navbar li:hover ul ( οθόνη: μπλοκ; ) #navbar, #navbar ul ( περιθώριο: 0; padding: 0; list-style-type: none; ) #navbar ( ύψος: 30px; background-color: #666; padding-left: 25px; min-width: 470px; ) #navbar li ( float: αριστερά; position: relative; ύψος: 100%; ) #navbar li a ( οθόνη: block; padding: 6px; πλάτος: 100px; χρώμα: #fff; text-decoration: none; text-align: center; ) #navbar ul li (float: none; ) #navbar li:hover (χρώμα φόντου: #f90; ) #navbar ul li:hover (χρώμα φόντου: #666; )

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

Το πρώτο σεμινάριο CSS3 Dropdown Menu είναι το νεότερο στη συλλογή (ημερομηνία Απριλίου 2016). Πλεονεκτήματα της λύσης: σε αυτό το οριζόντιο αναπτυσσόμενο μενού για τον ιστότοπο, υπάρχουν εικονίδια σε υποστοιχεία, η υλοποίηση και ο ίδιος ο κώδικας CSS είναι αρκετά εύκολο να κατανοηθούν και να εφαρμοστούν.

Βήμα 1 - Σήμανση HTML

Το πρώτο βήμα είναι να δημιουργήσετε μια μη ταξινομημένη λίστα σε HTML με συνδέσμους αγκύρωσης (#) για τα στοιχεία της. Εκεί, σε ένα από τα στοιχεία, προσθέτουμε μια άλλη ένθετη λίστα που θα είναι υπεύθυνη για το υπομενού.

Βήμα 2 - εμφάνιση του μενού

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

.menu, .menu ul, .menu li, .menu a ( περιθώριο : 0 ; padding : 0 ; περίγραμμα : κανένα ; περίγραμμα : κανένα ; ) .menu (ύψος : 40 px ; πλάτος : 505 px ; φόντο : #4c4e5a ; φόντο : #4c4e5a ; -webkit-linear-gradient(top , #4c4e5a 0% , #2c2d33 100%) ; background : -moz-linear-gradient(top , #4c4e5a 0% , #2c2d33 100%) ; background : -o-linear-gradient (πάνω , #4c4e5a 0% , #2c2d33 100% ) ; φόντο : -ms-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; background : linear-gradient(top , #4c4e5a 0% . μπλοκ; ύψος: 40 px;)

Menu, .menu ul, .menu li, .menu a ( περιθώριο: 0; padding: 0; περίγραμμα: κανένα; περίγραμμα: κανένα; ) .menu (ύψος: 40 px; πλάτος: 505 px; φόντο: #4c4e5a; φόντο: - webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: -o-linear-gradient( top, #4c4e5a 0%,#2c2d33 100%); φόντο: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); φόντο: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; ) .menu li ( θέση: σχετική; στιλ λίστας: κανένα; float: αριστερά; εμφάνιση: μπλοκ ; ύψος: 40 px; )

Βήμα 3 - Σχεδιασμός συνδέσμων

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

.menu li a ( οθόνη : μπλοκ ; πλήρωση : 0 14 εικονοστοιχεία ; περιθώριο : 6 εικονοστοιχεία 0 , ύψος γραμμής : 28 εικονοστοιχεία , διακόσμηση κειμένου : κανένα , περίγραμμα αριστερό : 1 εικονοστοιχείο συμπαγές #393942 , περίγραμμα δεξιά : 1 εικονοστοιχείο 5 συμπαγή γραμματοσειρά #45 ; -οικογένεια: Helvetica, Arial, sans-serif; βάρος γραμματοσειράς: έντονη γραφή; μέγεθος γραμματοσειράς: 13px; χρώμα: #f3f3f3; σκιά κειμένου: 1px 1px 1px rgba (0 , 0 , 0 ;- -we6). μετάβαση: χρώμα. -out; μετάβαση : χρώμα .2s ease-in-out;) .menu li: first-child a ( border-left : none ; ) .menu li: last-child a( border-right : none ;) .menu li : hover > a ( χρώμα : #8fde62 ; )

Μενού li a ( οθόνη: μπλοκ, συμπλήρωση: 0 14 εικονοστοιχεία, περιθώριο: 6 εικονοστοιχεία 0, ύψος γραμμής: 28 εικονοστοιχεία, διακόσμηση κειμένου: κανένα, περίγραμμα αριστερά: 1 εικονοστοιχείο συμπαγές #393942, περίγραμμα δεξιά: 1 εικονοστοιχείο συμπαγές #4f5058, γραμματοσειρά- οικογένεια: Helvetica, Arial, sans-serif; βάρος γραμματοσειράς: έντονη γραφή; μέγεθος γραμματοσειράς: 13 px; χρώμα: #f3f3f3; σκιά κειμένου: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition : χρώμα .2s ease-in-out; -moz-transition: color .2s ease-in-out; -o-transition: color .2s ease-in-out; -ms-transition: color .2s ease-in- out; μετάβαση: χρώμα .2s ease-in-out;) .menu li:first-child a ( border-αριστερά: κανένας; ) .menu li:last-child a( border-right: none; ) .menu li: hover > a ( χρώμα: #8fde62; )

Βήμα 4 - υπομενού

Εφόσον έχουμε ένα αναπτυσσόμενο μενού τοποθεσιών CSS, θα πρέπει επίσης να ορίσουμε τη σχεδίαση της ένθετης λίστας. Αρχικά, ρυθμίστε την επένδυση σε 40 εικονοστοιχεία στην κορυφή και 0 εικονοστοιχεία στα αριστερά + προσθέστε στρογγυλεμένες γωνίες. Για την εμφάνιση/απόκρυψη του υπομενού, ορίσαμε αρχικά την ιδιότητα αδιαφάνειας σε μηδέν και κατά το δείκτη του ποντικιού σε ένα. Για να δημιουργήσετε το εφέ της εμφάνισης ενός υπομενού, ορίστε το ύψος της λίστας σε μηδέν και τοποθετήστε το δείκτη του ποντικιού = 36 εικονοστοιχεία.

.menu ul ( θέση : απόλυτη ; επάνω : 40 εικονοστοιχεία ; αριστερά : 0 , αδιαφάνεια : 0 , φόντο : #1f2024 ; -webkit-border-radius: 0 0 5 px 5 px ; -moz-border-radius: 0 0 pxx; -ακτίνα : 0 0 5 εικονοστοιχεία 5 εικονοστοιχεία ; -κιτ ιστού-μετάβαση: αδιαφάνεια .25 δευτ. ευκολία .1 δευτ. .25s ease .1s; transition: opacity.25s ease : ύψος .25 δευτ. ευκολία .1 δευτ.; -moz-μετάβαση: ύψος .25 δευτ. ευκολία .1δ. .1s ;) .menu li: hover > ul li (ύψος : 36 px ; υπερχείλιση : ορατό ; padding : 0 ; )

Μενού ul ( θέση: απόλυτη; επάνω: 40 εικονοστοιχεία; αριστερά: 0; αδιαφάνεια: 0; φόντο: #1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border- ακτίνα: 0 0 5 px 5 px, -webkit-μετάβαση: αδιαφάνεια .25s ease .1s· -moz-transition: αδιαφάνεια .25s ευκολία .1s· -o-transition: αδιαφάνεια .25s ευκολία .1s· -ms-transition: αδιαφάνεια . 25s ease .1s; μετάβαση: αδιαφάνεια .25s ease .1s; ) .menu li:hover > ul ( αδιαφάνεια: 1; ) .menu ul li (ύψος: 0; υπερχείλιση: κρυφό; padding: 0; -webkit-transition: ύψος .25 δευτ. ευκολία .1 δ. -moz-μετάβαση: ύψος .25 δευτ. ευκολία .1δ. -ο-μετάβαση: ύψος .25 δευτ. ευκολία .1δ. 1s; ) .menu li:hover > ul li (ύψος: 36 εικονοστοιχεία, υπερχείλιση: ορατή, συμπλήρωση: 0; )

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

.menu ul li a ( πλάτος : 100 εικονοστοιχεία ; συμπλήρωση : 4 εικονοστοιχεία 0 4 εικονοστοιχεία 40 εικονοστοιχεία ; περιθώριο : 0 ; περίγραμμα : κανένα ; περίγραμμα-κάτω : 1 εικονοστοιχείο συμπαγές #353539 ; ) .μενού ul li: τελευταίο παιδί a ( περίγραμμα :) .menu a.documents ( φόντο : url (../img/docs.png ) μη επανάληψη 6 εικονοστοιχεία στο κέντρο ; ) .menu a.messages ( φόντο : url (../img/bubble.png ) μη επανάληψη 6 εικονοστοιχεία στο κέντρο ; ) .menu a.signout ( φόντο : url (../img/arrow.png ) μη επανάληψη 6 εικονοστοιχεία στο κέντρο ; )

Μενού ul li a ( πλάτος: 100 εικονοστοιχεία, συμπλήρωση: 4 εικονοστοιχεία 0 4 εικονοστοιχεία 40 εικονοστοιχεία, περιθώριο: 0, περίγραμμα: κανένα; περίγραμμα-κάτω: 1 εικονοστοιχεία συμπαγές #353539; ) .menu ul li:last-child a ( περίγραμμα: κανένα; ) . μενού α.έγγραφα ( φόντο: url(../img/docs.png) μη επανάληψη 6 εικονοστοιχεία κέντρο; ) .menu a.messages ( φόντο: url(../img/bubble.png) μη επανάληψη 6px κέντρο; ) .menu a.signout ( φόντο: url(../img/arrow.png) μη επανάληψη 6 εικονοστοιχεία στο κέντρο; )

Προσωπικά μου αρέσει η ευκολία υλοποίησης και χρήσης εικονιδίων. Εδώ είναι ο τελικός κωδικός με το codepen:

Η έκδοση του Josh Riser είναι οπτικά παρόμοια με το προηγούμενο αναπτυσσόμενο μενού σε HTML και CSS. Δεν υπάρχει ">" θυγατρικός επιλογέας στον κώδικα (χρήσιμος σε σχέδια με στρώσεις), αλλά ο συγγραφέας χρησιμοποιεί επιτυχώς εφέ CSS3 (μετάβαση, πλαίσιο-σκιά και σκιά κειμένου) για πιο όμορφο αποτέλεσμα. Σύμφωνα με τον σύνδεσμο στην πηγή, δεν υπάρχει περιγραφή της διαδικασίας δημιουργίας ενός οριζόντιου αναπτυσσόμενου μενού, οπότε θα δώσω αμέσως τον τελικό κωδικό:

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

Κώδικας HTML

Για την πλοήγηση, όπως πάντα, χρησιμοποιείται μια μη ταξινομημένη λίστα (με την κλάση nav). Τα κανονικά στοιχεία μενού είναι στοιχεία λίστας (li) και περιέχουν συνδέσμους (a href) χωρίς κλάσεις ή αναγνωριστικά. Εξαίρεση αποτελούν τα 3 εξειδικευμένα στοιχεία αυτού του οριζόντιου αναπτυσσόμενου μενού με τα ακόλουθα αναγνωριστικά:

ρυθμίσεις - σύνδεσμος εικόνας.
αναζήτηση - ένα μπλοκ με μια αναζήτηση και ένα αντίστοιχο κουμπί.
επιλογές - περιέχει ένα υπομενού (που υλοποιείται μέσω μιας λίστας με την κλάση subnav).

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

Εφαρμογή
Σανίδα
Επιλογές
- Ρυθμίσεις
- Εφαρμογή
- Σανίδα
- Επιλογές

Εφαρμογή
Σανίδα
Επιλογές
- Ρυθμίσεις
- Εφαρμογή
- Σανίδα
- Επιλογές

CSS για το μενού

1. Βασικά στυλ και στοιχεία μενού

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

@import url (http: //fonts.googleapis .com/css?family= Μονσεράτ) ; * ( περιθώριο : 0 ; padding : 0 ; ) .nav (φόντο : #232323 ; ύψος : 60 εικονοστοιχεία ; οθόνη : ενσωματωμένο μπλοκ ; ) .nav li ( float : αριστερά , τύπος λίστας : κανένας , θέση : σχετική ; )

@import url(http://fonts.googleapis.com/css?family=Montserrat); * ( περιθώριο: 0; padding: 0; ) .nav ( φόντο: #232323; ύψος: 60 εικονοστοιχεία; εμφάνιση: inline-block; ) .nav li ( float: αριστερά; list-style-type: none; position: relative; )

2. Μορφοποίηση συνδέσμων

Τα στοιχεία μενού χρησιμοποιούν το βασικό στυλ + . Το ύψος είναι το ίδιο όπως στην κατηγορία nav. Οι #settings του συνδέσμου εικόνας στην αρχή του μενού έχουν ρυθμιστεί για ευθυγράμμιση.

.nav li a (μέγεθος γραμματοσειράς : 16 εικονοστοιχεία ; χρώμα : λευκό , οθόνη : μπλοκ , ύψος γραμμής : 60 εικονοστοιχεία , επένδυση : 0 26 εικονοστοιχεία , διακόσμηση κειμένου : κανένα , περίγραμμα αριστερά : 1 εικονοστοιχείο στερεά #2e2e2e , γραμματοσειρά: Montserfami , sans-serif ;text-shadow : 0 0 1px rgba (255 , 255 , 255 , 0,5 ) ; ) .nav li a: hover ( background-color : #2e2e2e ; ) #settings a ( padding ; 4p: 18p ; μέγεθος γραμματοσειράς : 10 εικονοστοιχεία ; ύψος γραμμής : 24 εικονοστοιχεία ; )

Nav li a ( μέγεθος γραμματοσειράς: 16 εικονοστοιχεία, χρώμα: λευκό, οθόνη: μπλοκ, ύψος γραμμής: 60 εικονοστοιχεία, επένδυση: 0 26 εικονοστοιχεία, διακόσμηση κειμένου: κανένα, περίγραμμα αριστερά: 1 εικονοστοιχείο συμπαγές #2e2e2e, οικογένεια γραμματοσειράς: Μονσεράτ, sans-serif;text-shadow: 0 0 1px rgba(255, 255, 255, 0.5); ) .nav li a:hover ( background-color: #2e2e2e; ) #settings a ( padding: 18px; height: 24px; μέγεθος γραμματοσειράς: 10 εικονοστοιχεία, ύψος γραμμής: 24 εικονοστοιχεία; )

3. Μπλοκ αναζήτησης

Αυτό το στοιχείο έχει σταθερό πλάτος και αποτελείται από πολλά μέρη - ένα πεδίο εισαγωγής (#search_text) με πράσινο φόντο και ένα κουμπί αναζήτησης (#search_button). Σε ορισμένα προγράμματα περιήγησης, το χρώμα του φόντου μπορεί να είναι γκρι.

#search ( πλάτος : 357 εικονοστοιχεία ; περιθώριο : 4 εικονοστοιχεία ; ) #search_text ( πλάτος : 297 εικονοστοιχεία ; πλήρωση : 15 εικονοστοιχεία 0 15 εικονοστοιχεία 20 εικονοστοιχεία ; μέγεθος γραμματοσειράς : 16 εικονοστοιχεία ; γραμματοσειράς-οικογένεια : ύψος 5: Montserx0 ; margin-right : 0 ; χρώμα : λευκό ; περίγραμμα : κανένα ; φόντο : #1f7f5c ; float : αριστερά ; μέγεθος πλαισίου : border-box ; μετάβαση : όλα 0,15s ; ) :: -webkit-input-placeholder ( /* Προγράμματα περιήγησης WebKit */ χρώμα : λευκό ; ) : -moz-placeholder ( /* Mozilla Firefox 4 έως 18 */ χρώμα : λευκό ; ) :: -moz-placeholder ( /* Mozilla Firefox 19+ */ χρώμα : λευκό ; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ χρώμα : λευκό ; ) #search_text : εστίαση ( φόντο : rgb (64, 151, 119) ύψος: 52 εικονοστοιχεία; δρομέας: δείκτης;)

#αναζήτηση ( πλάτος: 357 εικονοστοιχεία; περιθώριο: 4 εικονοστοιχεία; ) #search_text( πλάτος: 297 εικονοστοιχεία; πλήρωση: 15 εικονοστοιχεία 0 15 εικονοστοιχεία 20 εικονοστοιχεία; μέγεθος γραμματοσειράς: 16 εικονοστοιχεία; οικογένεια γραμματοσειράς: Μονσεράτ, sans-serif; ύψος: 0 ; περιθώριο-δεξιά: 0; χρώμα: λευκό; περίγραμμα: κανένα; φόντο: #1f7f5c; float: αριστερά; μέγεθος πλαισίου: πλαίσιο-πλαίσιο; μετάβαση: όλα τα 0,15 δευτ.; ) ::-webkit-input-placeholder ( /* Προγράμματα περιήγησης WebKit */ χρώμα: λευκό; ) :-moz-placeholder ( /* Mozilla Firefox 4 έως 18 */ χρώμα: λευκό; ) ::-moz-placeholder ( /* Mozilla Firefox 19+ */ χρώμα: λευκό; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ χρώμα: λευκό; ) #search_text:focus ( φόντο: rgb(64, 151, 119); ) #search_button ( περίγραμμα: 0 κανένα; φόντο: #1f7f5c url (search.png) κέντρο χωρίς επανάληψη, πλάτος: 60 εικονοστοιχεία, float: αριστερά, συμπλήρωση: 0, στοίχιση κειμένου: κέντρο, ύψος: 52 εικονοστοιχεία, δρομέας: δείκτης, )

4. Αναπτυσσόμενο υπομενού

Το τελευταίο άγγιγμα θα μας επιτρέψει να δημιουργήσουμε ένα αναπτυσσόμενο μενού CSS που να λειτουργεί τελευταίο σημείο#επιλογές.

#options a( border-left : 0 none ; ) #options > a ( background-image : url (triangle.png ) ; background-position : 85% center ; background-repeat : no-repeat ; padding-right : 42px ; ) .subnav ( ορατότητα : κρυφό ; θέση : απόλυτη ; επάνω : 110% , δεξιά : 0 , πλάτος : 200 εικονοστοιχεία , ύψος : αυτόματη , αδιαφάνεια : 0 , μετάβαση : όλα τα 0,1 δευτ. ; φόντο : #232323 ; ) (lifloat .

#options a( border-left: 0 none; ) #options>a ( background-image: url(triangle.png); background-position: 85% center; background-repeat: no-repeat; padding-right: 42px; ) .subnav ( ορατότητα: κρυφή; θέση: απόλυτη; επάνω: 110%; δεξιά: 0; πλάτος: 200 εικονοστοιχεία; ύψος: αυτόματη; αδιαφάνεια: 0; μετάβαση: όλα τα 0,1 δευτ.; φόντο: #232323; ) .subnav li ( float : none; ) .subnav li a ( border-bottom: 1px solid #2e2e2e; ) #options:hover .subnav ( ορατότητα: ορατή; επάνω: 100%; αδιαφάνεια: 1; )

Στα στυλ, θα βρείτε μια εισαγωγή μιας εικόνας φόντου τριγώνου (triangle.png) για να υποδείξετε το υπομενού - μην ξεχάσετε να καθορίσετε τη σωστή διαδρομή για αυτήν και άλλες εικόνες στο παράδειγμα. Η εμφάνιση του υπομενού υλοποιείται χρησιμοποιώντας την ιδιότητα αδιαφάνεια. Τελική λύση στο codepen:

Αυτή η επιλογή χρησιμοποιεί κυρίως τεχνικές CSS2.1, η λύση είναι συν ή πλην νέα - για τον Μάρτιο του 2015. Εάν λείπει ένα υποεπίπεδο στο οριζόντιο αναπτυσσόμενο μενού για τον ιστότοπο, τότε αυτό το παράδειγμα περιέχει τρία ταυτόχρονα. Η ψευδο-κλάση :only-child προσθέτει ένα σύμβολο "+" σε στοιχεία για να υποδείξει την παρουσία υπομενού.

Γενικά ένα καλό και απλό παράδειγμα. Δεν θα περιγράψουμε λεπτομερώς τη διαδικασία υλοποίησης, γιατί είναι παρόμοιο με τα προηγούμενα - πρώτα δημιουργείτε έναν σκελετό HTML και, στη συνέχεια, προσθέτετε σταδιακά στυλ για αυτόν. Κατεβάστε τον τελικό κώδικα από τον σύνδεσμο προς την πηγή, μπορείτε να τον δείτε εν μέρει στο Codepen:

Σύνολο

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

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

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