Αυτόματη και εύκολη
δημιουργία μενού με
αναδυόμενες λίστες, βασισμένες σε καθαρό
CSS και όχι Javascript; Ναι είναι δυνατό, και το παρουσιάζουμε σήμερα. Ονομάζεται
List-O-Matic και ο δημιουργός του μας προσφέρει online την αναβαθμισμένη έκδοση του.
Το αποτέλεσμα θα μπορεί να είναι κάτι σαν:
Είχαμε γράψει για ακόμη
απλούστερους τρόπους για δημιουργία μενού, όχι όμως αναδυόμενους. Το ότι το σημερινό μενού βασίζεται μόνο σε
CSS και
HTML κι όχι javascript είναι πολύ καλό διότι πολλοί κλείνουν το JS.
Πάμε στη σελίδα που είναι online το
List-O-Matic. Συμπληρώνουμε τα πεδία. Εκεί που λέει "link text" θα μπουν
για παράδειγμα αυτά που βλέπετε στην πρώτη εικόνα:
- Home
- About
- Θέματα
- Facebook
- Twitter
Μόλις γράψετε Home στο διπλανό κουτί URL γράψτε τη διεύθυνση. Μετά κλικ "add top level navigation item", γράψτε About και δίπλα τη διεύθυνση. κλικ "add top level navigation item" πάλι, γράψτε θέματα. Στοπ. Αυτό είναι, στο παράδειγμα μας αναδυόμενο μενού. Μόλις κάνεις κλικ στο θέματα θα βγαίνει μια λίστα, όπως βλέπετε πάνω, με τα θέματα. Άρα το top level item θέματα δεν έχει URL. -. Κλικ τώρα στο "This link contains sublevel navigation", θα εμφανιστεί υπομενού. Επαναλαμβάνω άλλες 4 φορές διότι στο παράδειγμα κάνοντας κλικ στο "+" αυτή τη φορά. Τα θέματα είναι 5(δες πρώτη φώτο, αναδειόμενο μενού θέματα):
- Blogging
- Internet
- Προγράμματα
- Windows
- Ubuntu
Προσθέτουμε, στο παράδειγμα μας, τις αντίστοιχες διευθύνσεις των υποθεμάτων που είναι στην περίπτωση μας ετικέτες στο blog(κλικ για μεγέθυνση, δεν φαίνονται όλα τα υπομενού στο screenshot:
Οπότε, για το παράδειγμα μας μενού της 1ης φωτογραφίας τώρα προσθέτω δυο σκέτα top level menu item ακομη με τις διευθύνσης τους:
Κλικ τώρα πάνω πάνω στο κουμπί I'm done show me the styles για να επιλέξουμε μερικά στυλ και χρώματα μενού.
Όταν τώρα κάνετε κλικ στο show me the markup θα σας δώσει τον κώδικα CSS/HTML. Αντιγράψτε τον ανοίγοντας το Σημειοματάριο, πρώτα το CSS μετά από κάτω κενό και μετά το HTML.
Τώρα. Αν είστε στον Blogger, απλά προσθέστε ένα γκάτζετ HTML/Javascript και επικολλήστε εκεί ότι αντιγράψετε από το σημειοματάριο, και συμπληρώστε κώδικα, ως εξής:
Δηλαδή μεταξύ των <style> </style> μπαίνει ο κώδικας CSS(αυτό το κομμάτι που επικολλήσατε πρώτα στο Σημειοματάριο). Τα <style> </style>και ο κώδικας μεταξύ τους μπαίνουν μεταξύ των <head> </head>. Ο HTML κώδικας θα μπεί μεταξύ <body> </body> Τέλος τέλος μπαίνει πάντα το </html>(και αρχή αρχή το <html>).
Οι πρώτες δυο γραμμές, πριν το <html> για σας μάλλον δε χρειάζονται. Όσοι όμως φτιάχνουν ιστοσελίδα, οι πρώτες δυο ή παρόμοιες απαιτούνται.
Προσοχή. Όσοι έχουν διαφημίσεις adsense. Απαγορεύεται να βάλετε τέτοιο αναδυόμενο μενού ακριβώς λίγο πάνω από αυτές. Διότι όταν αναδυθεί θα τις καλύπτει. Θα σας πετάξουν από το πρόγραμμα.
Σημείωση: Ο συγκεκριμένος τρόπος εισαγωγής CSS styles λέγεται Embedded. Υπάρχει και το Inline αλλά και το Εξωτερικό style sheet(βλέπε ήδη CSS styles). Έχουμε στο blog κάνει μια εισαγωγή για το CSS.
Licensed under a Creative Commons Attribution Non Commercial Licence
