Μετά από 6 δύσκολους, σε προσωπικό αλλά και επαγγελματικό επίπεδο, επιστρέφω στην ενεργό «δράση», με ένα σύντομο tutorial και τις καλύτερες ευχές για τη νέα χρονιά που μόλις πριν από 1 μήνα ξεκίνησε!

Πριν περάσω στο ζουμί, φυσικά, θα περιαυτολογήσω λιγάκι. Άλλαξα δουλειά λοιπόν και πλέον κάνω αυτό που είχα καταλήξει πως θα ήθελα να κάνω: HTML / CSS. Μόνο! Όχι, δεν βαριέμαι καθόλου, τουλάχιστον όχι ακόμα. Άλλωστε, αυτή την εποχή δεν είναι δυνατόν να βαριέται κανείς με όλα αυτά που συμβαίνουν στον χώρο — βλέπε HTML 5 και CSS 3. Τα οποία μπορεί να βρίσκονται σε νηπιακό στάδιο και πιθανότατα δεν θα πρέπει να βασιστείτε σε μερικές από τις προδιαγραφές που ΘΑ οριστικοποιηθούν κάποτε αλλά, όπως και να το κάνουμε, οι εξελίξεις είναι σπουδαίες.

Εν πάσει περιπτώσει, το web ξεχειλίζει από πληροφορίες, παραδείγματα, demos και ιδέες χρησιμοποιώντας τις παραπάνω τεχνολογίες αλλά, μέχρι να οριστικοποιηθούν κάπως τα specs, θα πρέπει να συνεχίσουμε να προγραμματίζουμε για τους browsers που έχουμε τώρα. Ακολουθεί λοιπόν ένα σύντομο μάθημα για μια πολύ συγκεκριμένη λειτουργία ενός site: τα breadcrumbs. Δεν θα προσπαθήσω καν να μεταφράσω αυτή την έννοια, νομίζω πως αυτού του είδους το navigation το έχουμε συναντήσει σε διάφορα sites και είναι εξαιρετικά χρήσιμο για τον χρήστη. Το Smashing Magazine έχει δημοσιεύσει από πέρσι ένα άρθρο σχετικά με το breadcrumb navigation κι εγώ θα σας δείξω πόσο εύκολο είναι να μετατρέψετε μια λίστα unordered (<ul>) σε κάτι σαν αυτό. Σκοπός μου δεν είναι βέβαια να το πάρετε όπως είναι και να το χρησιμοποιήσετε στο site σας (εκτός κι αν σας ταιριάζει φυσικά!) αλλά να πάρετε μια ιδέα κα να μάθετε πως να το φέρετε στα μέτρα σας.

<div id="breadcrumbs_container">
	<ul id="breadcrumbs">
		<li class="home"><a href="#" title="Επιστροφή στην αρχική σελίδα"><img alt="" src="path_icon_home.gif" /></a></li>
		<li class="level_1"><a href="#">Προηγούμενη σελίδα</a></li>
		<li class="level_2 current">Ετούτη η σελίδα (&hellip;)</li>
	</ul>
</div>

Για αρχή λοιπόν θέλουμε μια unordered list (<ul>) μέσα σε ένα container - ένα <div> στην συγκεκριμένη περίπτωση. Αυτό το <div> έχει το παρακάτω CSS:

#breadcrumbs_container {
	background:#ffffff url("path-bg.gif") no-repeat;
	margin:0 auto;
	height:40px;
	overflow:hidden;
	padding-left:6px;
	width:974px;
}

Χρησιμοποιώ ένα background-image μόνο και μόνο για τις στρογγυλές γωνίες — φυσικά, υπάρχουν πλέον άλλοι τρόποι. Δίνω συγκεκριμένες διαστάσεις στο <div> για να φαίνεται ολόκληρο το background και κρύβω οτιδήποτε «ξεχειλίσει» με overflow:hidden αν και στην πράξη, θα φροντίσω να μην χαθεί τίποτα. Τα στυλ της λίστα παρουσιάζουν μεγαλύτερο ενδιαφέρον:

