.
Μέσα στο δοχείο της βάσης τοποθετούμε το περιεχόμενο που χρειαζόμαστε.
) σχηματίζεται σε css με τη μορφή του ίδιου του "κουμπιού χάμπουργκερ", με τη βοήθεια του οποίου θα δημιουργήσουμε μια σύνδεση με το κρυφό πλαίσιο ελέγχου . Για αυτό, είναι υποχρεωτικό, το όνομα του χαρακτηριστικού for πρέπει να ταιριάζει με το αναγνωριστικό του πλαισίου ελέγχου. Ένα κενό χαρακτηριστικό onclick χρησιμοποιείται για το iOS
δικτυακός τόπος <
ul>
<
li><
a href=
"#1"
>Ενας
<
li><
a href=
"#2"
>Δύο
<
li><
a href=
"#3"
>Τρία
<
li><
a href=
"#4"
>Τέσσερα
<
li><
a href=
"#5"
>Πέντε
<
li><
a href=
"#6"
>Εξι
<
li><
a href=
"#7"
>Επτά
Ενας Δύο Τρία Τέσσερα Πέντε Εξι Επτά Αυτό ολοκληρώνει τη διάταξη του πλευρικού μενού μας. Είναι αλήθεια ότι υπάρχει ένα ακόμη εντελώς προαιρετικό χαρακτηριστικό, αυτό είναι το φόντο της μείωσης της φωτεινότητας του κύριου περιεχομένου όταν ο πίνακας είναι ενεργοποιημένος. Αν το χρειάζεστε, απλά
<
div class
=
"mask-content"
>
Στην επίδειξη, απέκλεισα αυτή τη δυνατότητα από την εργασία από προεπιλογή, σχολιάζοντας αυτό το μπλοκ, αν ξαφνικά το χρειαστείτε, μπορείτε εύκολα να το βρείτε και να το ενεργοποιήσετε εξίσου εύκολα))).
Όλα τα απαραίτητα στοιχεία, λοιπόν, βρίσκονται στη θέση τους, το πιο σημαντικό και ενδιαφέρον μένει, να σχηματίσουν την εμφάνιση, το χρώμα, το σχήμα, και να δώσουν κίνηση στο μενού μας. Όλα αυτά θα τα κάνουμε αποκλειστικά με CSS. Χωρίς javascript ή πρόσθετες εικόνες.
css Δεν θα περιγράψω κάθε κανόνα και ιδιότητα, αφού το έκανα απευθείας στο κώδικας css .
/** * Πλαϊνή γραμμή πλοήγησης με δυνατότητα εναλλαγής * σύρεται προς τα έξω με το αριστερό κλικ */ . nav( /* το πλάτος είναι αυθαίρετο, μη διστάσετε να πειραματιστείτε */ πλάτος: 320 px ελάχ. πλάτος: 320 px; /* διορθώστε και ρυθμίστε το ύψος του πίνακα στο μέγιστο */ ύψος: 100%; θέση: σταθερή; κορυφή: 0 κάτω: 0 περιθώριο: 0 /* μετατόπιση (απόκρυψη) του πίνακα σε σχέση με το αριστερό άκρο της σελίδας */ αριστερά: -320px; /* γέμιση */ padding: 15px 20px; /* ομαλή μετάβαση μετατόπιση πίνακα */ - webkit-transition: αριστερά 0. 3s; - moz-transition: αριστερά 0. 3s; μετάβαση: αριστερά 0. 3s; /* ορίστε το χρώμα φόντου του πίνακα */ φόντο: #16a085; /* πάνω από άλλα στοιχεία */ z-index: 2000 ; ) /** * Κουμπί εναλλαγής πίνακα * ετικέτα
*/
. nav-toggle( /* απολύτως θέση */ θέση: απόλυτη; /* σε σχέση με την αριστερή άκρη του πίνακα */ αριστερά: 320 px; /* γέμιση από την επάνω άκρη του πίνακα */ κορυφή: 1em; /* γέμιση */ padding: 0,5em /* ορίστε το χρώμα φόντου του κουμπιού επιλογής * πιο συχνά σύμφωνα με το χρώμα φόντου του πίνακα */ φόντο: κληρονομούν; /* χρώμα κειμένου */ χρώμα: #dadada; /* τύπος δρομέα */ δρομέας: δείκτης; /* μέγεθος γραμματοσειράς */ μέγεθος γραμματοσειράς: 1,2em; Ύψος γραμμής: 1 ; /* πάντα πάνω από άλλα στοιχεία σελίδας */ z-index: 2001; /* κίνηση χρώματος κειμένου στο δείκτη του ποντικιού */ -webkit-transition: χρώμα . 25s ease-in-out? - moz-transition: χρώμα . 25s ease-in-out? μετάβαση: χρώμα . 25s ease-in-out? ) /* καθορισμός κειμένου κουμπιού * Χαρακτήρας Unicode (TRIGRAM FOR HEAVEN) */ . nav- toggle: after (περιεχόμενο: "\2630" ; κείμενο- διακόσμηση: κανένα; ) /* τοποθετήστε το δείκτη του ποντικιού χρώμα κειμένου */ . nav-toggle: αιώρηση (χρώμα: #f4f4f4; ) /** * Κρυφό πλαίσιο ελέγχου (πλαίσιο ελέγχου) * αόρατο και μη προσβάσιμο :) * χαρακτηριστικό σημαίας ονόματος επιλογέα */ [ id="nav-toggle" ] ( position: absolute; display: none; ) /** * αλλαγή θέσης διακόπτη * όταν προβάλλεται ενεργοποιημένο κινητές συσκευές * όταν αναπτυχθεί η πλοήγηση, τοποθετήστε το μέσα στον πίνακα */ [ id= "nav-toggle" ] : επιλεγμένο ~ . nav > . εναλλαγή πλοήγησης (αριστερά: αυτόματη, δεξιά: 2 εικονοστοιχεία, επάνω: 1em; ) /** * Όταν είναι επιλεγμένο το πλαίσιο ελέγχου, ανοίγει ο πίνακας * χρησιμοποιήστε το :checked pseudo-class */ [ id= "nav-toggle" ] : επιλεγμένο ~ . nav ( αριστερά: 0 ; box-shadow: 4px 0px 20px 0px rgba(0 , 0 , 0 , 0.5 ) ; - moz- box-shadow: 4px 0px 20px 0px rgba(0 , 0 , 0 , , - web). box-shadow: 4px 0px 20px 0px rgba(0 , 0 , 0 , 0,5 ) ; υπερχείλιση- y: auto; ) /* * το περιεχόμενο της σελίδας αντισταθμίζεται * από το μέγεθος του πλάτους του πίνακα, * η δυνατότητα είναι προαιρετική, για ερασιτέχνη */ [ id= "nav-toggle" ] : επιλεγμένο ~ main > άρθρο ( - webkit- transform: translateX(320px) ; - moz- transform: translateX(320px) ; transformation: translateX(320px) ; ) /* * αλλάξτε το σύμβολο διακόπτη, * τον συνηθισμένο σταυρό (ΠΟΛΛΑΠΛΑΣΙΑΣΜΟΣ Χ), * μπορείτε να χρησιμοποιήσετε οποιοδήποτε άλλο εικονίδιο */ [ id= "nav-toggle" ] : επιλεγμένο ~ . nav > . nav-toggle: after (περιεχόμενο: "\2715" ; ) /** * διορθώστε το σφάλμα στο Android<= 4.1.2
* см: http://timpietrusky.com/advanced-checkbox-hack
*/
body ( - webkit-animation: bugfix infinite 1s; ) @- webkit- keyframes bugfix ( έως ( padding: 0 ; ) ) /** * φροντίστε για μεσαίες και μικρές οθόνες * φορητών συσκευών */ @ οθόνη πολυμέσων και (ελάχιστο πλάτος: 320 εικονοστοιχεία) ( html, σώμα ( περιθώριο: 0 ; υπερχείλιση- x: κρυφό; ) ) @ οθόνη πολυμέσων και (μέγ. πλάτος: 320 εικονοστοιχεία) ( html, σώμα ( περιθώριο: 0 ; υπερχείλιση- x: κρυφό; ) .nav (πλάτος: 100%; πλαίσιο-σκιά: κανένα) ) /** * Σχηματίζουμε το στυλ του τίτλου (λογότυπο) του πίνακα */ . nav h2 ( πλάτος: 90%; συμπλήρωση: 0 ; περιθώριο: 10 εικονοστοιχεία 0 ; στοίχιση κειμένου: κέντρο, σκιά κειμένου: rgba(255 , 255 , 255 , .1 ) - 1 εικονοστοιχεία - 1 εικονοστοιχεία 1 εικονοστοιχεία, rgba(0 , 0 , . - moz-transform: scale(0.1, 0.1) ; - webkit-transform: scale(0.1, 0.1) ; transformation- origin: 0 % 0 %; - ms-transform- origin: 0 % 0 %; - moz- transform- προέλευση: 0 % 0 % - webkit- μετασχηματισμός- προέλευση: 0 % 0 % - μετάβαση: αδιαφάνεια 0. 8s, μετασχηματισμός 0. 8s - ms- μετάβαση: αδιαφάνεια 0. 8s, - ms- μετασχηματισμός 0. 8s - moz-transition : αδιαφάνεια 0,8s, -moz-transform 0,8s;-webkit-transition: αδιαφάνεια 0,8s, -webkit-transform 0,8s; ). nav h2 a ( χρώμα: #dadada; κείμενο- διακόσμηση: κανένα; μετατροπή κειμένου: κεφαλαία; ) /*ομαλή εμφάνιση του τίτλου (λογότυπο) κατά το άνοιγμα του πίνακα */ [ id= "nav-toggle" ] : επιλεγμένο ~ . nav h2 ( αδιαφάνεια: 1 ; μετασχηματισμός: κλίμακα (1 , 1 ) ; - ms- μετασχηματισμός: κλίμακα (1 , 1 ) ; - μετασχηματισμός moz: κλίμακα (1 , 1 ) ; - μετασχηματισμός webkit: κλίμακα (1 , 1 ) ;) /** * σχηματίστε το ίδιο το μενού * χρησιμοποιήστε μια μη ταξινομημένη λίστα για τα στοιχεία μενού * στερεώστε μετασχηματισμούς και ομαλές μεταβάσεις */ . nav > ul (εμφάνιση: μπλοκ, περιθώριο: 0, συμπλήρωση: 0, στυλ λίστας: κανένα; ) . nav > ul > li (ύψος γραμμής: 2,5 ; αδιαφάνεια: 0 ; - μετασχηματισμός webkit: translateX(- 50 %) ; - μετασχηματισμός moz: translateX(- 50 %) ; - μετασχηματισμός ms: translateX(- 50 % ) ; μετασχηματισμός: translateX(- 50 %) ; - webkit-transition: αδιαφάνεια. 5s. 1s, - webkit- transform. 5s. 1s; - moz- transition: opacity. 5s. 1s, - moz- transform. 5s. 1s ;- ms- μετάβαση: αδιαφάνεια .5s .1s, - ms- μετασχηματισμός .5s .1s; μετάβαση: αδιαφάνεια .5s .1s, μετατροπή .5s .1s; ) [ id= "nav-toggle" ] : επιλεγμένο ~ . nav > ul > li ( αδιαφάνεια: 1 ; - webkit- μετασχηματισμός: translateX(0 ) ; - moz- μετασχηματισμός: translateX(0 ) ; - ms- μετασχηματισμός: translateX(0 ) ; μετατροπή: translateX(0) ; ) /* καθορίζει τα διαστήματα για την εμφάνιση των στοιχείων μενού */ . nav > ul > li: nth- child(2) ( - webkit- transition: αδιαφάνεια . 5s . 2s, - webkit- transform . 5s . 2s; transition: opacity . 5s . 2s, transform . 5s . 2s; ) . nav > ul > li: nth- child(3 ) ( - webkit- transition: αδιαφάνεια . 5s . 3s, - webkit- transform . 5s . 3s; transition: opacity . 5s . 3s, transform . 5s . 3s; ) . nav > ul > li: nth- child(4) ( - webkit- transition: αδιαφάνεια . 5s . 4s, - webkit- transform . 5s . 4s; transition: opacity . 5s . 4s, transform . 5s . 4s; ) . nav > ul > li: nth- child(5) ( - webkit- transition: αδιαφάνεια . 5s . 5s, - webkit- transform . 5s . 5s; transition: opacity . 5s . 5s, transform . 5s . 5s; ) . nav > ul > li: nth- child(6) ( - webkit- transition: αδιαφάνεια . 5s . 6s, - webkit- transform . 5s . 6s; transition: opacity . 5s . 6s, transform . 5s . 6s; ) . nav > ul > li: nth- child(7) ( - webkit- μετάβαση: αδιαφάνεια . 5s . 7s, - webkit- transform . 5s . 7s; transition: opacity . 5s . 7s, transform . 5s . 7s; ) /** * σύνδεσμοι στοιχείων μενού στυλ */ . nav > ul > li > a ( οθόνη: inline-block; θέση: σχετική; padding: 0 ; γραμματοσειρά οικογένειας: "Open Sans" , sans-serif; βάρος γραμματοσειράς: 300 ; μέγεθος γραμματοσειράς: 1. 2em; χρώμα : #dadada;width: 100%;text-decoration: none; /* ομαλή μετάβαση */ -webkit-transition: χρώμα . 5s ευκολία, padding . 5s ευκολία? - moz-transition: χρώμα . 5s ευκολία, padding . 5s ευκολία? μετάβαση: χρώμα . 5s ευκολία, padding . 5s ευκολία? ) /** * κατάσταση των συνδέσμων μενού στο δείκτη του ποντικιού */ . nav > ul > li > a:hover, . nav > ul > li > a: εστίαση ( χρώμα: λευκό; padding-αριστερά: 15 px; ) /** * υπογράμμιση συνδέσμων μενού */ . nav > ul > li >
ένα :
πριν {
περιεχόμενο :
""
;
απεικόνιση :
ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ ;
θέση :
απόλυτος ;
σωστά :
0
;
κάτω μέρος :
0
;
ύψος :
1 εικονοστοιχείο ;
πλάτος :
100
%;
-
webkit -
μετάβαση :
πλάτος 0s ευκολία ;
μετάβαση :
πλάτος 0s ευκολία ;
}
.
nav >
ul >
li >
ένα :
μετά {
περιεχόμενο :
""
;
απεικόνιση :
ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ ;
θέση :
απόλυτος ;
αριστερά :
0
;
κάτω μέρος :
0
;
ύψος :
1 εικονοστοιχείο ;
πλάτος :
100
%;
Ιστορικό :
#3bc1a0; -
webkit -
μετάβαση :
πλάτος .
5s ευκολία ;
μετάβαση :
πλάτος .
5s ευκολία ;
}
/** * κινούμενα την υπογράμμιση * των συνδέσμων στο hover */
.
nav >
ul >
li >
ένα :
φτερουγίζω :
πριν {
πλάτος :
0
%;
Ιστορικό :
#3bc1a0; -
webkit -
μετάβαση :
πλάτος .
5s ευκολία ;
μετάβαση :
πλάτος .
5s ευκολία ;
}
.
nav >
ul >
li >
ένα :
φτερουγίζω :
μετά {
πλάτος :
0
%;
Ιστορικό :
διαφανής ;
-
webkit -
μετάβαση :
πλάτος 0s ευκολία ;
μετάβαση :
πλάτος 0s ευκολία ;
}
/* σκοτεινό φόντο στο κύριο περιεχόμενο * ενώ αποκλείονται στοιχεία * αμφιλεγόμενη δυνατότητα, αν το χρειάζεστε * απλώς απορρίψτε το σχόλιο */
/* .mask-content ( display: block; position: fixed; top: 0; left: 0; z-index: 1000; πλάτος: 100%; ύψος: 100%; background-color: rgba(0, 0, 0 , 0,4); ορατότητα: κρυφή; αδιαφάνεια: 0; ) :ελεγμένο ~ .mask-content ( ορατότητα: ορατή; αδιαφάνεια: 1; -webkit-transition: αδιαφάνεια .5s, ορατότητα .5s; μετάβαση: αδιαφάνεια .5s, ορατότητα . 5s;) */
/** * Πλαϊνή γραμμή πλοήγησης με δυνατότητα εναλλαγής * σύρεται προς τα έξω με το αριστερό κλικ */ .nav ( /* το πλάτος είναι αυθαίρετο, μη διστάσετε να πειραματιστείτε */ πλάτος: 320 εικονοστοιχεία, ελάχιστο πλάτος: 320 εικονοστοιχεία, /* διορθώστε και ορίστε το ύψος του πάνελ στο μέγιστο */ ύψος : 100%, θέση: σταθερό, επάνω: 0, κάτω: 0, περιθώριο: 0, /* μετατόπιση (απόκρυψη) του πίνακα σε σχέση με το αριστερό άκρο της σελίδας */ αριστερά: -320 εικονοστοιχεία; /* padding */ padding: 15 px 20 px; / * ομαλή μετάβαση μετατόπισης πλαισίου */ -webkit-transition: left 0,3s, -moz-transition: left 0,3s, transition: left 0,3s, /* ορίστε το χρώμα φόντου του πίνακας */ φόντο: #16a085; /* πάνω από άλλα στοιχεία * / z-index: 2000; ) /** * Κουμπί εναλλαγής πίνακα * ετικέτα */ .nav-toggle ( /* απολύτως θέση */ θέση: απόλυτη; /* σε σχέση με το αριστερό άκρο του πίνακα */ αριστερά: 320 εικονοστοιχεία; /* γέμιση από την επάνω άκρη του πίνακα */ επάνω: 1em; / * padding */ padding: 0,5em; /* ορίστε το χρώμα φόντου του κουμπιού επιλογής * πιο συχνά σύμφωνα με το χρώμα φόντου του πίνακα */ φόντο: inherit; /* χρώμα κειμένου */ χρώμα: #dadada; /* δρομέας πληκτρολογήστε */ δρομέα: δείκτης, /* μέγεθος γραμματοσειράς * / μέγεθος γραμματοσειράς: 1,2 εκ., ύψος γραμμής: 1, /* πάντα πάνω από άλλα στοιχεία σελίδας */ z-index: 2001; /* κίνηση χρώματος κειμένου κατά την τοποθέτηση του δείκτη */ -webkit-transition: color .25s ease-in-out; -moz-transition: color .25s ease-in-out; transition: color .25s ease-in-out;) /* ορισμός κειμένου κουμπιού * Χαρακτήρας Unicode (TRIGRAM FOR HEAVEN) */ .nav-toggle:after ( content: "\2630"; text-decoration: none; ) /* hover text color */ .nav-toggle:hover ( color: #f4f4f4; ) /* * * Κρυφό πλαίσιο ελέγχου (πλαίσιο ελέγχου) * αόρατο και μη διαθέσιμο :) * χαρακτηριστικό σημαίας ονόματος επιλογέα */ ( positi on: απόλυτη; οθόνη: καμία; ) /** * αλλαγή θέσης εναλλαγής * κατά την προβολή σε κινητές συσκευές * όταν η πλοήγηση είναι επεκταμένη, θέση εντός του πίνακα */ :ελεγμένο ~ .nav > .nav-toggle ( αριστερά: auto; δεξιά: 2px; επάνω: 1em; ) /* * * Όταν είναι επιλεγμένο το πλαίσιο, ανοίγει ο πίνακας * χρησιμοποιήστε την ψευδο-κλάση :checked */ :checked ~ .nav ( αριστερά: 0; box-shadow:4px 0px 20px 0px rgba(0,0,0, 0,5 ); -moz-box-shadow :4px 0px 20px 0px rgba(0,0,0, 0,5); -webkit-box-shadow:4px 0px 20px 0px rgba(0,0,0, 0,5), υπερχείλιση-y: auto; ) /* * μετατόπιση περιεχομένου σελίδας * κατά το πλάτος του πίνακα, * δυνατότητα προαιρετική, για ερασιτέχνη */ :checked ~ main > article ( -webkit-transform: translateX(320px); -moz-transform: translateX( 320px); transformation: translateX(320px); ) /* * αλλαγή εναλλαγής συμβόλου, * προσαρμοσμένος σταυρός (ΠΟΛΛΑΠΛΑΣΙΑΣΜΟΣ X), * μπορείτε να χρησιμοποιήσετε οποιοδήποτε άλλο εικονίδιο */ :checked ~ .nav > .nav-toggle:after ( περιεχόμενο: "\2715"; ) /** * σφάλμα προθέματος στο android<= 4.1.2
* см: http://timpietrusky.com/advanced-checkbox-hack
*/ body {
-webkit-animation: bugfix infinite 1s;
} @-webkit-keyframes bugfix {
to {
padding: 0;
}
} /**
* позаботьтимся о средних и маленьких экранах
* мобильных устройств
*/ @media screen and (min-width: 320px) {
html,
body {
margin: 0;
overflow-x: hidden;
}
} @media screen and (max-width: 320px) {
html,
body {
margin: 0;
overflow-x: hidden;
}
.nav {
width: 100%;
box-shadow: none
}
} /**
* Формируем стиль заголовка (логотип) панели
*/ .nav h2 {
width: 90%;
padding: 0;
margin: 10px 0;
text-align: center;
text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(0, 0, 0, .5) 1px 1px 1px;
font-size: 1.3em;
line-height: 1.3em;
opacity: 0;
transform: scale(0.1, 0.1);
-ms-transform: scale(0.1, 0.1);
-moz-transform: scale(0.1, 0.1);
-webkit-transform: scale(0.1, 0.1);
transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
transition: opacity 0.8s, transform 0.8s;
-ms-transition: opacity 0.8s, -ms-transform 0.8s;
-moz-transition: opacity 0.8s, -moz-transform 0.8s;
-webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
} .nav h2 a {
color: #dadada;
text-decoration: none;
text-transform: uppercase;
} /*плавное появление заголовка (логотипа) при раскрытии панели */ :checked ~ .nav h2 {
opacity: 1;
transform: scale(1, 1);
-ms-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
} /**
* формируем непосредственно само меню
* используем неупорядоченный список для пунктов меню
* прикрутим трансфомации и плавные переходы
*/ .nav > ul ( οθόνη: μπλοκ; περιθώριο: 0; συμπλήρωση: 0; στυλ λίστας: κανένα; ) .nav > ul > li ( ύψος γραμμής: 2,5; αδιαφάνεια: 0; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%), -ms-transform: translateX(-50%), transformation: translateX(-50%), -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s; -moz-transition: αδιαφάνεια .5s .1s, -moz-transform .5s .1s; -ms-transition: αδιαφάνεια .5s .1s, -ms-transform .5s .1s· μετάβαση: αδιαφάνεια .5s .1s , transform .5s .1s; :checked ~ .nav > ul > li ( αδιαφάνεια: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0 ); transform: translateX(0); ) /* ορισμός διαστημάτων στοιχείων μενού */ .nav > ul > li:nth-child(2) ( -webkit-transition: opacity .5s .2s, -webkit-transform .5s . 2s; μετάβαση: αδιαφάνεια .5s .2s, μετασχηματισμός .5s .2s; ) .nav > ul > li:nth-child(3) ( -webkit-transition: αδιαφάνεια .5s .3s, -webkit-transform .5s . 3s ;μετάβαση: αδιαφάνεια .5s .3s, μετασχηματισμός .5s .3s; ) .nav > ul > li:nth-child(4) ( -webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s; μετάβαση: αδιαφάνεια .5s .4s, μετασχηματισμός .5s .4s; ) .nav > ul > li:nth-child(5) ( -webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s; transition: opacity .5s .5s, transformation .5s .5s; ) .nav > ul > li:nth-child(6) ( -webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s; transition: opacity .5s .6s, transformation .5s .6s; ) . nav > ul > li:nth-child(7) ( -webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s; transition: opacity .5s .7s, transform .5s .7s; ) /* * * Στυλ σύνδεσης στοιχείου μενού */ .nav > ul > li > a ( οθόνη: inline-block; θέση: σχετική; padding: 0; font-family: "Open Sans", sans-serif; font-weight: 300; μέγεθος γραμματοσειράς: 1,2 εκ. χρώμα: #dadada, πλάτος: 100%, διακόσμηση κειμένου: κανένα, /* ομαλή μετάβαση */ -webkit-transition: χρώμα 0,5s ease, padding 0,5s ease; -moz-transition: color .5s ease, padding .5s ease, transition: color .5s ease, padding .5s ease; ) /** * κατάσταση των συνδέσμων μενού στο hover */ .nav > ul > li > a:hover, .nav > ul > li > a:focus ( χρώμα: λευκό, padding-αριστερά : 15 px; ) /** * υπογράμμιση συνδέσμου μενού */ .nav > ul > li > a:before ( περιεχόμενο: ""; εμφάνιση: μπλοκ; θέση: απόλυτη; δεξιά: 0; κάτω: 0; ύψος: 1 px; πλάτος: 100 % ; -webkit-transition: πλάτος 0s ευκολία; μετάβαση: πλάτος 0s ευκολία; ) .nav > ul > li > a:after ( περιεχόμενο: ""; εμφάνιση: μπλοκ; θέση: απόλυτη; αριστερά: κάτω: 0; ύψος : 1 εικονοστοιχείο, πλάτος: 100%, φόντο: #3bc1a0, -webkit-transition: πλάτος . 5s ευκολία? μετάβαση: πλάτος 0,5s ευκολία? ) /** * κίνηση των συνδέσμων υπογράμμισης * στο hover */ .nav > ul > li > a:hover:before ( πλάτος: 0%; φόντο: #3bc1a0; -webkit-transition: πλάτος .5s ευκολία; μετάβαση: πλάτος .5s ease; ) .nav > ul > li > a:hover:after ( πλάτος: 0%; background: transparent; -webkit-transition: width 0s ease; transition: width 0s ease; ) /* fade background στο κύριο περιεχόμενο * κατά τον αποκλεισμό στοιχείων * αμφιλεγόμενη δυνατότητα, αν τη χρειάζεστε * απλώς απορρίψτε το σχόλιο */ /* .mask-content ( εμφάνιση: μπλοκ; θέση: σταθερή; επάνω: 0; αριστερά: 0; z-index: 1000; πλάτος: 100% ; ύψος: 100%; χρώμα φόντου: rgba(0, 0, 0, 0,4); ορατότητα: κρυφή; αδιαφάνεια: 0; ) :ελεγμένο ~ .mask-content ( ορατότητα: ορατό; αδιαφάνεια: 1; -webkit -μετάβαση : αδιαφάνεια .5s, ορατότητα 0.5s, μετάβαση: αδιαφάνεια .5s, ορατότητα .5s; ) */
Όπως καταλαβαίνετε, σχεδόν όλες οι αξίες των ακινήτων είναι προαιρετικές, π.χ. μπορείτε εύκολα να αλλάξετε όλα τα στοιχεία του στο γούστο και το χρώμα σας, οι εξηγήσεις, ελπίζω, θα σας βοηθήσουν σε αυτό. Λοιπόν, αν κάτι δεν καταπατηθεί, ή αν βρεθεί κάποιο από τα λάθη μου, γράψτε στα σχόλια, σίγουρα θα το καταλάβουμε και θα το διορθώσουμε.
Εν κατακλείδι, θέλω να σας υπενθυμίσω ότι δεν είναι όλα τα προγράμματα περιήγησης εξίσου καλά στο χειρισμό των ιδιοτήτων CSS3. Αυτή η λύση, φυσικά, είναι πολύ ενδιαφέρουσα, αλλά ακόμα πιο πειραματική. Αφού το προσαρμόσετε στις ανάγκες σας, πριν το βιδώσετε σφιχτά στο χώρο εργασίας, φροντίστε να ελέγξετε τη λειτουργία του διαφορετικά προγράμματα περιήγησης και σε διάφορες κινητές συσκευές.
Δείτε ξανά το αποτέλεσμα, κατεβάστε το αρχείο προέλευσης, πειραματιστείτε με διαφορετικές παραμέτρους και δημιουργήστε, δημιουργήστε, δημιουργήστε...
Στο εγγύς μέλλον θα προσπαθήσω να πω και να δείξω πώς, με βάση αυτή την απόφαση , μπορείτε εύκολα να εφαρμόσετε ανασυρόμενο, πλαϊνά πάνελ , με άλλα εξίσου σημαντικά στοιχεία για την αλληλεπίδραση με τους χρήστες επί του σκάφους.
Τώρα οι χρήστες έχουν την ευκαιρία να εξοικειωθούν με το . Όλα παρουσιάζονται σε ξεχωριστή κατηγορία, την οποία μπορείτε να βρείτε στην αγορά TemplateMonster. Δεν πρέπει να υπάρχουν προβλήματα μαζί τους. Απλώς προσθέστε το μοναδικό σας περιεχόμενο και τελειώσατε - μπορείτε να ξεκινήσετε μια επιχείρηση και να προσελκύσετε όλο και περισσότερους αναγνώστες. Είναι επίσης πολύ σημαντικό να θυμάστε ότι το κείμενο για κάθε πρότυπο γράφτηκε με το χέρι.
Με όλο τον σεβασμό, Andrew
Καλημέρα, αγαπητοί αναγνώστες. Σήμερα θα συζητήσουμε το θέμα πώς να δημιουργήσετε ένα οριζόντιο μενού χρησιμοποιώντας html και css ". Το μενού, κατά κανόνα, βρίσκεται στην κεφαλίδα του ιστότοπου και είναι μια λίστα με συνδέσμους προς τις πιο σημαντικές σελίδες, ονομάζεται επίσης κυρίως μενού . Οι χρήστες θα κάνουν συνεχώς κλικ σε αυτούς τους συνδέσμους. Ο τρόπος με τον οποίο τα τακτοποιείτε και το σχέδιο που θα δώσετε στο μενού θα επηρεάσει τη συμπεριφορά των χρηστών, τη μετατροπή, τη συνολική εμπειρία του ιστότοπού σας και, φυσικά, το .
Κώδικας HTML για οριζόντιο μενού
Μια φορά κι έναν καιρό, το κύριο μενού για τον ιστότοπο φτιάχτηκε σε εικόνες, πίνακες, φλας και πιθανώς κάτι άλλο, αλλά σήμερα υπάρχει η πιο δημοφιλής και σωστή μέθοδος δημιουργίας μενού χρησιμοποιώντας ετικέτες "list".
Οι ετικέτες χρησιμοποιούνται για τη δημιουργία μενού.
Ένα παράδειγμα χρήσης ετικετών html για τη δημιουργία ενός μενού στον παρακάτω κώδικα:
Σπίτι
Υπηρεσίες
Τιμές
Επαφές
Τυπικά στυλ CSS για οριζόντιο μενού ul ( στιλ λίστας: κανένας; /*αφαίρεση δεικτών λίστας*/ περιθώριο: 0; /*αφαίρεση συμπλήρωσης*/ padding-left: 0; /*remove padding*/ ) a ( κείμενο-διακόσμηση: κανένας; /*αφαίρεση υπογράμμισης κείμενο συνδέσμου*/ ) li ( float:αριστερά; /*Τοποθετήστε τη λίστα οριζόντια για να εφαρμόσετε το μενού*/ margin-right:5px; /*Εσοχή στα στοιχεία μενού*/ ) Παίρνουμε ένα έτοιμο κορυφαίο μενού στην κεφαλίδα, χωρίς ιδιαίτερα στυλ και κουδούνια και σφυρίχτρες, αυτό μπορεί να ονομαστεί το πλαίσιο του μέλλοντός σας όμορφο μενού . Εάν αντιγράψετε και επικολλήσετε αυτό το html και css θα μοιάζει με αυτό.
Ένα παράδειγμα πλαισίου (πρότυπο) για το μελλοντικό σας μενού
Όλα έγιναν πολύ απλά, φυσικά, θέλετε ένα όμορφο κύριο μενού αμέσως, αλλά χωρίς να καταλάβετε τα βασικά, απλά δεν θα μπορείτε να δημιουργήσετε ένα καλό μενού χωρίς σφάλματα σε html και css.
Υπάρχουν επίσης πολλές άλλες μέθοδοι CSS που χρησιμοποιούνται για να γίνουν τα μενού οριζόντια εκτός από το float:left; , για παράδειγμα display:inline-block; ή εμφάνιση:flex; , αλλά συνιστάται η χρήση της μεθόδου που περιγράφεται παραπάνω.
Ας γεμίσουμε το πρότυπο μενού μας με διάφορα στυλ και ας το φτιάξουμε πανεμορφη .
Παραδείγματα ενός όμορφου οριζόντιου μενού για έναν ιστότοπο
Τώρα θα δώσω μερικά έτοιμα παραδείγματα με έτοιμο σχέδιο οριζόντιου μενού.
Μπορείτε να δημιουργήσετε μόνοι σας όλα τα "όμορφα πράγματα" για τον ιστότοπό σας και να μην ψάξετε στο Διαδίκτυο. Ο ευκολότερος τρόπος για να το κάνετε αυτό βασίζεται σε ένα από τα παρακάτω παραδείγματα.
Απλό μπλε μενού με ξεχωριστά στοιχεία
Στυλ CSS για το "κορυφαίο" μενού
Παρακάτω είναι τα στυλ για αυτό το μενού. Το HTML παραμένει το ίδιο όπως στο μενού "σκελετός".
Ul (στυλ λίστας: κανένα; /*αφαίρεση δεικτών λίστας*/ περιθώριο: 0; /*αφαίρεση συμπλήρωσης*/ padding-left: 0; /*αφαίρεση συμπλήρωσης*/ margin-top:25px; /*επάνω εσοχή*/ ) a ( κείμενο-διακόσμηση: κανένα; /*αφαίρεση υπογράμμισης κειμένου συνδέσμου*/ φόντο:#30A8E6; /*προσθήκη φόντου στο στοιχείο μενού*/ χρώμα:#fff; /*αλλαγή χρώματος συνδέσμου*/ padding:10px; /*προσθήκη συμπλήρωσης */ font-family: arial; /*change font*/ border-radius:4px; /*add rounding*/ -moz-transition: all 0.3s 0.01s ease; /*κάνει μια ομαλή μετάβαση*/ -o-transition : all 0,3s 0,01s ease; -webkit-transition: all 0,3s 0,01s ease; ) a:hover ( background:#1C85BB;/*add hover effect*/ ) li ( float:left; /*laylist οριζόντια σε υλοποίηση του μενού*/ margin-right:5px; /*Εσοχή στα στοιχεία μενού*/ )
Το κύριο μενού βρίσκεται σε έγχρωμη γραμμή με κόκκινο φόντο
Μενού στυλ css στη γραμμή χρώματος ul ( στιλ λίστας: κανένας; /*αφαίρεση δεικτών λίστας*/ περιθώριο: 0; /*αφαίρεση συμπλήρωσης*/ padding-left: 0; /*remove padding*/ margin-top:25px; /*επάνω εσοχή*/ φόντο :#FF4444; /*προσθήκη φόντου σε ολόκληρο το μενού (η αντικατάσταση αυτής της παραμέτρου θα αλλάξει το χρώμα ολόκληρου του μενού)*/ ύψος: 50 εικονοστοιχεία; /*ορίστε το ύψος*/ ) a ( κείμενο-διακόσμηση: κανένα; /* αφαιρέστε την υπογράμμιση του κειμένου του συνδέσμου* / φόντο:#FF4444; /*προσθήκη φόντου στο στοιχείο μενού (αν αντικαταστήσετε αυτήν τη ρύθμιση θα αλλάξει το χρώμα όλων των στοιχείων μενού)*/ χρώμα:#fff; /*αλλαγή του χρώματος συνδέσμου* / padding:0px 15px; /*add padding*/ font-family: arial; /*αλλαγή γραμματοσειράς*/ line-height:50px; /*ευθυγράμμιση του μενού κατακόρυφα*/ εμφάνιση: μπλοκ, περίγραμμα δεξιά: 1px στερεά # F36262; /*προσθήκη περιγράμματος στα δεξιά*/ -moz-transition : all 0.3s 0.01s easy; /*make a smooth transition*/ -o-transition: all 0.3s 0.01s ease; -webkit-transition: all 0,3s 0,01s ease; ) a:hover ( background:#D43737;/ *add hover effect*/ ) li ( float:left; /*laylist οριζόντια για πραγματικό μενού*/ ) Αναπτυσσόμενο μενού σε HTML+CSS
Για υλοποίηση πρόσθετο αναπτυσσόμενο (αναπτυσσόμενο) μενού στον ιστότοπο για οποιοδήποτε στοιχείο μενού, πρέπει να προσθέσουμε μια πρόσθετη λίστα στοιχείων στον κώδικα HTML για οποιονδήποτε σύνδεσμο από το οριζόντιο μενού και να αλλάξουμε τα στυλ CSS. Στα στυλ, θα χρησιμοποιήσουμε ένα απλό κόλπο - αλλάζοντας την εμφάνιση του αναπτυσσόμενου μενού κατά την τοποθέτηση του ποντικιού στο στοιχείο που χρειαζόμαστε επάνω μενού . Για παράδειγμα, ας πάρουμε το στοιχείο "υπηρεσίες".
Παράδειγμα δημιουργίας απλού αναπτυσσόμενου μενού
Κώδικας HTML του αναπτυσσόμενου μενού
Σπίτι
Υπηρεσίες
Υπηρεσία 1
Μακρά υπηρεσία 2
Υπηρεσία 3
Τιμές
Επαφές
Αναπτυσσόμενο στυλ CSS ul ( στιλ λίστας: κανένας; /*αφαίρεση δεικτών λίστας*/ περιθώριο: 0; /*αφαίρεση συμπλήρωσης*/ padding-left: 0; /*remove padding*/ margin-top:25px; /*επάνω εσοχή*/ φόντο :#819A32; /*προσθήκη φόντου σε ολόκληρο το μενού*/ ύψος: 50 εικονοστοιχεία; /*ορίστε το ύψος*/ ) a ( διακόσμηση κειμένου: κανένα; /*αφαίρεση της υπογράμμισης του κειμένου του συνδέσμου*/ φόντο:#819A32 ; /*προσθήκη φόντου στο στοιχείο μενού*/ color:#fff; /*αλλαγή χρώματος συνδέσμων*/ padding:0px 15px; /*add padding*/ font-family: arial :50 εικονοστοιχεία; /*στοίχιση μενού σε κάθετες*/ εμφάνιση: μπλοκ, περίγραμμα δεξιά: 1 εικονοστοιχείο συμπαγές #677B27; /*προσθήκη περιγράμματος προς τα δεξιά*/ -moz-transition: όλα τα 0,3s 0,01s ευκολία, /*κάνετε ένα ομαλή μετάβαση*/ -o-transition: all 0.3s 0.01s ease; -webkit-transition: all 0.3s 0.01s ease; ) a:hover ( background:#D43737;/*Add a hover effect*/ ) li (float :left; /*Τοποθετήστε τη λίστα οριζόντια για να εφαρμόσετε το μενού* / position:relative; /*ορίστε τη θέση για τοποθέτηση*/ ) /*Στιλ για το κρυφό αναπτυσσόμενο μενού* / li > ul ( θέση:απόλυτη; top:25px; οθόνη: κανένας; ) /*Κάντε ορατό το κρυφό μέρος*/ li:hover > ul ( display:block; width:250px; /*Ορίστε το πλάτος του αναπτυσσόμενου μενού*/ ) li:hover > ul > li ( float:none; /* Αφαιρέστε την οριζόντια τοποθέτηση* / ) Και για να καταλάβετε ακριβώς ποιες υπηρεσίες και κατηγορίες πρέπει να έχετε, σας συνιστώ να εξοικειωθείτε με το υλικό:.
Προσπάθησα να σας πω όσο το δυνατόν συνοπτικά για το πώς να δημιουργήσετε ένα κύριο οριζόντιο μενού, να δημιουργήσετε μερικά πρότυπα, πώς να προσθέσετε απλά στυλ σε αυτό και να το κάνετε πιο όμορφο, πώς να δημιουργήσετε ένα αναπτυσσόμενο μενού για τον ιστότοπό σας. Για ευκολία, έχω συγκεντρώσει όλα τα μενού που παρουσιάζονται παραπάνω σε ένα αρχείο html, το οποίο μπορείτε να κατεβάσετε παρακάτω. Φαίνεται όπως στο στιγμιότυπο οθόνης:
Ευχαριστώ για την προσοχή.
Σε αυτό το σεμινάριο, θα δημιουργήσουμε ένα κλασικό οριζόντιο μενού καθαρό CSS . Έχει εικονίδια σε λίστες. Όταν τοποθετείτε το δείκτη του ποντικιού πάνω από ένα στοιχείο, αλλάζει ομαλά το χρώμα του κουμπιού και του κειμένου και προσθέτει μια σκιά. Οι αναπτυσσόμενες λίστες μπορούν να γίνουν πολλαπλών επιπέδων, και το πιο σημαντικό, όλα αυτά υλοποιούνται πολύ απλά σε καθαρό CSS3.
Στο μάθημα θα χρησιμοποιήσουμε:
οθόνη:flex;
χρήση μετάβασης ;
θα τοποθετήσουμε τα στοιχεία χρησιμοποιώντας θέση .
Δομή HTML του οριζόντιου μενού
Πρώτα απ 'όλα, ας γράψουμε τη σήμανση για το οριζόντιο μενού. Ανοίγουμε το περιβάλλον ανάπτυξης μας στην περίπτωσή μου είναι το PhpStorm, δημιουργούμε ένα αρχείο index.html, γράφουμε το πλαίσιο html:5, αντικαθιστούμε το lang με το ru .
Θα διαγράψω όλα τα meta εκτός από την κωδικοποίηση, θα γράψω τον τίτλο μου " το μενού ».
Ανάμεσα στο σώμα γράφουμε την ετικέτα κεφαλίδας, και σε αυτό υπάρχει ένα μπλοκ με την κλάση .dws-menu στην οποία θα βρίσκεται το μενού μας. Επιπλέον, η δομή θα είναι η εξής, θα δημιουργήσουμε λίστες σε ποσότητα πέντε τεμαχίων. Κάθε λίστα θα έχει έναν σύνδεσμο με το χαρακτηριστικό href="#". Στη συνέχεια θα υπάρχει ένα εικονίδιο I με την κλάση .fa .fa-
Κάντε κλικ στην εφαρμογή.
Ας γράψουμε το όνομα των στοιχείων μενού ( Αρχική σελίδα, Προϊόντα, Υπηρεσίες, Νέα, Επαφές ).
Στη συνέχεια, επιλέξτε και συνδέστε τα εικονίδια. Πηγαίνουμε στον ιστότοπο Font Awesome, επιλέγουμε εικονίδια για αυτά τα στοιχεία μενού:
Κατεβάζουμε το αρχείο από τον ιστότοπο με εικονίδια, εξάγουμε το περιεχόμενό του στον υπολογιστή μας, αντιγράφουμε το φάκελο γραμματοσειρών και το φάκελο css στο περιβάλλον ανάπτυξης μας.
Ο φάκελος γραμματοσειρές περιέχει γραμματοσειρές εικονιδίων και ο φάκελος css περιέχει τα στυλ τους. Τα συμπιεσμένα στυλ μπορούν να αφαιρεθούν από το font-awesome.min , συμπεριλαμβανομένου του μη συμπιεσμένου font-awesome.css .
Στο index.html συνδέουμε εικονίδια και ορίζουμε κάθε στοιχείο το δικό του στυλ εικονιδίου ( Σπίτι , καλάθι αγορών , γρανάζια , th-list , φάκελος-ανοιχτός ).
Φτιάξαμε το κύριο πλαίσιο, θα σχηματίσουμε το υπομενού αφού περιγράψουμε το κύριο στυλ και τώρα θα δημιουργήσουμε ένα αρχείο όπου θα περιγράψουμε τα κύρια στυλ του οριζόντιου μενού style.css και θα το συνδέσουμε στο index.html . Για να ελέγξω ότι τα στυλ είναι συνδεδεμένα, θα δημιουργήσω έναν φάκελο img , σε αυτόν θα τοποθετήσω μια αυθαίρετη εικόνα στο το φόντο . Ας γράψουμε τη σύνδεση της εικόνας χρησιμοποιώντας φόντο .
Body( background-image: url("../img/ep_naturalwhite.png"); )
Περιγραφή στυλ CSS για το οριζόντιο μενού
Πρώτα απ 'όλα, ας επαναφέρουμε όλες τις εσοχές που μπορούν να ορίσουν τα διαφορετικά προγράμματα περιήγησης από προεπιλογή:
Dws-menu *( περιθώριο: 0; padding: 0; )
Ας ορίσουμε την κεφαλίδα σε 200 μπαστούνια. και εκχωρήστε τη γραμματοσειρά Cuprum, η οποία μπορεί να ληφθεί και να συνδεθεί ξεχωριστά στον ιστότοπό σας, σε κάθε περίπτωση, θα γράψουμε επιπλέον γραμματοσειρές.
Κεφαλίδα( περιθώριο: 200 εικονοστοιχεία; γραμματοσειρά-οικογένεια: Cuprum, Arial, Helvetica, sans-serif; )
Ας κρύψουμε τους δείκτες από τις λίστες:
dws-menu ul, .dws-menu ol(list-style: none; )
Ας εμφανίσουμε τις λίστες οριζόντια με εμφάνιση: flax , και ας το κάνουμε στο κέντρο:
Dws-menu > ul( display: flex; justify-content: center; )
Στην κεφαλίδα, ας κάνουμε εσοχή μόνο από την κορυφή, γράφουμε margin-top .
Επί κεφαλής( margin-top: 200px; γραμματοσειρά-οικογένεια: Cuprum, Arial, Helvetica, sans-serif; )
Ας σχεδιάσουμε το μενού μας, ορίζουμε το χρώμα των κουμπιών, τη γραμματοσειρά κ.λπ.
Dws-menu > ul li a( οθόνη: μπλοκ; φόντο: #ececed; συμπλήρωση: 15 εικονοστοιχεία 30 εικονοστοιχεία 15 εικονοστοιχεία 40 εικονοστοιχεία; μέγεθος γραμματοσειράς: 14 εικονοστοιχεία; χρώμα: #454547; διακόσμηση κειμένου: κανένα; μετατροπή κειμένου: κεφαλαία; )
Στη συνέχεια τοποθετούμε τα εικονίδια, εκχωρούμε τις λίστες θέση: σχετική; για να κεντράρετε περισσότερο τα εικονίδια:
dws-menu > ul li( θέση: σχετική; )
dws-menu > ul li > a i.fa (θέση: απόλυτη; επάνω: 15 εικονοστοιχεία; αριστερά: 12 εικονοστοιχεία; μέγεθος γραμματοσειράς: 18 εικονοστοιχεία; )
Ας αντιστοιχίσουμε ένα διαχωριστικό περιγράμματος στις λίστες, επιλέξτε το πρώτο στοιχείο LI και ορίστε το περίγραμμα. Επιλέγουμε το τελευταίο στοιχείο LI και του εκχωρούμε ένα παρόμοιο περίγραμμα.
Dws-menu > ul li:first-child( border-αριστερά: 1px solid #b2b3b5; ) .dws-menu > ul li:last-child( border-right: 1px solid #babbbd; )
Δημιουργία διαχωριστικών για λίστες LI:
.dws-menu > ul li( θέση: σχετική;
περίγραμμα-δεξιά: 1px στερεό #c7c8ca;
}
Το μενού έχει αποκτήσει την εμφάνιση, τότε μπορείτε να αρχίσετε να περιγράφετε στυλ στο δείκτη.
Κινούμενη κίνηση του οριζόντιου μενού στο δείκτη του ποντικιού
Dws-menu li a:hover(φόντο: #454547; χρώμα: #ffffff; πλαίσιο-σκιά: 1px 5px 10px -5px μαύρο; μετάβαση: όλα τα 0,3s ease; )
Και για να εξαφανιστεί ομαλά αυτό το εφέ, προσθέστε αυτό το στυλ στον σύνδεσμο σε κατάσταση ηρεμίας:
.dws-menu > ul li a( οθόνη: μπλοκ; φόντο: #ececed; συμπλήρωση: 15 εικονοστοιχεία 30 εικονοστοιχεία 15 εικονοστοιχεία 40 εικονοστοιχεία; μέγεθος γραμματοσειράς: 14 εικονοστοιχεία; χρώμα: #454547; διακόσμηση κειμένου: κανένα; μετατροπή κειμένου: κεφαλαία; μετάβαση: όλα τα 0,3s ευκολία? ) Το κύριο μενού έχει ολοκληρωθεί και μπορείτε να ξεκινήσετε την περιγραφή των υπομενού και των υπομενού τους.
Περιγραφή ενός αναπτυσσόμενου μενού CSS/HTML
Ανοίγουμε το index.html και προσθέτουμε, για παράδειγμα, ένα επιπλέον μενού στα προϊόντα. Μεταξύ των λιστών LI που εισάγουμε UL , θα τοποθετήσουμε πέντε λίστες σε αυτήν, στις οποίες θα υπάρχουν σύνδεσμοι με το χαρακτηριστικό herf=”#” .
ul>li*5>a
Κάντε κλικ στην εφαρμογή, γράψτε το όνομα των στοιχείων ( Ρούχα, Ηλεκτρονικά, Τρόφιμα, Εργαλεία, Ζωή. χημεία ).
είδη ένδυσης
ΗΛΕΚΤΡΟΝΙΚΑ ΕΙΔΗ
Φαγητό
Εργαλεία
Γεν. χημεία
Στη συνέχεια ανοίγουμε το style.css και περιγράφουμε τα στυλ του υπομενού.
Επιλέξτε τη δεύτερη λίστα και δώστε της τη θέση: απόλυτη; , ορίστε το ελάχιστο πλάτος στα 150 pixel.
/*υπομενού*/ .dws-menu li ul(θέση: απόλυτη, ελάχ. πλάτος: 150 εικονοστοιχεία; )
Ας γράψουμε το περίγραμμα 1 κορυφής στις λίστες.
Dws-menu li > ul li( περίγραμμα: 1px στερεό #c7c8ca; )
Για συνδέσμους στο υπομενού, ορίστε το padding σε 10 pixel, αφαιρέστε το μετασχηματισμό κειμένου και κάντε το φόντο μερικούς τόνους πιο σκούρο φόντο: #e4e4e5; .
Dws-menu li > ul li a( padding: 10px; text-transform: none; background: #e4e4e5; )
Στη συνέχεια θα δημιουργήσουμε ένα άλλο ένθετο μενού. Ας πάμε στο αρχείο σήμανσης και, για παράδειγμα, στο "Ηλεκτρονικά" σχηματίζουμε το μενού κατ' αναλογία, όπως κάναμε και πριν. Περιγράψτε τις επικεφαλίδες των παραγράφων ( Κάμερες, Υπολογιστές, Τηλέφωνα ) και αποθηκεύστε.
ΗΛΕΚΤΡΟΝΙΚΑ ΕΙΔΗ
κάμερες
Υπολογιστές
Τηλέφωνα
Εμφανίζονται, αλλά κρύβονται κάτω από το κύριο μενού, τώρα θέση: απόλυτη; ένθετο UL και μετατοπίστε το κατά 150 κορυφές. στο πλάι:
Dws-menu li > ul li ul(θέση: απόλυτη; δεξιά: -150 px; επάνω: 0; )
/*υπομενού*/ .dws-menu li ul( position: absolute; min-width: 150px; οθόνη: καμία; ) Και για την εμφάνισή τους, θα επιλέξουμε τις λίστες στο hover και θα τις εμφανίσουμε χρησιμοποιώντας το display: block; .
dws-menu li:hover > ul( display: block; )
Τώρα μπορείτε να προσθέσετε πολυεπίπεδα μενού απλά αντιγράφοντας το μπλοκ UL, αλλάζοντας τις ρήτρες του.
είδη ένδυσης
Παπούτσια
Μπουφάν
Παντελόνι
ΗΛΕΚΤΡΟΝΙΚΑ ΕΙΔΗ
κάμερες
Υπολογιστές
Τηλέφωνα
Φαγητό
Εργαλεία
Γεν. χημεία
Υπηρεσία 1
Υπηρεσία 2
Υπηρεσία 3
Έπειτα ας διακοσμήσουμε τα κουμπιά με το υλικό για τα τελευταία βήματα. Χρησιμοποιώ μια γεννήτρια CSS, έχω δημιουργήσει πολλές προεπιλογές, μπορείτε να δημιουργήσετε τις δικές σας, στην περίπτωσή μου απλώς αντιγράφω δεδομένου κωδικού και τοποθετήστε στη θέση του το φόντο που έγραψα πριν.
.dws-menu > ul li a( display: block;
/* Μόνιμος σύνδεσμος - χρησιμοποιήστε για επεξεργασία και κοινή χρήση αυτής της διαβάθμισης: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98,757577+100;Προσαρμοσμένο+3 */ φόντο: #c9c9c9 ; /* Παλιά προγράμματα περιήγησης */ φόντο: -moz-linear-gradient(top, #c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, #757577 100%); /* FF3.6-15 */ φόντο: -webkit-linear-gradient(top, #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+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c9c9c9", endColorstr="#757577",GradientType=0); /* IE6-9 */
padding: 15px 30px 15px 40px; μέγεθος γραμματοσειράς: 14 px; χρώμα: #454547; κείμενο-διακόσμηση: κανένα; text-transform:κεφαλαία; μετάβαση: όλα τα 0,3s ευκολία? ) .dws-menu li a:hover( /* Μόνιμος σύνδεσμος - χρησιμοποιήστε για επεξεργασία και κοινή χρήση αυτής της διαβάθμισης: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 */ φόντο: #e0e1e5; /* Παλιά προγράμματα περιήγησης */ φόντο: -moz-linear-gradient(top, #e0e1e5 0%, #454547 2%, #454547 98%, #e0e1e5 100%); /* FF3.6-15 */ φόντο: -webkit-linear-gradient(top, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e0e1e5", endColorstr="#e0e1e5",GradientType=0); /* IE6-9 */
χρώμα: #ffffff; κουτί-σκιά: 1px 5px 10px -5px μαύρο; μετάβαση: όλα τα 0,3s ευκολία? )
Αν είναι επιθυμητό αυτό το μενού μπορείτε να κανονίσετε το στυλ που σας ταιριάζει στον ιστότοπο, είναι πολύ απλό να δημιουργήσετε ένα χρώμα και να το αντικαταστήσετε στον κώδικα. Το αποτέλεσμα είναι ένα απλό και συνάμα ωραίο οριζόντιο μενού φτιαγμένο με καθαρό CSS.
Σε αυτήν την ανάρτηση, θα δημιουργήσουμε ένα σταθερό πλευρικό μενού πληροφοριών. Για να εφαρμόσουμε τα εικονίδια, θα συνδέσουμε τη γραμματοσειρά .
Βήμα 1. Συνδέστε τη γραμματοσειρά με εικονίδια, δημιουργήστε ένα κενό έγγραφο
Μπορείτε να βρείτε αναλυτικές πληροφορίες σχετικά με την εργασία με τη γραμματοσειρά FontAwesome και έναν σύνδεσμο προς το ίδιο το έργο στην ανάρτησή μου -.
Εδώ είναι ο κώδικας της σελίδας με τα συνδεδεμένα αρχεία:
Διορθώθηκε το πλαϊνό μενού
Βήμα 2: Προσθήκη της Σήμανσης HTML του Σταθερού Μενού
Εδώ είναι ο κωδικός σήμανσης για το σταθερό μενού μας:
Όπως προσέξατε, εφάρμοσα την ετικέτα - αυτό είναι ένα στοιχείο σήμανσης html5, εάν χρησιμοποιείτε html4, μπορείτε να αντικαταστήσετε αυτήν την ετικέτα με μια κανονική ή αφαιρέστε το εντελώς και μετακινήστε το αναγνωριστικό στη λίστα, ως εξής:
