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

Η πλοήγηση στις ιστοσελίδες είναι μια μορφή μιας λίστας και η πλοήγηση με καρτέλες είναι σαν μια οριζόντια λίστα. Είναι αρκετά εύκολο να δημιουργήσετε οριζόντια πλοήγηση με καρτέλες με CSS, αλλά το CSS 3 μας δίνει μερικά ακόμα εργαλεία για να τα φανεί ακόμα πιο όμορφα.

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

Αυτό το μενού με καρτέλες χρησιμοποιείκαμία εικόνα, μόνο HTML και CSS 2 και CSS 3. Μπορεί εύκολα να επεξεργαστεί για να προσθέσετε περισσότερες καρτέλες ή να αλλάξετε το κείμενο σε αυτά.

Υποστήριξη προγράμματος περιήγησης

Αυτό το μενού καρτελών θα λειτουργήσειόλα τα μεγάλα προγράμματα περιήγησης. Ο Internet Explorer δεν θα δείξει τις στρογγυλεμένες γωνίες, αλλά διαφορετικά, θα εμφανίσει καρτέλες όπως το Firefox, το Safari, το Opera και το Chrome.

Γράψτε τη λίστα μενού

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

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

Γράψτε τη λίστα σας με τα εξής:

• class = "tablist">
  • CSS 3
  • id = "τρέχουσα"> καρτέλες
  • Για
  • Μενού
  Θα παρατηρήσετε ότι ο κώδικας καλεί δύο πράγματα: class = "tablist" και id = "τρέχουσα". Το πρώτο είναι απαιτείται. Εάν δεν το βάλετε tablist στην ταξινομημένη λίστα σας, οι καρτέλες δεν θα λειτουργήσουν. Το δεύτερο είναι προαιρετικό. Βάλτε τα id = "τρέχον" σε οποιαδήποτε καρτέλα θέλετε να επισημανθεί σε αυτήν τη σελίδα. Συνήθως χρησιμοποιούμε αυτό για να επισημάνουμε τη σελίδα στην οποία βρισκόμαστε, αλλά μπορείτε να την χρησιμοποιήσετε για να επισημάνετε την πιο σημαντική καρτέλα. Ή μπορείτε να το αφαιρέσετε τελείως.

Ξεκινήστε την επεξεργασία του φύλλου στυλ σας

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

Πρώτα θα στυλ το UL ο ίδιος

Εδώ χρησιμοποιούμε την τάξηtablist σε HTML. Αντί να στυλίσουμε την ετικέτα UL, η οποία θα στυλόταν σε όλες τις μη ταξινομημένες λίστες στη σελίδα σας, θα πρέπει να σχεδιάσετε μόνο την κλάση UL.tablist Έτσι, η πρώτη καταχώρηση στο CSS σας θα πρέπει να είναι:

.tablist {}

Μας αρέσει να βάζουμε το τελειωμένο σγουρό (~) μπροστά από το χρόνο, οπότε δεν το ξεχνάμε αργότερα.

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

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

Τέλος, εάν το κύριο φύλλο στυλ σας δεν έχει προεπιλογές για τις ετικέτες UL και OL, θα θελήσετε να τις τοποθετήσετε. Αυτό σημαίνει ότι θα πρέπει να απενεργοποιήσετε τα περιθώρια, τα περιθώρια και την επένδυση στο UL σας. padding: 0; περιθώριο: 0; σύνορα: κανένα · Εάν έχετε ήδη επαναφέρετε την ετικέτα UL, μπορείτε να αλλάξετε τα περιθώρια, την επένδυση ή τα σύνορα σε κάτι που ταιριάζει με το σχέδιό σας.

Η τελική κλάση .tablist θα πρέπει να έχει την εξής μορφή:

.tablist {style-style: none; ύψος: 2εκ. padding: 0; περιθώριο: 0; σύνορα: κανένα · }}

Επεξεργασία των στοιχείων λίστας LI

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

Αρχικά, ρυθμίστε την ιδιότητα στυλ σας:

.tablist li {}

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

Και μην ξεχάσετε να προσθέσετε κάποιο περιθώριο μεταξύ των καρτελών, έτσι δεν συγχωνεύονται. περιθώριο-δεξιά: 0.13em;

Τα στυλ li πρέπει να είναι όπως παρακάτω:

.tablist li {float: αριστερά. περιθώριο-δεξιά: 0.13em; }}

Κάνοντας τις καρτέλες να μοιάζουν με τις καρτέλες με το CSS 3

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

.tablist li a {} .tablist aa: hover {}