#breadcrumbs {
	list-style-type:none;
	margin:0;
	overflow:hidden;
	padding:0;
	position:relative;
}

#breadcrumbs li {
	background:transparent url("path_arrow_orange.png") right no-repeat;
	float:left;
	height:40px;
	line-height:40px;
	position:relative;
}

#breadcrumbs li a {
	background-color:#fba55a;
	color:#ffffff;
	display:block;
	font-size:1.2em;
	height:40px;
	margin-right:14px;
	outline:0;
	padding:0 6px;
	text-decoration:none;
}

Αρχίζω αφαιρώντας το bullet από τη λίστα (list-style-type:none), μηδενίζοντας margins και paddings και χρησιμοποιώ το overflow:hidden για να «καθαρίσω» τα floats — μια σχετικά παλιά τεχνική που μόλις πρόσφατα έμαθα! Το position:relative στο #breadcrumbs τέλος υπάρχει για να «μηδενίζει» το z-index για τον IE που έχει μερικές ιδιοτροπίες…

Συνεχίζω με τους κανόνες του <li>: το κάθε ένα από αυτά έχει το δεξί βελάκι (είτε το πορτοκαλί είτε το μπλε) σαν background-image τοποθετημένο στη δεξιά άκρη. Τα βελάκια παρεπιπτόντως θα πρέπει να είναι «τρύπια» — δείτε πως το πορτοκαλί «κάθεται» εξίσου όμορφα και σε πορτοκαλί αλλά και σε μπλε φόντο. Τα <li>s είναι floated (και να γιατί πρέπει να «καθαρίσω») με συγκεκριμένο ύψος, postition:relative για το z-index (θα το ορίσω αμέσως μετά) και line-height:40px, ίσο με το συνολικό ύψος ώστε να κεντράρεται το κείμενο κάθετα.

Έπειτα φτιάχνω και το anchor, του δίνω χρώμα φόντου, το μετατρέπω σε block, δίνω και ένα περιθώριο στα δεξία (margin-right:14px) όσο είναι το πλάτος του γραφικού του βέλους.

#breadcrumbs .home { z-index:20; }
#breadcrumbs .level_1 { margin-left:-14px; text-indent:14px; z-index:19; }
#breadcrumbs .level_2 { margin-left:-14px; text-indent:14px; z-index:18; }
#breadcrumbs .level_3 { margin-left:-14px; text-indent:14px; z-index:17; }
#breadcrumbs .current {
	background:#60acdf url("path_arrow_blue.gif") right no-repeat;
	color:#ffffff;
	font-size:1.4em;
	padding-right:28px;
	text-indent:28px;
}

Εδώ προσθέτω τα classes που θα επιτρέψουν στα blocks να πέφτουν το ένα πάνω στο άλλο αντίθετα με τη σειρά εμφάνισης στον κώδικα – γι΄αυτό χρειάζομαι το z-index! Θα πρέπει να σημειώσετε τα εξής:

• το z-index εφαρμόζεται μόνο σε positioned elements (relative, absolute και fixed)
• αν έχω κι άλλο βάθος στο navigation θα πρέπει να προσθέσω επιπλέον .level_x μειώνοντας το z-index ανάλογα
• το κάθε <li> μετακινείται με αρνητικό margin προς τα αριστερά ώστε να έρθει κάτω από το βελάκι του προηγούμενου, τόσα pixels όσα είναι το πλάτος του γραφικού
• το <li class="current"> έχει κάποιους επιπλέον κανόνες επειδή έχει άλλο χρώμα στο φόντο ενώ δεν περικλείει anchor

Υπάρχουν ατελείωτες δυνατότητες προσαρμογής στις ανάγκες του κάθε site, αρκεί να έχετε κατά νου τα 1-2 προβληματάκια και σημεία προσοχής που ελπίζω να κατέστησα σαφή. Εις το επανιδείν!

(Βαθμολογία: +2, ψήφοι: 2)

 Loading ...

TrackBack URL