Έχοντας ολοκληρώσει τα header και container, μπορούμε να δούμε το μενού πλοήγησης του site. Η λίστα ul (unordered list) είναι το καταλληλότερο tag για την δημιουργία του βασικού μας μενού και με την βοήθεια των CSS θα την φέρουμε στα μέτρα μας.
(Ενημερώθηκε στις 11/1/2012)
<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>, μπορώ να προσθέσω κάτω από αυτό ακόμα ένα κουτί με bannerάκια ή μία παρόμοια λίστα με links ,και όλα αυτά να είναι στο ίδιο κουτί και έτσι να μπορώ να δώσω κοινά ενδεχομένως στυλ σε όλα τα στοιχεία της sidebar με βάση το id της. Μπορείτε επίσης να δείτε πως έχω μια λίστα μέσα στην άλλη και πως, κατ' εξαίρεση, χρησιμοποιώ το <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) και, με το list-style-type: none; αφαιρώ το bullet που εφαρμόζεται εξ' ορισμού στις λίστες. Υπεθυμίζω πως τα <ul>, όπως όλα τα block level elements απλώνουν στο 100% του διαθέσιμου χώρου, ο οποίος καθορίζεται από τον ωφέλιμο χώρο του κουτιού που τα περικλείει ή το <body>. Επίσης, τα <ul> έχουν διαφορετικά στυλ margins, paddings σε κάθε browser και καλό είναι να τα ορίζουμε πάντα*. Θυμηθείτε το box model!
Χρησιμοποιώ ένα δικό μου γραφικό για τα <li> του υπομενού: #sidebar ul li ul li { background: url(images/bullet_green.png) no-repeat left bottom; }. Αν θυμάστε από το μάθημα για τους selectors, αυτός ο κανένας επιλέγει τα <li> που είναι μέσα σε <ul>, μέσα σε <li>, μέσα σε <ul>, μέσα στο id="sidebar", ή με απλά λόγια, επιλέγει όλα τα list items δευτέρου επιπέδου. Υπάρχει πιο σύντομος τρόπος να επιλέξω τα συγκεκριμένα elements (#sidebar li li) αλλά το έγραψα έτσι για να είναι πιο φανερό. Θα μπορούσα επίσης να πετύχω το ίδιο πράγμα βάζοντας ένα id στο <ul> κάτω από το «Πρώτα βήματα στην HTML» και χρησιμοποιώντας το σαν selector — μπορείτε να κάνετε ότι σας βολεύει αλλά αν είχα ακόμα ένα υπομενού παρακάτω θα έπρεπε να βάλω τους σχετικούς κανόνες και στο δεύτερο υπομενού, που δεν είναι ευέλικτο. Καλύτερα να περιορίσετε τη χρήση των id στα απολύτως απαραίτητα! Έχετε πάντως υπ' όψιν πως τα 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.
* Πολλά έχουν γραφτεί για το πως εμφανίζονται τα διάφορα elements σε κάθε browser και οι λύσεις που επικρατούν είναι είτε το reset.css είτε το …restart.css — δεν λέγεται έτσι αλλά κάπως έπρεπε να τα διαχωρίσω! Εγώ προτιμώ το reset.
Δείτε επίσης: τα πάντα για τις λίστες, με παραδείγματα και άλλα παραδείγματα! Κι ένα βίντεο για επιδόρπιο!
(Βαθμολογία: +2, ψήφοι: 4)
Loading ...
Comment by meymigrou
9 Ιανουαρίου 2012 @ 2:15 μμ
Καλησπέρα φίλε.
Καταρχάς σε ευχαριστώ για τα υπέροχα tutorials σου και καλή χρονιά..
Στο μάθημα αυτό (Πρώτα βήματα στα CSS: μενού) δεν μπόρεσα να καταλάβω πολλά και θέλω πολύ να μάθω πως να φτιάχνω από την αρχή βήμα προς βήμα τα μενού.
Comment by Παναγιώτης Βελισαράκος
9 Ιανουαρίου 2012 @ 3:16 μμ
Ευχαριστώ για ευχές και ανταποδίδω! Κόλλησες σε κάποιο σημείο ή δεν είναι πολύ σαφές όλο το άρθρο γενικά; Αν και λίγο παλιό, ευχαρίστως θα διαθέσω χρόνο να το «χτενίσω» λίγο.