Pure CSS / HTML αναπτυσσόμενο μενού

1. Pure CSS / HTML αναπτυσσόμενο μενού Σε αυτό το σεμινάριο θα κάνουμε ένα κλασικό οριζόντιο μενού σε...
2. Ζωντανεύουμε το οριζόντιο μενού ενώ δείχνουμε.
3. Περιγράψτε το αναπτυσσόμενο μενού CSS / HTML

Pure CSS / HTML αναπτυσσόμενο μενού

Σε αυτό το σεμινάριο θα κάνουμε ένα κλασικό οριζόντιο μενού σε καθαρό CSS. Έχει εικονίδια στις λίστες. Όταν δείχνετε σε ένα στοιχείο, αλλάζει ομαλά το χρώμα του κουμπιού και του κειμένου, προστίθεται μια σκιά. Οι αναπτυσσόμενες λίστες μπορούν να γίνουν σε πολλαπλά επίπεδα και το κυριότερο είναι όλα απλά υλοποιημένα σε καθαρό CSS3.

Η συνέχιση αυτού του μαθήματος εδώ - μέρος 2 MOBILE VERSION οριζόντιο μενού ".

Δείτε το στυλό POyzbW από τον Denis ( @Dwstroy ) στο Codepen .

Στη χρήση του μαθήματος:

• οθόνη: flex;
• χρήση της μετάβασης ·
• τοποθετήστε τα στοιχεία με τη θέση.

Οριζόντια δομή μενού HTML

Αρχικά, γράψτε τη σήμανση κάτω από το οριζόντιο μενού. Ανοίγουμε το περιβάλλον ανάπτυξης μας στην περίπτωσή μου, αυτό είναι το PhpStorm, δημιουργήστε ένα αρχείο index.html, ορίστε το πλαίσιο html: 5, αντικαταστήστε το lang με ru.

Όλα τα meta θα διαγραφούν εκτός από την κωδικοποίηση, θα εγγραφώ τον τίτλο μου " Τομ μενού ".

Μεταξύ του σώματος γράφουμε την ετικέτα κεφαλίδας και σε αυτό υπάρχει ένα μπλοκ με το .dws-class που θα περιέχει το μενού μας. Στη συνέχεια, η δομή θα είναι ως εξής, θα δημιουργήσουμε καταλόγους με το ποσό των πέντε τεμαχίων. Σε κάθε λίστα θα υπάρχει ένας σύνδεσμος με το χαρακτηριστικό href = "#". Στη συνέχεια θα πάω στην εικόνα με την κλάση .fa .fa-

<header> <nav class = "dws-menu"> ul> li * 5> a [href = "#"]

Πατάμε για να υποβάλετε αίτηση.

Ας γράψουμε το όνομα των στοιχείων του μενού ( Σπίτι, Προϊόντα, Υπηρεσίες, Ειδήσεις, Επαφές ).

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

<i class = "fa fa- home "> </ i> <i class = "fa fa- shopping cart "> <i class = "fa facogs" = "fa fa -list "> </ i> <i class = "fa fa -envelope-open "> </ i>

Κάντε λήψη του αρχείου από το site με εικονίδια, εξαγάγετε τα περιεχόμενά του στον υπολογιστή σας, αντιγράψτε το φάκελο γραμματοσειρών και το φάκελο css στο αναπτυξιακό σας περιβάλλον.

Ο φάκελος γραμματοσειρών περιέχει γραμματοσειρές εικονιδίων και ο φάκελος css περιέχει τα στυλ τους. Τα συμπιεσμένα στυλ μπορούν να αφαιρεθούν font-awesome.min, συνδέουμε τη μη συμπιεσμένη γραμματοσειρά-awesome.css.

Στο index.html συνδέουμε εικονίδια και καταχωρούμε κάθε στοιχείο με δικό του στυλ εικονιδίου ( σπίτι , καλάθι αγορών , γρανάζια , th-list , ανοιχτό φάκελο ).

Έχουμε κάνει το κύριο πλαίσιο, δημιουργούμε ένα υπομενού μετά την περιγραφή του κύριου στυλ και τώρα θα δημιουργήσουμε ένα αρχείο όπου θα περιγράψουμε τα κύρια στυλ του οριζόντιου μενού style.css και θα το συνδέσουμε στο index.html. Για να ελέγξετε ότι τα στυλ είναι συνδεδεμένα, δημιουργήστε ένα φάκελο img, σε αυτό θα τοποθετήσω μια αυθαίρετη εικόνα στο παρασκήνιο. Ας γράψουμε τη σύνδεση εικόνας χρησιμοποιώντας το φόντο.

σώμα {φόντο-εικόνα: url ("../ img / ep_naturalwhite.png"); }}

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

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

.dws-μενού * {περιθώριο: 0; padding: 0; }}

Ορίστε την κεφαλίδα σε 200 κορυφές. και ορίστε το οποίο μπορείτε να κατεβάσετε και να συνδεθείτε ξεχωριστά στον εαυτό σας στον ιστότοπο, μόνο σε περίπτωση, να γράψετε πρόσθετες γραμματοσειρές.

