Κάθετο μενού CSS: το κάνετε μόνοι σας

Μερικά webmasters δεν θέλουν να περνούν το χρόνο ανάπτυξης από απλά στοιχεία αρχή που ήδη υπάρχουν. Πιστεύουν ότι δεν υπάρχει νόημα να σπαταλάτε το χρόνο σας σε κάτι που εδώ και πολύ καιρό εκεί. Στην πραγματικότητα, για εκείνους που απλά mastering HTML και CSS, είναι σημαντικό να κάνετε στον εαυτό σας πολλά πράγματα για να έχουν μια καλή κατανόηση του έργου τους. Αυτό ισχύει για το μενού. Δημιουργήστε ένα κάθετο μενού CSS. Θα πρέπει να βασίζεται μόνο σε HTML και CSS, χωρίς την χρήση Javascript και JQuery. Κάθε μενού είναι μια λίστα με συνδέσμους που οδηγούν σε σελίδες του site.

βασικά βήματα

Για να δημιουργήσετε μια απλή κάθετο μενού CSS, θα πρέπει να έχετε τα ακόλουθα βήματα:

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

1. Home.
2. Η ιστορία μας.
3. Οδηγός.
4. Υπηρεσίες.
5. Επαφές.

2. Στη συνέχεια Styling συνδέσεις όπως εσείς επιθυμείτε με τη βοήθεια του CSS.

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

Αυτή είναι η βάση (σκελετός) του μενού μας. # 1, # 2, κλπ πρέπει να αντικατασταθεί από αναφορά. Δείτε πώς φαίνεται σε ένα πρόγραμμα περιήγησης. Η εικόνα δεν θα σας αρέσει. Τώρα πρέπει να αρχίσουμε να περιγράψει τα στοιχεία του στυλ, για να κάνει μια πλήρη κάθετη μενού CSS.

περιγραφή στυλ

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

ΛΕΠΤΟΜΕΡΗΣ ΠΕΡΙΓΡΑΦΗ χρησιμοποιούνται stylesheet

Τώρα εξετάστε τις λεπτομέρειες των CSS κάθετο μενού μας:

list-style-τύπου σας επιτρέπει να αφαιρέσετε τη λίστα των δεικτών. Με τη ρύθμιση «0» στο περιθώριο και να γεμίσει αφαιρέστε το επιπλέον επένδυση στη λίστα. Όπως μπορεί να δει κανείς από τον κώδικα HTML, μενού μας είναι μια λίστα, και οι μορφές που ορίζονται με τη χρήση CSS.

ul # my_Vmenu - το γενικό ύφος της ολόκληρη τη λίστα.

ul # my_Vmenu li ένα - στυλ δεσμών μεταξύ του li tag.

ul # my_Vmenu li a: hover - περιγραφή του τύπου υπό εξέταση των στοιχείων του μενού σε μια εποχή που ένα αιωρείται πάνω από τους ανθρώπους.

ul # my_Vmenu li μια έκταση - περιγραφή κειμένου (μενού τίτλων).

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

Στυλ πρέπει να συνδέονται μεταξύ των ετικετών κεφάλι σε ένα html αρχείο. menu_1.png και menu_2.png - αυτή είναι η εικόνα για το μενού εικόνας στην κανονική κατάσταση και αιωρείται.

Είναι καλύτερα να αποθηκεύσετε τις εικόνες σε ξεχωριστό φάκελο για τις εικόνες, το όνομα αυτό my_images, αλλά στη συνέχεια Ρυθμίστε τον κώδικα CSS. Γράψτε όπου οι εικόνες αυτές φαίνονται σε αυτόν τον κατάλογο: url (my_images / menu_1.png) και url (my_images / menu_2.png).

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

κάθετο μενού μας

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