Χαιρετισμούς, αγαπητοί αναγνώστες του ιστότοπου του ιστολογίου. Σήμερα θέλω να μιλήσω για κάτι σαν φόρμες HTML. Όποια κι αν είναι η μηχανή του ιστότοπού σας (cms), θα χρησιμοποιεί σίγουρα φόρμες με τη μία ή την άλλη μορφή, που έχουν δημιουργηθεί με τις ετικέτες Form και Input, καθώς και τα χαρακτηριστικά και τις παραμέτρους Button, Checked, Value, Checkbox, Radio, Checkbox, Submit .
Λοιπόν, μπορείτε επίσης να προσθέσετε σε αυτό στοιχεία για τη δημιουργία αναπτυσσόμενων λιστών και πεδίων κειμένου - Επιλογή, Επιλογή, Textarea, Ετικέτα, Σύνολο πεδίων, Υπόμνημα.
Γιατί χρειάζονται τα έντυπα και πώς λειτουργούν σε σύγχρονους ιστότοπους;
Η ίδια συμβολοσειρά αναζήτησης ιστότοπου () δημιουργείται χρησιμοποιώντας αυτές τις ετικέτες και θα απαιτείται αναζήτηση στο έργο σας. Επομένως, η κατανόηση του πώς είναι δομημένα και λειτουργούν δεν θα σας εμποδίσει καθόλου για να εργαστείτε με επιτυχία στο σχέδιο και δεν θα είναι περιττό αν το προωθήσετε μόνοι σας.
Έτσι, έχοντας δικαιολογήσει την ανάγκη μελέτης αυτών των στοιχείων, νομίζω ότι δεν πρέπει να προκύψουν άλλα ερωτήματα, οπότε είναι καιρός να προχωρήσουμε απευθείας στη μελέτη των πιθανών επιλογών τους.
Ναι, θα ήθελα επίσης να σας υπενθυμίσω ότι έχουμε ήδη εξετάσει πολλά υλικά σχετικά με το θέμα της γλώσσας σήμανσης υπερκειμένου, για παράδειγμα, τρία ) και .
Στον πυρήνα τους, οι φόρμες αποτελούνται από στοιχεία, για τη δημιουργία των οποίων εισάγονται διάφορες ετικέτες από ετικέτες φόρμας μέσα στο κύριο κοντέινερ - Checked, Value, Checkbox, Radio, Checkbox, Submit κ.λπ. Απλώς πρέπει να τοποθετήσουμε τον κωδικό του σε οποιοδήποτε βολικό τοποθετήστε στο πρότυπο ιστότοπου , υποδεικνύοντας τη χρήση ετικετών και των ιδιοτήτων τους πώς πρέπει να φαίνεται.
Αυτό θα μπορούσε να είναι ένα πεδίο κειμένου με ένα κουμπί για την υποβολή του ερωτήματος που έχετε εισαγάγει, επιλογές με κουμπιά επιλογής (όπου μπορείτε να αφήσετε μόνο ένα από τα παρεχόμενα κουμπιά πατημένο), πολλά πεδία κειμένου με ένα κουμπί για υποβολή() και πολλά άλλα.
Για παράδειγμα, στην περίπτωση «αναζήτησης», χρησιμοποιώντας το χαρακτηριστικό Value μπορείτε να καθορίσετε τι ακριβώς θα γραφτεί στο κουμπί που βρίσκεται δίπλα στο πεδίο για την εισαγωγή ερωτήματος. Τα δεδομένα που εισάγονται στις φόρμες πρέπει να υποβάλλονται σε περαιτέρω επεξεργασία με κάποιο τρόπο.
Για παράδειγμα, στην περίπτωση σχολίων, ο χρήστης, αφού συμπληρώσει το πεδίο με το όνομά του, εισάγει το email του και το κείμενο του μηνύματος και στη συνέχεια κάνει κλικ στο κουμπί αποστολής, θα έχει το δικαίωμα να ελπίζει ότι τα δεδομένα από τη φόρμα θα σταλεί στο E-mail του συγγραφέα του ιστότοπου. Αλλά, δυστυχώς, δεν είναι δυνατό να εφαρμοστεί αυτό χρησιμοποιώντας μόνο μία γλώσσα σήμανσης υπερκειμένου ().
Για τους σκοπούς αυτούς, θα χρειαστείτε ένα ειδικό πρόγραμμα επεξεργασίας, το οποίο, αφού ο χρήστης κάνει κλικ στο κουμπί αποστολής, θα λάβει όλα τα δεδομένα από τα πεδία σχολίων και θα τα στείλει μέσω email στον κάτοχο του πόρου. Πρέπει να καθορίσετε ποιο πρόγραμμα θα το κάνει μόνοι σας χρησιμοποιώντας το χαρακτηριστικό Action.
Συνήθως, το πρόγραμμα επεξεργασίας είναι ένα σενάριο γραμμένο σε PHP. Επομένως, στο χαρακτηριστικό Action της ετικέτας Form, θα χρειαστεί να καθορίσετε τη διαδρομή προς το αρχείο αυτού του σεναρίου που βρίσκεται στον διακομιστή φιλοξενίας σας. Επιτρέψτε μου να σας δώσω ένα παράδειγμα εγγραφής στη ροή RSS του ιστολογίου μου μέσω e-mail:
Μπορεί να φαίνεται λίγο ασαφές στην αρχή, αλλά νομίζω ότι όλα θα γίνουν πιο ξεκάθαρα όσο συνεχίζεται η ιστορία.
Ετικέτες φόρμας και εισαγωγής για τη δημιουργία κουμπιών, πλαισίων ελέγχου και κουμπιών επιλογής
Οποιαδήποτε φόρμα πρέπει να περικλείεται σε ετικέτες ανοίγματος και κλεισίματος Μορφή. Αυτό είναι ένα είδος δοχείου για τη δημιουργία τους. Αυτή η ετικέτα έχει μια σειρά από απαιτούμενα και προαιρετικά χαρακτηριστικά:
- Όνομα – ένα μοναδικό όνομα που πρέπει να καθοριστεί εάν το αρχείο Html όπου κάνετε κάτι θα χρησιμοποιεί πολλές φόρμες ιστού
- Ενέργεια – ένα απαιτούμενο χαρακτηριστικό που υποδεικνύει τη διαδρομή προς το σενάριο στο οποίο θα μεταφερθούν τα δεδομένα από αυτό για περαιτέρω επεξεργασία
- Μέθοδος – με αυτήν μπορείτε να αλλάξετε τη μέθοδο μεταφοράς δεδομένων από αυτήν τη φόρμα ιστού στο σενάριο του αρχείου χειριστή. Εάν δεν το καθορίσετε, τότε θα χρησιμοποιηθεί από προεπιλογή η μέθοδος Λήψη, η οποία, στην πραγματικότητα, προορίζεται κυρίως για μεταβλητές και σύντομα μηνύματα, καθώς και για ανοιχτή μετάδοση δεδομένων μέσω της γραμμής διευθύνσεων του προγράμματος περιήγησης. Για να μεταφέρετε δεδομένα φόρμας στο σενάριο χειρισμού, είναι ακόμα καλύτερο να το χρησιμοποιήσετε Μέθοδος POST, σχεδιασμένο ειδικά για τη μετάδοση μηνυμάτων κειμένου με ιδιωτικό τρόπο
Ας δούμε τις υπόλοιπες ετικέτες που σας επιτρέπουν να δημιουργήσετε μια ποικιλία από φόρμες ιστού. Το πιο ευέλικτο είναι Εισαγωγή. Το χαρακτηριστικό Type πρέπει να γραφτεί μέσα σε αυτό, το οποίο καθορίζει ποια ακριβώς θα είναι η φόρμα HTML που δημιουργήθηκε χρησιμοποιώντας αυτήν την ετικέτα.
Χρησιμοποιώντας το Input and Type μπορείτε να δημιουργήσετε τα ακόλουθα στοιχεία:
- πεδία κειμένου μιας γραμμής (Type="Text")
- πεδία για την εισαγωγή κωδικού πρόσβασης (Type="Password")
- πλαίσια ελέγχου (Type="Checkbox")
- κουμπιά επιλογής (Type="Radio")
- κρυφά πεδία (Type="Hidden")
- κανονικά κουμπιά (Type="Button")
- κουμπιά για την αποστολή δεδομένων στον χειριστή (Type="Submit")
- κουμπιά για να φέρετε τη φόρμα ιστού στην αρχική της κατάσταση (Type="Reset")
- πεδία για τη μεταφόρτωση αρχείων στον διακομιστή (Type="File)
- κουμπιά με εικόνα (Type="Image")
Η είσοδος δεν έχει ετικέτα κλεισίματος. Το πώς ακριβώς θα μοιάζει μια φόρμα ιστού που δημιουργήθηκε χρησιμοποιώντας αυτήν εξαρτάται εξ ολοκλήρου από την παράμετρο που καθορίζεται στο χαρακτηριστικό Type. Εάν δεν έχει καθοριστεί Τύπος, θα δημιουργηθεί ένα πεδίο κειμένου από προεπιλογή.
Παραδείγματα φορμών που δημιουργήθηκαν στο Input με διαφορετικές τιμές για Type
Άλλα χαρακτηριστικά ετικέτας εισόδου και παραδείγματα χρήσης τους
Ας δούμε τι χρειάζονται τα άλλα χαρακτηριστικά:
- Όνομα – εάν τα δεδομένα πρέπει να σταλούν στη δέσμη ενεργειών προγράμματος χειριστή, τότε πρέπει να καθορίσετε μια παράμετρο για το χαρακτηριστικό Name. Κάτω από αυτό το όνομα, τα δεδομένα που αποστέλλονται από τη φόρμα θα εμφανίζονται στο πρόγραμμα επεξεργασίας πληροφοριών.
- Μέγεθος - χρησιμοποιείται για τον καθορισμό του μεγέθους του πεδίου της φόρμας ιστού που δημιουργείται. Η τιμή υποδεικνύεται στον αριθμό των χαρακτήρων που χωρούν σε αυτό το πεδίο. Εάν δεν έχει καθοριστεί Μέγεθος, το πλάτος θα είναι προεπιλεγμένο σε 24 χαρακτήρες
- Maxlength - από προεπιλογή, ο αριθμός των χαρακτήρων που μπορούν να εισαχθούν σε μια φόρμα Html δεν είναι περιορισμένος, αλλά χρησιμοποιώντας το Maxlength μπορείτε να ορίσετε αυτόν τον περιορισμό. Δεν θα μπορείτε να εισάγετε περισσότερους χαρακτήρες από αυτούς που υποδεικνύονται στο πεδίο.
- Τιμή - μπορείτε να τη χρησιμοποιήσετε για να καθορίσετε τι ακριβώς θα γραφτεί από προεπιλογή στο πεδίο ή στο κουμπί υποβολής δεδομένων
- Το επιλεγμένο είναι ένα χαρακτηριστικό επισήμανσης που μπορεί να εισαχθεί στα κουμπιά επιλογής εισόδου ή στα πλαίσια ελέγχου. Σε αυτήν την περίπτωση, αυτό το κουμπί επιλογής ή το πλαίσιο ελέγχου θα είναι ενεργό όταν φορτωθεί η σελίδα με τη φόρμα ιστού (θα έχουν ήδη ένα σημάδι επιλογής)
Τώρα ας δούμε τα πάντα παραδείγματα φορμών με Εισαγωγή. Η εμφάνιση του πεδίου κειμένου είναι παρόμοια με την εμφάνιση του πεδίου εισαγωγής κωδικού πρόσβασης, επομένως ας εξετάσουμε μόνο την επιλογή δημιουργίας κειμένου, για παράδειγμα, για την εισαγωγή μιας διεύθυνσης email:
Ας δούμε τώρα τη δημιουργία μιας φόρμας ιστού με κουμπιά επιλογής (Ραδιόφωνο):
Παρατηρήστε ότι αυτή η φόρμα χρησιμοποιεί την ετικέτα Εισαγωγή δύο φορές, μία φορά για να δημιουργήσει καθένα από τα δύο κουμπιά επιλογής. Επιπλέον, καθένα από αυτά περιέχει το χαρακτηριστικό Name με την ίδια τιμή (resultat) και η τιμή Value είναι διαφορετική (ΝΑΙ και ΟΧΙ).
Αυτό σημαίνει ότι κατά την επεξεργασία, εάν επιλεγεί κάποιος από τους διακόπτες, θα σταλεί μια μεταβλητή, το όνομα της οποίας είναι γραμμένο στο Όνομα, αλλά η τιμή αυτής της μεταβλητής θα εξαρτάται από το ποιος διακόπτης επιλέχθηκε.
Ας δούμε ένα παράδειγμα δημιουργίας μιας φόρμας ιστού με πλαίσια ελέγχου:
Τα πλαίσια ελέγχου διαφέρουν από τα κουμπιά επιλογής, καθώς σας επιτρέπουν να επιλέξετε πολλές επιλογές ταυτόχρονα. Το όνομα χρησιμοποιείται για να καθοριστεί στο αρχείο χειριστή σε ποιο πλαίσιο ελέγχου τοποθετούνται τα πλαίσια ελέγχου και η τιμή καθορίζει την τιμή που θα σταλεί στον χειριστή (εάν δεν έχει καθοριστεί η τιμή, τότε το κείμενο που βρίσκεται δίπλα σε αυτό το πλαίσιο ελέγχου θα σταλεί στον χειριστή ).
Select, Option, Textarea, Label, Fieldset, Legend - αναπτυσσόμενες λίστες, περιοχές κειμένου και άλλα στοιχεία φόρμας ιστού
Αρχικά, θα ήθελα να σας υπενθυμίσω λίγο τι είναι στην πραγματικότητα οι φόρμες ιστού και γιατί χρειάζονται στις σελίδες ιστοτόπων. Έχουν σχεδιαστεί κυρίως για να αναπαράγουν στοιχεία που βρίσκονται σε οποιοδήποτε λειτουργικό σύστημα σε φιλική προς το χρήστη μορφή: κουμπιά, πεδία εισαγωγής κειμένου, αναπτυσσόμενες λίστες, πλαίσια ελέγχου, διακόπτες και παρόμοια.
Όλοι οι χρήστες, χωρίς καμία επιπλέον εξήγηση, κατανοούν τον σκοπό αυτών των στοιχείων και αν δουν ένα κουμπί φόρμας HTML, καταλαβαίνουν ότι πρέπει να κάνουν κλικ σε αυτό.
Επιπλέον, όλα τα συστατικά στοιχεία του (όπως Select, Option, Textarea, Label, Fieldset, Legend) είναι ήδη συμπληρωμένα κενά (containers), για να εισαγάγετε τα οποία χρειάζεται απλώς να χρησιμοποιήσετε την επιθυμητή ετικέτα με τα απαραίτητα χαρακτηριστικά και παραμέτρους.
Τα ίδια τα προγράμματα περιήγησης ξέρουν πώς να εμφανίζουν αυτό ή εκείνο το στοιχείο φόρμας ιστού. Είναι αλήθεια ότι οι επιλογές εμφάνισης για το ίδιο στοιχείο σε διαφορετικά προγράμματα περιήγησης μπορεί να διαφέρουν ελαφρώς μεταξύ τους, αλλά, κατά κανόνα, όχι σημαντικά.
Οτι. αποδεικνύεται ότι οι φόρμες ιστού στο Html είναι μια προσπάθεια μεταφοράς κλειδιού στοιχεία που χρησιμοποιούνται σε οποιοδήποτε λειτουργικό σύστημα, στις σελίδες του ιστότοπου. Αλλά γιατί μπορεί να χρειαστούν στις σελίδες του ιστότοπου;
Κατ 'αρχήν, για τον ίδιο σκοπό που χρησιμοποιούνται παρόμοια στοιχεία σε λειτουργικά συστήματα - μεταφορά δεδομένων από τον χρήστη. Στην περίπτωση των φορμών, τα δεδομένα από τον χρήστη μεταφέρονται στον διακομιστή, όπου τα επεξεργάζονται από ειδικό πρόγραμμα (η γλώσσα σήμανσης υπερκειμένου, δυστυχώς, δεν επιτρέπει την επεξεργασία δεδομένων).
Ωστόσο, τα δεδομένα μπορούν να σταλούν όχι μόνο στον διακομιστή, αλλά και, για παράδειγμα, μέσω email στη διεύθυνση που καθορίζεται στο χαρακτηριστικό Action της ετικέτας Form. Κατά την αποστολή δεδομένων από Html σε E-mail, ο χρήστης συμπληρώνοντας τα πεδία, αφού κάνει κλικ στο κουμπί αποστολή δεδομένων, θα εκκινήσει το προεπιλεγμένο πρόγραμμα αλληλογραφίας που χρησιμοποιείται στον υπολογιστή του.
Η αρχική ετικέτα Φόρμας σε αυτήν την περίπτωση θα πρέπει να μοιάζει κάπως έτσι:
Όπως μπορείτε να δείτε, το να κάνετε κλικ στο κείμενο για να ενεργοποιήσετε αυτό το στοιχείο είναι άχρηστο - πρέπει να κάνετε κλικ σε αυτό το ίδιο. Αυτή ακριβώς είναι η κατάσταση που έχει σχεδιαστεί να διορθώνει η ετικέτα Label. Σας επιτρέπει να κάνετε κλικ στο κείμενο δίπλα στο στοιχείο της φόρμας ιστού, κάτι που αναμφίβολα είναι θα βελτιώσει τη χρηστικότητα.
Αλλά πώς να συνδέσετε το στοιχείο φόρμας Html και το κείμενο; Για να γίνει αυτό, πρέπει να προσθέσετε ένα αναγνωριστικό με μια μοναδική παράμετρο στο χαρακτηριστικό και το κείμενο πρέπει να περιβάλλεται από το άνοιγμα και το κλείσιμο ετικετών Label. Και δεν είναι μόνο αυτό. Στην αρχική ετικέτα Label πρέπει να συμπεριλάβετε το χαρακτηριστικό For, η παράμετρος του οποίου πρέπει να είναι ακριβώς ίδια με αυτή του χαρακτηριστικού ID στην ετικέτα Html του στοιχείου φόρμας. Αποδεικνύεται κάτι σαν αυτό:
Όπως μπορείτε να δείτε, τώρα, χάρη στη χρήση της ετικέτας, τα στοιχεία της φόρμας ιστού μπορούν να ενεργοποιηθούν όχι μόνο κάνοντας κλικ πάνω της, αλλά και κάνοντας κλικ στο κείμενο που βρίσκεται δίπλα της.
Fieldset και Legend - σπάζοντας τη φόρμα σε μέρη
Πιθανότατα έχετε δει συχνά ότι οι μεγάλες φόρμες στο Html χωρίζονται σε ομάδες (Fieldset), οι οποίες περιβάλλονται από ένα πλαίσιο και κάθε τέτοια ομάδα έχει τον δικό της τίτλο (Legend). Αυτό υλοποιείται χρησιμοποιώντας μόνο δύο ετικέτες: Fieldset και Legend. Είναι ζευγαρωμένα, δηλ. Πρέπει να έχουν ένα άνοιγμα και ένα κλείσιμο.
Έτσι, για να δημιουργήσετε μια ομάδα εξαρτημάτων, πρέπει να περικλείσετε όλα αυτά τα μέρη στις ετικέτες Fieldset ανοίγματος και κλεισίματος. Και για να ορίσετε έναν τίτλο (Legend) για αυτήν την ομάδα, πρέπει αμέσως μετά το άνοιγμα Fieldset να γράψετε μια κατασκευή ενός Legend ανοίγματος και κλεισίματος, μεταξύ των οποίων πρέπει να εισαγάγετε το κείμενο του τίτλου της ομάδας.
Ακολουθεί ένα παράδειγμα δημιουργίας ομάδων χρησιμοποιώντας το Fieldset και το Legend:
Καλή σου τύχη! Τα λέμε σύντομα στις σελίδες του ιστότοπου του ιστολογίου
Μπορεί να σας ενδιαφέρει
Επιλογή, Option, Textarea, Label, Fieldset, Legend - Ετικέτες Html για τη μορφή αναπτυσσόμενων λιστών και πεδίων κειμένου Λίστες σε κώδικα Html - ετικέτες UL, OL, LI και DL
MailTo - τι είναι και πώς να δημιουργήσετε έναν σύνδεσμο σε Html για να στείλετε ένα email
Πώς ορίζονται τα χρώματα σε κώδικα Html και CSS, επιλογή αποχρώσεων RGB σε πίνακες, έξοδος Yandex και άλλα προγράμματα
Τι είναι η γλώσσα σήμανσης υπερκειμένου Html και πώς να προβάλετε μια λίστα με όλες τις ετικέτες στο πρόγραμμα επικύρωσης του W3C
Πώς να εισαγάγετε έναν σύνδεσμο και μια εικόνα (φωτογραφία) σε ετικέτες HTML - IMG και A
Πίνακες σε Html - Ετικέτες Table, Tr και Td, καθώς και Colspan, Cellpadding, Cellspacing και Rowspan για τη δημιουργία τους
Γραμματοσειρά (Πρόσωπο, Μέγεθος και Χρώμα), Blockquote και Pre tags - μορφοποίηση κειμένου παλαιού τύπου σε καθαρό HTML (δεν χρησιμοποιείται CSS)
Πώς να δημιουργήσετε μια υπερ-σύνδεση (A, Href, Target Blank), πώς να την ανοίξετε σε νέο παράθυρο στον ιστότοπο και επίσης να κάνετε μια εικόνα σύνδεσμο σε κώδικα Html
Τα τελευταία δύο χρόνια, η ανάπτυξη διαδικτυακών εφαρμογών (ιστοσελίδων) έχει προχωρήσει πολύ και αυτό που χρησιμοποιούσαμε για να δημιουργήσουμε έναν ιστότοπο νωρίτερα είναι ήδη ξεπερασμένο ή έχουν εμφανιστεί πιο πρόσφατες μέθοδοι.
Προηγουμένως, για να δημιουργήσετε μια αναπτυσσόμενη λίστα σε html ( Στα Αγγλικά. - αναπτυσσόμενο μενού), μόλις χρησιμοποιήσαμε
Ειδικά για αυτό το άρθρο, βρήκα 16 διαφορετικά παραδείγματα που μπορεί να είναι χρήσιμα κατά την ανάπτυξη ιστότοπου. Και ας ξεκινήσουμε λοιπόν.
1. Προσαρμοσμένη λίστα
Πρότυπο Html που σας επιτρέπει να προσαρμόσετε τα δικά σας χρώματα για την αναπτυσσόμενη λίστα.
2. Κατασκευασμένο με CSS3/JavaScript
Γραμμένο σε CSS3 και JavaScript. Τακτική αναπτυσσόμενη λίστα.
3. Στυλ: σταθμοί του μετρό
Διαφανής αναπτυσσόμενη λίστα με το στυλ των σταθμών του μετρό.
4. Dropy. Γραμμένο σε SCSS & jQuery
5. Για μεγάλες λίστες έκδοσης
Μια εξαιρετική λύση για μεγάλα αναπτυσσόμενα μενού.
Ένα αναπτυσσόμενο μενού που είναι γραμμένο σε καθαρό CSS χωρίς χρήση σεναρίων.
Ιδανικό για πλευρικά μενού σε έναν ιστότοπο για την οπτική εμφάνιση κατηγοριών σε έναν ιστότοπο.
8. Κομψό μενού ρυθμίσεων χρήστη
9. Αναπτυσσόμενη λίστα CSS3
Κατασκευασμένο σε στυλ διεπαφής χρήστη, θα ταιριάζει στο στυλ διεπαφής χρήστη του ιστότοπου.
12. Επιλογή σημαίας
Αναπτυσσόμενο μενού στο στυλ επιλογής χώρας.
13. Αναπτυσσόμενο μενού απλού HTML, CSS
Ελπίζω να σας άρεσε η επιλογή μου. Αφήστε σχόλια, μοιραστείτε τη γνώμη σας και στείλτε τα δικά σας έργα!
Πώς να δημιουργήσετε μια αναπτυσσόμενη λίστα σε html (επιλογή TOP 16) από το bologer
Οριζόντιο αναπτυσσόμενο μενούχρησιμοποιείται για την οργάνωση της δομής πλοήγησης του ιστότοπου. Ο βέλτιστος αριθμός επιπέδων φωλεοποίησης είναι ένα ή δύο. Όσο λιγότερα επίπεδα συνημμένων, τόσο πιο εύκολο είναι για έναν επισκέπτη του ιστότοπου να βρει τις πληροφορίες που χρειάζεται. Πώς να δημιουργήσετε ένα κανονικό οριζόντιο μενού περιγράφεται λεπτομερώς στο.
Πώς να δημιουργήσετε ένα οριζόντιο αναπτυσσόμενο μενού
1. Σήμανση HTML και βασικά στυλ για ένα αναπτυσσόμενο μενού με ένα επίπεδο ένθεσης
Η σήμανση HTML ενός οριζόντιου αναπτυσσόμενου μενού διαφέρει από ένα κανονικό μενού στο ότι συνδέεται με το επιθυμητό στοιχείο λίστας
- ή<оl> .
Για να τοποθετήσετε το υπομενού σε σχέση με το κύριο μενού, δηλώνονται τα ακόλουθα στυλ:
— για ένα στοιχείο λίστας στο οποίο είναι ένθετη μια αναπτυσσόμενη λίστα: li (θέση: σχετική;) ;
— για το αναπτυσσόμενο μενού ul (θέση: απόλυτη;) , καθώς και την αριστερή και την επάνω τιμή.
Για σαφήνεια και ευκολία μορφοποίησης, ας προσθέσουμε το επάνω μενού της κλάσης στο κύριο μενού και το υπομενού στο αναπτυσσόμενο μενού.
Υπάρχουν διάφοροι τρόποι για να αποκρύψετε ένα αναπτυσσόμενο μενού:
1) οθόνη: καμία?
2) ορατότητα: κρυφό.
3) αδιαφάνεια: 0;
4) μετασχηματισμός: scaleY(0);
5) χρησιμοποιώντας τη βιβλιοθήκη jQuery.
Μέθοδος 1. (εμφάνιση: καμία;)
Το αναπτυσσόμενο μενού είναι κρυφό χρησιμοποιώντας το .submenu (εμφάνιση: κανένα;) , στο hover εμφανίζεται χρησιμοποιώντας το .topmenu li:hover .submenu (εμφάνιση: μπλοκ;) .
Μέθοδος 2. (ορατότητα: κρυφή;)
Το μενού κρύβεται χρησιμοποιώντας το .submenu (ορατότητα: κρυφό;) και εμφανίζεται χρησιμοποιώντας το .topmenu li:hover .submenu (ορατότητα: ορατό;) .
Μέθοδος 3. (αδιαφάνεια: 0;)
Το μενού κρύβεται χρησιμοποιώντας το .submenu (αδιαφάνεια: 0;) και εμφανίζεται χρησιμοποιώντας το .topmenu li:hover .submenu (αδιαφάνεια: 1;) . Για να αποτρέψετε την εμφάνιση του μενού όταν τοποθετείτε το δείκτη του ποντικιού πάνω από την περιοχή όπου βρίσκεται, προσθέστε ορατότητα: κρυφό. , και όταν τοποθετείτε το δείκτη του ποντικιού, αλλάξτε το σε ορατότητα: ορατό. .
Μέθοδος 4. (μετασχηματισμός: κλίμακαY(0);)
Το μενού κρύβεται χρησιμοποιώντας το .submenu (transform: scaleY(0);) και εμφανίζεται χρησιμοποιώντας το .topmenu li:hover .submenu (transform: scaleY(1);) . Εφόσον ο προεπιλεγμένος μετασχηματισμός του στοιχείου πραγματοποιείται από το κέντρο, πρέπει να προσθέσετε για το .submenu (transform-origin: 0 0;) , π.χ. από την επάνω αριστερή γωνία.
Μέθοδος 5: Χρήση jQuery
$(".five li ul").hide(); // απόκρυψη του αναπτυσσόμενου μενού $(".five li:has(".submenu")").hover(function())($(".five li ul").stop().fadeToggle(300) ;) /* επιλέξτε ένα στοιχείο λίστας που περιέχει ένα στοιχείο με την κλάση .submenu και προσθέστε μια συνάρτηση hover σε αυτό που εμφανίζει και αποκρύπτει το αναπτυσσόμενο μενού */);2. Τρισδιάστατο αναπτυσσόμενο μενού
Μπορούν να δημιουργηθούν ενδιαφέροντα εφέ χρησιμοποιώντας μετασχηματισμούς CSS3, για παράδειγμα, κάνοντας ένα μενού να εμφανίζεται από τα βάθη της οθόνης.
* ( μέγεθος κουτιού: πλαίσιο-πλαίσιο; ) σώμα ( περιθώριο: 0; φόντο: ακτινική διαβάθμιση (#BFD6E2 1 εικονοστοιχεία, rgba (255,255,255,0) 2 εικονοστοιχεία); μέγεθος φόντου: 10 εικονοστοιχεία: 10 εικονοστοιχεία; ) nav ul (στυλ λίστας : κανένα; περιθώριο: 0; padding: 0; ) nav a ( οθόνη: block; κείμενο-διακόσμηση: κανένα; περίγραμμα: κανένα; μετάβαση: .4s ease-in-out; ) .topmenu ( backface-visibility: hidden; φόντο : rgba(255,255,255,.8); ) .topmenu > li ( οθόνη: inline-block; θέση: σχετική; ) .topmenu > li > a ( γραμματοσειρά-οικογένεια: "Exo 2", sans-serif; ύψος: 70px; ύψος γραμμής: 70 εικονοστοιχεία, συμπλήρωση: 0 30 εικονοστοιχεία, βάρος γραμματοσειράς: έντονη γραφή, χρώμα: #003559, μετατροπή κειμένου: κεφαλαία; ) .down:after ( περιεχόμενο: "\f107"; περιθώριο-αριστερό: 8 εικονοστοιχεία; γραμματοσειρά-οικογένεια : FontAwesome. : 5, πλάτος: 150 εικονοστοιχεία, μετασχηματισμός: προοπτική (600 εικονοστοιχεία) rotateX (-90 μοίρες), μετασχηματισμός προέλευσης: 0% 0%, μετάβαση: .6s ease-in-out; ) .topmenu > li:hover .submenu( ορατότητα: ορατός; αδιαφάνεια: 1; μετασχηματισμός: προοπτική(600px) rotateX(0deg); ) .υπομενού li a ( χρώμα: #7f7f7f; μέγεθος γραμματοσειράς: 13 εικονοστοιχεία, ύψος γραμμής: 36 εικονοστοιχεία, συμπλήρωση: 0 25 εικονοστοιχεία, οικογένεια γραμματοσειράς: "Kurale", σερίφ; )
3. Επεκτάσιμο αναπτυσσόμενο μενού με λογότυπο
Σε αυτό το παράδειγμα, το επάνω τμήμα της σελίδας περιέχει το λογότυπο και την πλοήγηση στον ιστότοπο. Το λογότυπο μπορεί να είναι εικόνα ή κείμενο. Το αναπτυσσόμενο μενού επεκτείνεται σταδιακά από κάτω από το κορυφαίο στοιχείο της λίστας χρησιμοποιώντας τη συνάρτηση μετασχηματισμού CSS3.
4. Επέκταση του αναπτυσσόμενου μενού
Ένα άλλο παράδειγμα για ένα αναπτυσσόμενο μενού. Το εφέ μεγέθυνσης όταν εμφανίζεται το μενού επιτυγχάνεται με τη μείωση του αρχικού size.submenu (transform: scale(.8);) , κατά το hover το μέγεθος αυξάνεται σε.topmenu > li:hover .submenu (transform: scale(1);) .
* ( μέγεθος κουτιού: border-box; ) σώμα ( περιθώριο: 0; φόντο: url(https://html5book.ru/wp-content/uploads/2015/10/background54.png) ) nav ( φόντο: λευκό; ) nav ul (στυλ λίστας: κανένα; περιθώριο: 0; συμπλήρωση: 0; ) nav a ( διακόσμηση κειμένου: κανένα; περίγραμμα: κανένα; εμφάνιση: μπλοκ; μετάβαση: .4s ease-in-out; ) .topmenu ( text-align: center; padding: 10px 0; ) .topmenu > li ( display: inline-block; position: related; ) .topmenu > li:after ( content: ""; position: absolute; right: 0; πλάτος: 1px; ύψος: 12px; φόντο: #d2d2d2; επάνω: 16px; box-shadow: 4px -2px 0 #d2d2d2; transformation: rotate(30deg); ) .topmenu > li:last-child:after ( background: none; box -shadow: none; ) .topmenu > li > a ( padding: 12px 26px; color: #767676; text-transform: κεφαλαία; γραμματοσειρά-βάρος: έντονη; διάστιχο: 1px; γραμματοσειρά οικογένειας: "Exo 2", sans-serif; ) .topmenu li a:hover ( χρώμα: #c0a97a; ) .submenu ( θέση: απόλυτη; αριστερά: 50%; επάνω: 100%; πλάτος: 210 px; περιθώριο-αριστερό: -105 px; φόντο: #fafa ; περίγραμμα: 1px στερεό #ededed; z-index: 5; ορατότητα: κρυφό; αδιαφάνεια: 0; transform: scale(.8); μετάβαση: 0,4s ease-in-out? ) .submenu li a ( padding: 10px 0; margin: 0 10px; border-bottom: 1px solid #efefef; μεγέθους γραμματοσειράς: 12px; color: #484848; font-family: "Kurale", serif; ) .topmenu > li:hover .submenu ( ορατότητα: ορατή; αδιαφάνεια: 1; μετασχηματισμός: κλίμακα(1); )
5. Αναδυόμενο αναπτυσσόμενο μενού
Οριζόντιο μενού με μίνι κινούμενα σχέδια: όταν τοποθετείτε το δείκτη του ποντικιού πάνω από τους συνδέσμους του επάνω μενού, εμφανίζεται ένας μικρός κύκλος, ο οποίος συνοδεύει επίσης την εμφάνιση του αναπτυσσόμενου μενού.
@import url("https://fonts.googleapis.com/css?.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; height: 100vh; position: related; ) σώμα:πριν ( περιεχόμενο: ""; θέση: απόλυτη; αριστερά: 0; κάτω: 0; ύψος: 100%; πλάτος: 100%; φόντο: γραμμική διαβάθμιση (45 μοίρες, rgba(0,0,0,0) , rgba(255,255,255,.8)); ) nav ( στοίχιση κειμένου: κέντρο; συμπλήρωση: 40 εικονοστοιχεία 0 0; ) nav ul (στυλ λίστας: κανένα; περιθώριο: 0; συμπλήρωση: 0; ) nav a ( διακόσμηση κειμένου : κανένα; οθόνη: μπλοκ; χρώμα: #222; ) .topmenu > li ( οθόνη: inline-block; θέση: σχετική; ) .topmenu > li > a ( θέση: σχετική; padding: 10px 15px; γραμματοσειρά-οικογένεια: " Σενάριο Kaushan", κουρδική, μέγεθος γραμματοσειράς: 1,5 εκ., ύψος γραμμής: 1, διάστιχο: 3 εικονοστοιχεία; ) .topmenu > li > a:before ( περιεχόμενο: ""; θέση: απόλυτη; z-index: 5; αριστερά: 50%; επάνω: 100%; πλάτος: 10 εικονοστοιχεία; ύψος: 10 εικονοστοιχεία; φόντο: λευκό; ακτίνα περιγράμματος: 50%; μετασχηματισμός: translate(-50%, 20 px); αδιαφάνεια: 0; μετάβαση: 0,3 δευτ.; ) .topmenu li:hover a:before ( transform: translate(-50%, 0); αδιαφάνεια: 1; ) .υπομενού ( θέση: απόλυτο; δείκτης z: 4; αριστερά: 50%, επάνω: 100%; πλάτος: 150 εικονοστοιχεία; συμπλήρωση: 15 εικονοστοιχεία 0 15 εικονοστοιχεία; περιθώριο-πάνω: 5 εικονοστοιχεία; φόντο: λευκό; ακτίνα περιγράμματος: 5 εικονοστοιχεία; box-shadow: 0 0 30 px rgba(0,0,0,.2); μέγεθος πλαισίου: πλαίσιο-πλαίσιο; ορατότητα: κρυφή; αδιαφάνεια: 0; μετατροπή: translate (-50%, 20 px); μετάβαση: 0.3s ; ) .topmenu > li:hover .submenu ( ορατότητα: ορατό; αδιαφάνεια: 1; μετατροπή: translate(-50%, 0); ) .submenu a ( γραμματοσειρά-οικογένεια: "Libre Baskerville", σερίφ; μέγεθος γραμματοσειράς: .
Σε αυτό το άρθρο, θα εξετάσουμε στοιχεία που σας επιτρέπουν να δημιουργείτε αναπτυσσόμενες λίστες, να μάθουμε πώς να σχηματίζετε ομάδες σε αυτές τις λίστες, να εξετάσουμε πώς να απενεργοποιείτε στοιχεία και ακόμη και ομάδες λιστών, να εξοικειωθείτε με ένα στοιχείο που σας επιτρέπει να δημιουργήσετε ένα πεδίο κειμένου πολλών γραμμών, το οποίο μπορείτε αργότερα να χρησιμοποιήσετε μέσα σε φόρμες HTML (στοιχείο
Επιπλέον, τοποθετήσαμε ένα κουμπί μέσα στη φόρμα που χρησιμεύει για την υποβολή της φόρμας (στοιχείο με το κουμπί πληκτρολογήστε "submit form": type = "submit" ).
Το αποτέλεσμα του παραδείγματός μας:
Επεξήγηση εργαλείου περιοχής κειμένου
Και έτσι θα δούμε το τελευταίο παράδειγμα και θα προχωρήσουμε στην πρακτική εργασία του άρθρου αυτού του εγχειριδίου.
Χάρη στο χαρακτηριστικό (HTML tag
Το κείμενο συμβουλής εργαλείου κρύβεται όταν ο χρήστης εισάγει μια τιμή (οποιονδήποτε χαρακτήρα) στο πεδίο κειμένου· εάν αφαιρεθεί, η επεξήγηση εργαλείου θα εμφανιστεί ξανά.
Ας δούμε ένα παράδειγμα χρήσης:
type = "submit" name = "submitInfo" value = "submit" > !}
Σε αυτό το παράδειγμα, δημιουργήσαμε δύο περιοχές κειμένου (το στοιχείο
Σημειώστε ότι εάν ένα πεδίο κειμένου είναι μόνο για ανάγνωση, το περιεχόμενο δεν μπορεί να αλλάξει, αλλά ο χρήστης μπορεί να πλοηγηθεί, να επιλέξει και να αντιγράψει το περιεχόμενο.
Επιπλέον, τοποθετήσαμε ένα κουμπί μέσα στη φόρμα που χρησιμεύει για την υποβολή της φόρμας (στοιχείο με το κουμπί πληκτρολογήστε "submit form": type = "submit" ).
Το αποτέλεσμα του παραδείγματός μας:
Ερωτήσεις και εργασίες για το θέμα
Πριν προχωρήσετε στο επόμενο θέμα, ολοκληρώστε την εργασία εξάσκησης:
- Χρησιμοποιώντας τις γνώσεις που έχετε αποκτήσει, δημιουργήστε την παρακάτω φόρμα αγγελίας εργασίας:
Πριν ξεκινήσετε την εργασία, ανοίξτε το παράδειγμα σε νέο παράθυρο και εξετάστε προσεκτικά τη φόρμα για να επαναλάβετε όλα τα σημεία της. Για να ολοκληρώσετε την εργασία θα χρειαστείτε τις γνώσεις από το άρθρο. Αν το χάσατε, επιστρέψτε να το μελετήσετε.
Αφού ολοκληρώσετε την άσκηση, επιθεωρήστε τον κώδικα της σελίδας ανοίγοντας το παράδειγμα σε ένα ξεχωριστό παράθυρο για να βεβαιωθείτε ότι τα κάνατε όλα σωστά.
Σήμερα θέλω να παρουσιάσω μια μικρή "συνταγή" για τη δημιουργία μιας λίστας σε CSS. Χωρίς JQuery, χωρίς CSS3 - απλώς ένα καλό παλιό CSS πολλαπλών προγραμμάτων περιήγησης. Το παράδειγμα είναι αρκετά απλό, επομένως οι έμπειροι σύντροφοι μπορεί να μην ενδιαφέρονται. Θα εφαρμόσουμε μια αναπτυσσόμενη λίστα με κουμπιά κοινωνικής δικτύωσης.
Οπότε, ας μην μιλάμε για πολύ, ας μπούμε κατευθείαν στο θέμα
HTML
Μοιραστείτε αυτήν την ανάρτηση
- Κελάδημα
- Google Plus
- Σε επαφή με
- RSS
Παραλείπω σκόπιμα γενικά σημεία, όπως η συμπερίληψη στυλ, έτσι ώστε ο κώδικας να μην μεγαλώνει. Στο κάτω μέρος της σελίδας θα δώσω έναν σύνδεσμο προς τις πηγές - όλα είναι εκεί.
Αυτό που έχουμε στην HTML είναι μια κανονική λίστα και μια ασυνήθιστη κεφαλίδα. Το ασυνήθιστο του είναι ότι γίνεται με υπερσύνδεσμο, που σας επιτρέπει να παρακολουθείτε το συμβάν :φτερουγίζω, δηλαδή καθοδήγηση. Η αναπτυσσόμενη λίστα θα λειτουργεί όταν τοποθετείτε το δείκτη του ποντικιού πάνω από τον τίτλο.
CSS
Αρχικά, ας δούμε τα βασικά στυλ μιας αναπτυσσόμενης λίστας. Προσπάθησα να σχολιάσω κάθε γραμμή κώδικα για να το κάνω πιο σαφές:
/*Επαναφορά του padding*/ .droplink ul,.droplink h3,.droplink h3 a( padding:0;margin:0 ) /*Basic wrapper*/ .droplink ( width:200px; position:absolute; margin:10px 0 0 25 εικονοστοιχεία ) /*Στυλ μπλοκ μετάδοσης κίνησης*/ .droplink:hover(ύψος:αυτόματη;χρώμα φόντου:#3E403D; περίγραμμα:συμπαγής 1εικ. #3A3C39 ) /*Τίτλος σε κανονική κατάσταση*/ .droplink h3 a(text-align:center ; πλάτος: 100%; οθόνη: μπλοκ; συμπλήρωση: 12 εικονοστοιχεία 0 εικονοστοιχεία; χρώμα:#999; κείμενο-διακόσμηση: κανένα ) .droplink h3 a img(border:none) /*Style for hover title*/ .droplink:hover h3 a (χρώμα:#FFF; γραμματοσειρά-βάρος: έντονη; θέση:απόλυτη)
Δεν υπάρχει τίποτα ιδιαίτερο εδώ, υποδείξαμε το μέγεθος και το στυλ του μπλοκ, το στυλ της κεφαλίδας και και για τα δύο στοιχεία, το στυλ τους όταν τοποθετείτε τον κέρσορα. Προχώρα:
/*Απόκρυψη της λίστας χωρίς hover*/ .droplink ul( list-style:none; display:none ) /*Εμφάνιση της λίστας στο hover*/ .droplink:hover ul( display:block; margin-top:40px ) .droplink li (εμφάνιση:μπλοκ)
Αυτός ο κώδικας είναι πιο ενδιαφέρον και δείχνει πώς συμπεριφέρεται αναπτυσσόμενη λίσταόταν τοποθετείτε τον κέρσορα. Σε κανονική κατάσταση κοστίζει οθόνη: καμία,δηλαδή δεν εμφανίζεται. Όταν τοποθετείται το δείκτη του ποντικιού, το δείχνουμε ως μπλοκ. Αυτό είναι όλο το μυστικό. Τώρα ας διακοσμήσουμε λίγο τα στοιχεία της λίστας και ας εισάγουμε εικονίδια:
/*Στιλ στοιχείου λίστας*/ .droplink li a( padding:5px 12px 4px 34px; margin:1px; background-color:#484A47; display:block; color:#FFF; text-decoration:none; γραμματοσειράς μεγέθους:12px ; background-repeat:no-repeat; background-position: 10px 3px ) /*Element hover style*/ .droplink li a:hover( background-color:#999 ) /*Icons*/ .facebook a (background-image : url("icons/facebook.png")) .twitter a (background-image:url("icons/twitter.png")) .vk a (background-image:url("icons/vk.png")) . rss a (background-image:url("icons/rss.png")) .gplus a (background-image:url("icons/gplus.png"))
Αυτό είναι όλο, στην πραγματικότητα. Η αναπτυσσόμενη λίστα είναι έτοιμη και φαίνεται πολύ ωραία. Μπορείτε να σχεδιάσετε τα στοιχεία κατά την κρίση σας, να προσθέσετε στρογγυλεμένες γωνίες και άλλα κουδούνια και σφυρίχτρες.
Εάν θέλετε η λίστα να "επικαλύπτει" το κείμενο κάτω από αυτήν όταν τοποθετείτε το δείκτη του ποντικιού, κοιτάξτε στο πλάι z-δείκτης.
Εάν κάτι είναι ασαφές ή δεν λειτουργεί, ρωτήστε στα σχόλια ή χρησιμοποιήστε το κουμπί "Αποστολή μηνύματος", είναι εκεί —>