Breadcrumb navigation και άλλες ιστορίες!

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
FavoriteLoadingΠροσθήκη στα Αγαπημένα μου
19/04/2010 από
thePrince

Το web ξεχειλίζει από πληροφορίες, παραδείγματα, demos και ιδέες για HTML 5 και CSS 3 αλλά, μέχρι να οριστικοποιηθούν κάπως αυτά τα specs, θα πρέπει να συνεχίσουμε να προγραμματίζουμε για τους browsers που έχουμε τώρα. Ακολουθεί λοιπόν ένα σύντομο μάθημα για μια πολύ συγκεκριμένη λειτουργία ενός site: τα breadcrumbs.

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

html_screenshot

Για αρχή λοιπόν θέλουμε μια 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 τοποθετημένο στη δεξιά άκρη. Τα βελάκια παρεπιπτόντως θα πρέπει να είναι «τρύπια» — δείτε πως το πορτοκαλί «κάθεται» εξίσου όμορφα και σε πορτοκαλί αλλά και σε μπλε φόντο. Τα lis είναι 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 προβληματάκια και σημεία προσοχής που ελπίζω να κατέστησα σαφή. Εις το επανιδείν!

Αρχικά δημοσιευμένο από thePrince











Σχόλια

Δεν υπάρχουν σχόλια ακόμα.

Αφήστε ένα σχόλιο

 






RSS για τα σχόλια σε αυτό το άρθρο.  |  TrackBack URL



 
 
 

Eταιρείες παροχής υπηρεσιών διαδικτύου




 

Το Όραμά Μας

3d2 3d2

Η νέα εποχή ξεκινάει…

Είστε έτοιμοι;

Παρά τις όποιες δυσκολίες συναντήσαμε, τελικά μετά από 1 χρόνο περίπου, καταφέραμε να συγκεντρώσουμε τις δυνάμεις μας και να βάλουμε τις σκέψεις μας στο σωστό μονοπάτι.

Ξεκινάμε μια νέα εποχή για τα Ελληνικά δεδομένα. Κοιτάμε μπροστά και οραματίζομαστε το μέλλον με αισιοδοξία σε μία πολύ δύσκολη εποχή!

Αν είστε digital artist (web designer. web developer, programmer, 3d animator, graphic designer κτλ)  δώστε λίγα λεπτά από τον χρόνο σας να διαβάσετε το παρακάτω άρθρο. Σίγουρα σας ενδιαφέρει

 
web design forum

  • Προσεγγίστε νέους αναγνώστες και φίλους
  • Αποκτήστε το δικαίωμα να προωθήστε την σελίδα σας μέσω διαφημιστικών banner στο web design forum
  • Αποκτήστε συνδέσμους και backlinks δωρεάν
  • Αυτόματη προωθηση του άρθρου σας, σε διάφορες ιστοσελίδες κοινωνικής δικτύωσης.