επικεφαλίδα {margin: 200px; γραμματοσειρά-οικογένεια: Cuprum, Arial, Helvetica, sans-serif; }}

Απόκρυψη των σημείων στις λίστες:

.dws-μενού ul, .dws-μενού ol {style-style: none; }}

Οι λίστες θα εμφανίζονται οριζόντια με την οθόνη: λινάρι, και θα το κάνουμε στο κέντρο:

.dws-μενού> ul {display: flex; justify-content: center; }}

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

επικεφαλίδα { margin-top: 200px; γραμματοσειρά-οικογένεια: Cuprum, Arial, Helvetica, sans-serif; }}

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

Επιλέξτε links nav> ul li, και κάντε τους να μπλοκάρουν στοιχεία. Ορίστε το φόντο του μενού, γράψτε τις εσοχές, καθορίστε το μέγεθος, το χρώμα, αφαιρέστε την υπογράμμιση και κάντε τις επικεφαλίδες με κεφαλαία γράμματα.

.dws-μενού> ul li α {εμφάνιση: μπλοκ; background: #ececed; padding: 15px 30px 15px 40px; γραμματοσειρά-μέγεθος: 14px; χρώμα: # 454547; κείμενο-διακόσμηση: κανένα? κείμενο-μετασχηματισμός: κεφαλαία? }}

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

.ws-menu> ul li {θέση: συγγενής; }}

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

.dws-μενού> ul li> a i.fa {θέση: απόλυτη; κορυφή: 15px; αριστερά: 12px; γραμματοσειρά-μέγεθος: 18px; }}

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

