15.1.06

Καινούρια link

Το concept (που βλέπετε πάνω δεξιά στην κεντρική σελίδα) το είχα δει και στο Α Δ Ε Ρ Φ Η. Αλλά η αλήθεια είναι ότι το είχα εκτιμήσει απλά σαν ένα τρομερά cool πράγμα. Δεν είχα δηλαδή σκεφτεί ότι έχει και τεράστια πρακτική σημασία, δηλαδή σου επιτρέπει να μαζέψεις μεγάλες λίστες σε μικρό χώρο.

Και αυτός είναι ο βασικός λόγος που μπήκα στη διαδικασία: Τους τελευταίους μήνες δεν προσέθετα όσα link θα 'θελα, γιατί αυτό το πράγμα δεξιά ήδη μου την έσπαγε υπερβολικά. Αρχικά σκέφτηκα να χρησιμοποιήσω selection lists με onchange (), αλλά, ας το αντιμετωπίσουμε: είναι απίστευτα άσχημα και επιπλέον χάνεις τη σημασιολογία των κανονικών υπερδεσμών, γιατί οι διευθύνσεις δεν καταγράφονται σαν href attributes (αλλά σαν value) μια και η υπερσύνδεση πραγματοποιείται με Javascript.

Εδώ αντίθετα πρόκειται για μια κανονική μη αριθμημένη λίστα. Ουσιαστικά η σύνταξη δε διαφέρει σε κάτι από αυτή μιας λίστας που περιέχει υπολίστες, π.χ.

  • Αρχεία

    • Ιανουάριος 2005

    • Φεβρουάριος 2005




  • Meta

    • Kubrick for Blogger

    • Designed by DiS

Απλώς οι bold υπολίστες γίνονται ορατές μόνο όταν πρέπει. Αυτό γίνεται πολύ εύκολα με CSS. Ρίξτε μια ματιά σε αυτό το άρθρο και θα τα καταλάβετε όλα. Έχει και παραδείγματα. Δείτε αν θέλετε και τον κώδικα της αρχικής σελίδας του Don't Kiss the Frog σαν παράδειγμα. Στην περίπτωσή μου, η λίστα με το όλο σκηνικό έχει id "froglinks" και επιπλέον βρίσκεται σε ένα DIV με id "sidebar". Μου βγήκε λίγο ο κώλος να τα τοποθετήσω σωστά, λόγω του ότι το default για το sidebar είναι... ανάμεσα στον καφέ τίτλο του blog και το πρώτο άρθρο.

Σημειώνω πως για τον Internet Explorer χρειάζεται μια επιπλέον χακιά Javascript (επίσης τη λέει στο άρθρο). Μ' όλες τις proprietary αηδίες του που ανοίγουν τα άπειρα backdoors, ο Explorer δεν είναι ικανός να κάνει render κάτι τόσο απλό που υλοποιείται με καθαρά τυπογραφικές εντολές μορφοποίησης. Ευτυχώς που τον ήπιε το εν λόγω όραμα.

---
update: κατόπιν χρήσιμου feedback, προσθέτω σε πρώτη φάση τη δυνατότητα το DKTF να φαίνεται με δύο διαφορετικά stylesheets, όπως κάποτε το CrazyMonkey. Αυτά είναι το Funky Spartan που είναι το προκαθορισμένο και το No animation που είναι αυτό που λέει το όνομά του. Μαζί με την επιλογή No Style, μας κάνουν 3 τρόπους να φαίνεται το DKTF:


(Funky Spartan)


(No animation)


(No style)

Όσοι έχετε Firefox, επιλέξτε το stylesheet που θέλετε από το μενού View->Page Style. Όσοι έχετε Konqueror από το View->Use Stylesheet. Όσοι έχετε Explorer, σοβαρευτείτε.

4 σχόλια:

javapapo είπε...

Γεια χαρά!

Στο 'μάτι' έρχεται αρκετά καλά και δεν φαίνεται η σελίδα υπερφορτωμένη με link kai ΄άλλα οπως πχ ειναι στο δικό μου αυτή την στιγμή!

Βέβαια σαν επισκέπτης της σελίδας δεντην βρίσκω ιδιαίτερα πρακτική.Είναι λιγο κουραστικά τα μενου και μπορούν να σε μπερδέψουν πανω στο κλικ μεχρι να κανει hover το ενα πανω στο αλλο!

Βεβαια για να ειμαι δικαιος..its just a blog οποτε ενταξει...να μην το παρατράβαω!

Σιγουρα ειναι ωραίο..παντως!

---. είπε...

Εντάξει, τα ΄παμε, μαλάκες είμαστε, ας την πούμε την παπαριά μας. Ρε συ sorry αλλά είναι μεγάλη μαλακία. Αισθητικά δεν θα το πολυκουράσω, περί ορέξεως...βατραχοπόδαρα. : )

Αλλά λειτουργικά, σου βγαίνουν τα μάτια να βάλεις το ποντίκι ακριβώς πάνω στην κατηγορία γιατί ανοίγουν άλλα αντί άλλων. Ίσως αν έκανες μεγαλύτερη τουλάχιστον την γραμματοσειρά, να βοηθούσες λιγάκι και εμάς τους στραβούλιακες. Λέμε τώρα...

valentin είπε...

j95 έχει προβληματάκια. Βολεύει ότι δε χρειάζεται να κανεις sroll down γραμμή-γραμμή για να βρείς μια κατηγορία, αλλά πέφτει ο κέρσορας στο ένα αντί στο άλλο. Έχει μανούβρα λίγο όταν πας από πάνω προς τα κάτω. Και αισθητικά είναι λίγο πρόβλημα. Θα πρότεινα τουλάχιστον να αφήσεις μεγαλύτερο κενό ανάμεσα στα hyperlink ή/και να τα διαφοροποιήσεις χρωματικά π.χ. ή και με άλλο τρόπο.

Ένα σάιτ που φαίνεται να έχει πράγμα που ίσως σε ενδιαφέρει www.dynamicdrive.com όπου νομίζω βρίσκεις διάφορα κόλπα για αυτά που σε απασχολούν.

Ανώνυμος είπε...

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

ΥΓ: Μη θίγεστε παιδιά, το "ηλίθιος" στο επάγγελμα μου είναι συνώνυμο με το "χρήστης".