Επειδή αυτές οι καρτέλες πρέπει να λειτουργούν σαν καρτέλες σε μια εφαρμογή, θέλετε ολόκληρη την περιοχή της καρτέλας να είναι clickable, όχι μόνο το συνδεδεμένο κείμενο. Για να γίνει αυτό, πρέπει να μετατρέψετε την ετικέτα Α από την κανονική κατάσταση "inline" σε ένα στοιχείο μπλοκ. οθόνη: μπλοκ? (Εάν ενδιαφέρεστε να μάθετε περισσότερα σχετικά με τη διαφορά, διαβάστε το Επίπεδο Επίπεδο vs. Ενσωματωμένα Στοιχεία.)

Έπειτα, ένας εύκολος τρόπος για να αναγκάσετε τις καρτέλες σας να είναι συμμετρικές μεταξύ τους, αλλά ακόμα εύκαμπτο για να ταιριάζει στο πλάτος του κειμένου είναι να κάνετε το δεξί και το αριστερό padding το ίδιο. Χρησιμοποιήσαμε την ιδιότητα στεφανιαίας επένδυσης για να ορίσουμε το επάνω και το κάτω μέρος σε 0 και δεξιά και αριστερά σε 1em. παραγεμισμα: 0 1em;

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

Τοποθετώντας ένα λεπτό περίγραμμα γύρω από τις καρτέλες, τα κάνει να φαίνονται σαν καρτέλες. Χρησιμοποιήσαμε την περιουσιακή συνοριακή περιουσία για να θέσουμε τα σύνορα γύρω από τις τέσσερις πλευρές σύνορα: 0,06μ στερεά # 000; Στη συνέχεια, χρησιμοποιήσατε την ιδιότητα "κάτω" περιγράμματος για να την αφαιρέσετε από το κάτω μέρος. σύνορα-κάτω: 0;

Στη συνέχεια, κάναμε κάποιες προσαρμογές στο χρώμα της γραμματοσειράς, του χρώματος και του φόντου των καρτελών. Ορίστε αυτά στα στυλ που αντιστοιχούν στον ιστότοπό σας. γραμματοσειρά: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; χρώμα: # 000; χρώμα φόντου: #ccc;

Όλα τα παραπάνω στυλ θα πρέπει να πάνε στον επιλογέα.tablist li a, ο κανόνας έτσι ώστε να επηρεάζουν τις ετικέτες άγκυρας γενικά. Στη συνέχεια, για να κάνετε τις καρτέλες να εμφανίζονται πιο clickable, θα πρέπει να προσθέσετε μερικούς κανόνα κράτους.tablist li a: hover.

Μας αρέσει να αλλάζουμε το χρώμα του κειμένου και του φόντου για να φτιάξουμε την καρτέλα pop όταν το ποντίκι πάνω από το. φόντο: # 3cf; χρώμα: #fff;

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

Αλλά Πού είναι το CSS 3;

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

Τα στυλ που πρέπει να προσθέσετε στο .tablist li a είναι: -webkit-περιθώριο-κορυφή-δεξιά-ακτίνα: 0.50em; -webkit-όριο-κορυφή-αριστερά-ακτίνα: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-ακτίνα-topleft: 0.50em; κορυφή-δεξιά-ακτίνα: 0.50em; κορυφή-αριστερά-ακτίνα: 0.50em;

Αυτοί είναι οι τελικοί κανόνες στυλ που γράψαμε:

.tablist li a {εμφάνιση: μπλοκ; παραγεμισμα: 0 1em; κείμενο-διακόσμηση: κανένα? σύνορα: 0,06μ στερεά # 000; σύνορα-κάτω: 0; γραμματοσειρά: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; χρώμα: # 000; χρώμα φόντου: #ccc; / * CSS 3 στοιχεία * / webkit-border-top-right-radius: 0.50em; -webkit-όριο-κορυφή-αριστερά-ακτίνα: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-ακτίνα-topleft: 0.50em; κορυφή-δεξιά-ακτίνα: 0.50em; κορυφή-αριστερά-ακτίνα: 0.50em; } .tablist li a: μετακινήστε το {background: # 3cf; χρώμα: #fff; κείμενο-διακόσμηση: κανένα? }}

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

Επισημάνετε την καρτέλα Τρέχουσα

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

Στυλίσουμε τόσο την #current A ετικέτα όσο και το #current A: hover sta έτσι ώστε και οι δύο να είναι ελαφρώς διαφορετικές. Μπορείτε να αλλάξετε το χρώμα, το χρώμα του φόντου, ακόμα και το ύψος, το πλάτος και την επένδυση αυτού του στοιχείου. Κάντε οποιεσδήποτε αλλαγές έχουν νόημα στο σχεδιασμό σας.

.listlist li # τρέχουσα a {background-color: # 777; χρώμα: #fff; } .tablist li # τρέχουσα α: αιώρηση {φόντο: # 39C; }}

Και τελειώσατε! Μόλις δημιουργήσατε ένα μενού με καρτέλες για τον ιστότοπό σας.