.dws-μενού> ul li: πρώτο-παιδί {border-left: 1px στερεό # b2b3b5; } .dws-μενού> ul li: last-child {border-right: 1px solid #babbbd; }}

Κάνοντας τους οριοθέτες για τις λίστες LI:

.ws-menu> ul li {θέση: συγγενής; border-right: 1px solid # c7c8ca; }}

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

Ζωντανεύουμε το οριζόντιο μενού ενώ δείχνουμε.

Επιλέξτε συνδέσμους και αντιστοιχίστε ένα χρώμα στο μπλοκ και ορίστε το χρώμα του ίδιου του συνδέσμου με το εικονίδιο σε λευκό. Ας προσθέσουμε μια άλλη σκοτεινή σκιά. Με τη βοήθεια της μετάβασης σε 0,3 δευτερόλεπτα θα κάνουμε μια ομαλή εμφάνιση:

.dws-menu li a: hover (φόντο: # 454547; χρώμα: #ffffff; κουτί-σκιά: 1px 5px 10px -5px μαύρο; μετάβαση: όλα 0.3s ευκολία? }}

Και για να το εξαφανίσετε ομαλά, προσθέστε αυτό το στυλ στη σύνδεση άνετα:

.dws-μενού> ul li α {εμφάνιση: μπλοκ; background: #ececed; padding: 15px 30px 15px 40px; γραμματοσειρά-μέγεθος: 14px; χρώμα: # 454547; κείμενο-διακόσμηση: κανένα? κείμενο-μετασχηματισμός: κεφαλαία? μετάβαση: όλα 0.3s ευκολία? }}

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

Περιγράψτε το αναπτυσσόμενο μενού CSS / HTML

Περίπου ανοίγουμε το index.html και προσθέτουμε, για παράδειγμα, ένα πρόσθετο μενού στα προϊόντα. Εισαγάγετε το UL μεταξύ των λίστας LI και τοποθετήστε σε αυτό πέντε λίστες, οι οποίες θα περιέχουν συνδέσμους με το χαρακτηριστικό herf = "#".

ul> li * 5> α [href = "#"]

Πατάμε για να υποβάλετε αίτηση, γράψτε το όνομα των αντικειμένων ( Ρούχα, Ηλεκτρονικά, Τρόφιμα, Εργαλεία, Ζωή, Χημεία ).

<ul> <li> <a href="#"> Ένδυση </a> </ li> <li> <a href="#"> Ηλεκτρονικά </a> </ li> <li> <a href = "#"> Τρόφιμα </a> </ li> <li> <a href="#"> Εργαλεία </a> </ li> <li> <a href="#"> Ζωή. χημεία </a> </ li> </ ul>

Στη συνέχεια, ανοίξτε το style.css και περιγράψτε τα στυλ υπομενού.

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

/ * δευτερεύον μενού * / .dws-μενού li ul {position: absolute; min-πλάτος: 150px. }}

Ας γράψουμε στους καταλόγους των συνόρων σε 1 κορυφή.

.dws-menu li> ul li {σύνορα: 1px στερεά # c7c8ca; }}

Για τους συνδέσμους στο υπομενού, θα ορίσουμε εσοχές στις 10 κορυφές., Αφαιρέστε το μετασχηματισμό κειμένου και κάνετε το φόντο μερικούς τόνους πιο σκούρο φόντο: # e4e4e5; .

.dws-menu li> ul li a {padding: 10px; μετασχηματισμός κειμένου: κανένας; φόντο: # e4e4e5; }}

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

<li> <a href="#"> Ηλεκτρονικά </a> <ul> <li> <a href="#"> Κάμερες </a> </ li> <li> <a href="#"> Υπολογιστές </a> </ li> <li> <a href="#"> Τηλέφωνα </a> </ li> </ ul> </ li>

Φέρνουν έξω, αλλά κρυμμένα κάτω από το κύριο μενού, τώρα θέση: απόλυτη? ένθετο UL και μετακινήστε το στην κορυφή 150. στο πλάι:

.dws-menu li> ul li ul {θέση: απόλυτο; δεξιά: -150px; αρχή: 0; }}

Στη συνέχεια, θα εμφανιστεί το υπομενού κατά τη στόχευση των κύριων στοιχείων του επάνω μενού, γι 'αυτό προσθέτουμε την οθόνη: καμία. και έτσι να κρύβουν όλα τα εσωτερικά σημεία.

/ * δευτερεύον μενού * / .dws-μενού li ul {position: absolute; min-πλάτος: 150px. οθόνη: καμία · }}

Και για την εμφάνισή τους, θα επιλέξουμε τις λίστες πάνω στο δείκτη και θα τις εμφανίσετε με τη βοήθεια της οθόνης: μπλοκ? .

.dws-μενού li: hover> ul {εμφάνιση: μπλοκ; }}

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

<ul> <li> <a href="#"> <i class = "fa fa-home"> Αρχική σελίδα </ li> <li> <a href="#"> < <li> <li> <a href="#"> Ένδυση </a> <ul> <li> <a href = "#"> Παπούτσια </a> </ li> <li> <a href="#"> Μπουφάν </a> </ li> <li> <a href="#"> Παντελόνια </a> < / li> </ ul> </ li> <li> <a href="#"> Ηλεκτρονικά </a> <ul> <li> <a href="#"> Κάμερες </a> </ li> <li> <a href="#"> Υπολογιστές </a> </ li> <li> <a href="#"> Τηλέφωνα </a> <ul> <li> <a href="#"> Samsung </a> </ li> <li> <a href="#"> Flf </a> </ li> <li> <a href="#"> Apple </a> </ li> / ul> </ li> </ ul> </ li> <li> <a href="#"> Τρόφιμα </a> </ li> <li> <a href="#"> Εργαλεία </ h a> </ li> <li> <a href="#"> Γεν. Χημεία </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-cogs"> </ i> > <li> <a href="#"> Υπηρεσία 1 </a> </ li> <li> <a href="#"> Υπηρεσία 2 </a> </ li> <li> <a href = </ Li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-th-list"> </ i> Νέα </a> </ li> <li> <a href="#"> Επαφές </ li> </ ul> <i class = "fa fa-

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

.dws-μενού> ul li α {εμφάνιση: μπλοκ; / * Permalink - αυτή η κλίση: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98.757577+100;Custom+3 * / background: # c9c9c9 . / * Παλιά προγράμματα περιήγησης * / φόντο: -moz-γραμμική-κλίση (κορυφή, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%). / * FF3.6-15 * / υπόβαθρο: -webkit-linear-gradient (κορυφή, # c9c9c9 0%, #f6f6f6 2%, # c4c5c7 98%, # 757577 100%). / * Chrome10-25, Safari5.1-6 * / υπόβαθρο: γραμμική κλίση (στο κάτω μέρος, # c9c9c9 0%, #f6f6f6 2%, # c4c5c7 98%, # 757577 100%). / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / φίλτρο: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# c9c9c9', endColorstr = '# 757577', GradientType = 0); / * IE6-9 * / padding: 15px 30px 15px 40px; γραμματοσειρά-μέγεθος: 14px; χρώμα: # 454547; κείμενο-διακόσμηση: κανένα? κείμενο-μετασχηματισμός: κεφαλαία? μετάβαση: όλα 0.3s ευκολία? } .dws-menu li a: hover {/ * Permalink - αυτή η κλίση: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 * / φόντο: # e0e1e5; / * Παλιά προγράμματα περιήγησης * / φόντο: -moz-γραμμική κλίση (κορυφή, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%). / * FF3.6-15 * / υπόβαθρο: -webkit-γραμμική κλίση (κορυφή, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%). / * Chrome10-25, Safari5.1-6 * / φόντο: γραμμική κλίση (στο κάτω μέρος, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%). / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / φίλτρο: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# e0e1e5', endColorstr = '# e0e1e5', GradientType = 0); / * IE6-9 * / χρώμα: #ffffff; κουτί-σκιά: 1px 5px 10px -5px μαύρο; μετάβαση: όλα 0.3s ευκολία? }}

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

Αφήστε ένα σχόλιο: