Εύκολη δημιουργία μενού με λίστες(CSS based)

Αυτόματη και εύκολη δημιουργία μενού με αναδυόμενες λίστες, βασισμένες σε καθαρό CSS και όχι Javascript; Ναι είναι δυνατό, και το παρουσιάζουμε σήμερα. Ονομάζεται List-O-Matic και ο δημιουργός του μας προσφέρει online την αναβαθμισμένη έκδοση του.

Το αποτέλεσμα θα μπορεί να είναι κάτι σαν:

αυτόματη δημιουργία CSS Menu

Είχαμε γράψει για ακόμη απλούστερους τρόπους για δημιουργία μενού, όχι όμως αναδυόμενους. Το ότι το σημερινό μενού βασίζεται μόνο σε 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(δες πρώτη φώτο, αναδειόμενο μενού θέματα):
  1. Blogging
  2. Internet
  3. Προγράμματα
  4. Windows
  5. Ubuntu
Προσθέτουμε, στο παράδειγμα μας, τις αντίστοιχες διευθύνσεις των υποθεμάτων που είναι στην περίπτωση μας ετικέτες στο blog(κλικ για μεγέθυνση, δεν φαίνονται όλα τα υπομενού στο screenshot:

List-O-Matic, automatic CSS Menu creation

Οπότε, για το παράδειγμα μας μενού της 1ης φωτογραφίας τώρα προσθέτω δυο σκέτα top level menu item ακομη με τις διευθύνσης τους:
  • Facebook
  • Twitter
Κλικ τώρα πάνω πάνω στο κουμπί I'm done show me the styles για να επιλέξουμε μερικά στυλ και χρώματα μενού.

css menu styles

Όταν τώρα κάνετε κλικ στο show me the markup θα σας δώσει τον κώδικα CSS/HTML. Αντιγράψτε τον ανοίγοντας το Σημειοματάριο, πρώτα το CSS μετά από κάτω κενό και μετά το HTML.

Τώρα. Αν είστε στον Blogger, απλά προσθέστε ένα γκάτζετ HTML/Javascript και επικολλήστε εκεί  ότι αντιγράψετε από το σημειοματάριο, και συμπληρώστε κώδικα,  ως εξής:

HTML



Δηλαδή μεταξύ των  <style> </style> μπαίνει ο κώδικας CSS(αυτό το κομμάτι που επικολλήσατε πρώτα στο Σημειοματάριο). Τα <style> </style>και ο κώδικας μεταξύ τους μπαίνουν μεταξύ των <head> </head>. Ο HTML κώδικας θα μπεί μεταξύ <body> </body> Τέλος τέλος μπαίνει πάντα το </html>(και αρχή αρχή το <html>).

Οι πρώτες δυο γραμμές, πριν το <html> για σας μάλλον δε χρειάζονται. Όσοι όμως φτιάχνουν ιστοσελίδα, οι πρώτες δυο ή παρόμοιες απαιτούνται.


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

Σημείωση: Ο συγκεκριμένος τρόπος εισαγωγής CSS styles λέγεται Embedded. Υπάρχει και το Inline αλλά και το Εξωτερικό style sheet(βλέπε ήδη CSS styles). Έχουμε στο blog κάνει μια εισαγωγή για το CSS.
update: Όμως, έχουμε το εξής πρόβλημα. Αν ένα στοιχείο του μενού είναι αναδυόμενο, και περάσουμε το ποντικι πάνω απο αυτο, θα αναδυθεί αλλά θα...σπρώξει στιγμιαία το άρθρο σας προς τα κάτω και θα επαν΄'ελθει. Πράγμα όχι ιδιαίτερα επαγγελματικό. Αυτό γίνεται διότι μενου και άρθρο είναι στο ίδιο επίπεδο το διδιαστατο μιας σελίδας x,y. Ε λοιπόν υπάρχει στο CSS και τρίτη διάσταση ας πούμε από οθόνη προς το κεφάλι σας. Θα πρέπει να χρησιμοποιηθεί το λεγόμενο z-index property.


Σωστή εφαρμογή CSS σε αναδυόμενο μενού με z-index
Σωστή εφαρμογή CSS σε αναδυόμενο μενού με z-index

Παράδειγμα εφαρμογής CSS menu σε Blogger blog
Παράδειγμα εφαρμογής CSS menu σε Blogger blog







Licensed under a Creative Commons Attribution Non Commercial Licence