Έχοντας ολοκληρώσει τα header και container, μπορούμε να δούμε το μενού πλοήγησης του site. Η λίστα ul (unordered list) είναι το καταλληλότερο tag για την δημιουργία του βασικού μας μενού και με την βοήθεια των CSS θα την φέρουμε στα μέτρα μας.
<div id="sidebar"> <ul> <li><strong>Αρχική σελίδα</strong></li> <li>Πρώτα βήματα στην HTML <ul> <li><a href="01.html">το <code>DOCTYPE</code></a></li> <li><a href="02.html"><code>html</code> και <code>head</code></a></li> <li><a href="03.html"><code>body</code> και τα πρώτα tags</a></li> <li><a href="04.html"><code>table</code></a></li> <li><a href="05.html"><code>form</code></a></li> </ul> </li> <li><a href="contact.html">Επικοινωνία</a></li> </ul> </div>
Το βασικό μας μενού περικλείεται σε ένα <div>. Αυτό δεν είναι απαραίτητο στο συγκεκριμένο site διότι το <ul> είναι επίσης block element και θα μπορούσα να χρησιμοποιήσω την ίδια την λίστα για την μορφοποίηση αλλά έχοντας τη μέσα σε ένα <div> μπορώ να προσθέσω κάτω από το βασικό μενού, ακόμα ένα με links π.χ. ή bannerάκια και όλα αυτά να είναι στο ίδιο κουτί. Μπορείτε επίσης να δείτε πως έχω μια λίστα μέσα στην άλλη και πως, κατ' εξαίρεση, χρησιμοποιώ το <strong> για να τονίσω την σελίδα στην οποία είμαστε ήδη (στην Αρχική, απ' όπου πήρα τον κώδικα) — δεν είναι semantic αλλά είναι μικρό το κακό. Αν ήθελα να έχω αυστηρά semantic κώδικα θα έπρεπε να χρησιμοποιήσω <span> και CSS αλλά εδώ, δεν αξίζει τον κόπο.
#sidebar { margin-top: 20px; width: 170px; }
#sidebar ul { list-style-type: none; font-size: 1.1em; margin: 0; padding: 0; }
#sidebar ul li { margin-bottom: 0.5em; }
#sidebar ul li ul { font-size: 1em; margin-top: 0.5em; }
#sidebar ul li ul li { background: url(images/bullet_green.png) no-repeat left bottom; margin-bottom: 0; padding-left: 20px; }
Καθορίζω το πλάτος του <div id="sidebar"> στα 170 pixels και δίνω 20 pixels αέρα από πάνω. Τα <ul> μέσα στο #sidebar έχουν πλάτος 100% του διαθέσιμου που είναι 170 pixels αφού δεν έχω margins, paddings ή borders και, με το list-style-type: none; αφαιρώ το bullet που εφαρμόζεται εξ' ορισμού στις λίστες. Αντίθετα, θέλω να χρησιμοποιήσω ένα δικό μου γραφικό για το υπομενού των μαθημάτων: #sidebar ul li ul li { background: url(images/bullet_green.png) no-repeat left bottom; }. Αν θυμάστε από το μάθημα με τους selectors, αυτός ο κανένας «απευθύνεται» στα <li> που είναι μέσα σε ένα <ul>, μέσα σε <li>, μέσα σε <ul>, μέσα στο id="sidebar", ή με απλά λόγια, σε όλα τα list items δευτέρου επιπέδου. Θα μπορούσα να πετύχω το ίδιο πράγμα βάζοντας ένα id στο <ul> κάτω από το «Πρώτα βήματα στην HTML» και χρησιμοποιώντας το id αυτό σαν selector — μπορείτε να κάνετε ότι σας βολεύει! Έχετε πάντως υπ' όψιν πως τα margin:0 και padding:0 του πρώτου κανόνα (#sidebar ul {}) κληρονομούνται και στην δεύτερη λίστα, ενώ δε συμβαίνει το ίδιο με το #sidebar ul li { margin-bottom: 0.5em; } αφού το μηδενίζω παρακάτω στον κώδικα: #sidebar ul li ul li { margin-bottom: 0; }.
Στο επόμενο μάθημα θα ασχοληθώ με τα λεγόμενα CSS Hacks - διάφορες τεχνικές για να ξεπεράσουμε κάποια προβλήματα του Internet Explorer 6, και με μερικούς ακόμα κανόνες CSS που χρησιμοποιούνται σε κάθε μας site.
(Βαθμολογία: +1, ψήφοι: 1)
Loading ...