Από τα πιο βασικά αντικείμενα σε μια ιστοσελίδα είναι παραδοσιακά το μενού. Αυτό βοηθά παραδοσιακά τον επισκέπτη στην πλοήγηση μέσα στην ιστοσελίδα μας, με σκοπό να βρει εύκολα αυτό που ζητάει. Εκτός από τον σχεδιασμό και την τοποθέτηση ενός μενού, καλό είναι να λάβουμε υπόψη μας και την δομή του (σε ποιες κατηγορίες θα βασίζεται, αν θα έχει υπομενού, με ποια σειρά θα εμφανίζονται κ.α.), προκειμένου να είναι όσο το δυνατόν πιο κατανοητό και πιο εύχρηστο.
Υπάρχουν 2 βασικοί τύποι μενού όσον αφορά την διάταξη του και αυτοί είναι το οριζόντιο και το κάθετο. Το οριζόντιο συνηθίζεται να τοποθετείται στην κορυφή της ιστοσελίδας, ενώ το κάθετο πλευρικά, αριστερά ή δεξιά της ιστοσελίδας. Ένα μενού μπορεί να τοποθετηθεί γενικότερα οπουδήποτε στην ιστοσελίδα μας, σε όποιο "position" επιθυμούμε εμείς.
Συνδεόμαστε στο περιβάλλον διαχείρισης του Joomla και από την οριζόντια μπάρα στην κορυφή επιλέγουμε menus - menu manager όπως βλέπετε και στην φωτογραφία. Στη συνέχεια πατάμε στο πράσινο κουμπί "new" για να προσθέσουμε ένα καινούριο μενού.
Στη σελίδα που θα μας ανοίξει, δίνουμε το όνομα στο μενού μας και τον τύπο και αν επιθυμούμε και μια περιγραφή προαιρετικά. Το όνομα και ο τύπος του μενού καθορίζεται αποκλειστικά από εμάς και καλό θα ήταν να δώσουμε κάποιες χαρακτηριστικές λέξεις που θα περιγράφουν με σαφήνεια τι ακριβώς περιλαμβάνει το συγκεκριμένο μενού. Για τις ανάγκες αυτού του tutorial, δημιούργησα ένα μενού με την ονομασία "Κεντρικό Μενού" και συμπλήρωσα ανάλογα και τα υπόλοιπα πεδία. Πατάμε "save" και προχωράμε στο επόμενο βήμα.
Στη συνέχεια πρέπει να δημιουργήσουμε κάποια "items" τα οποία θα εμφανίζονται στο μενού μας και θα οδηγούν τους επισκέπτες στα αντίστοιχα υποσέλιδα της ιστοσελίδας μας. Αυτά μπορεί να είναι οτιδήποτε, από φόρμες επικοινωνίας, κατηγορίες άρθρων, μεμονωμένα άρθρα, ένα κουμπί επιστροφής στην κεντρική σελίδα του site κ.α. Εφόσον δημιούργησα ένα "Κεντρικό Μενού" θα βάλω ένα κουμπί που θα οδηγεί τον επισκέπτη στην κεντρική σελίδα του site και θα προσθέσω ακόμα ένα με την φόρμα επικοινωνίας που είχα φτιάξει σε παλαιότερο tutorial. Στο κάθε "item" που προσθέτουμε στο μενού μας, μπορούμε να προσθέσουμε κι άλλα σαν υποκατηγορίες (υπομενού δηλαδή), έτσι οι επιλογές μας είναι απεριόριστες. Ας προσθέσω όμως το πρώτο item που θα επιστρέφει τον επισκέπτη στην κεντρική σελίδα του site. Για να το πετύχω αυτό, πηγαίνω στο menu manager, επιλέγω το Κεντρικό Μενού και στην σελίδα που μου ανοίγει επιλέγω "New". Στη νέα σελίδα που μου ανοίγει, όπως βλέπετε και στην φωτό πιο κάτω, έδωσα σαν τίτλο του "item" "Κεντρική" και σαν Menu Item Type "Featured Articles" (αυτός είναι ένας default τύπος item, που εμφανίζει όλα τα άρθρα που έχουμε ρυθμίσει να εμφανίζονται στην κεντρική σελίδα του site). Όπως βλέπετε στην φωτογραφία, υπάρχει πληθώρα άλλων ρυθμίσεων για το item που δημιουργήσαμε, προς το παρόν όμως και για το παράδειγμα μας δεν είναι απαραίτητες, οπότε περνάμε στο βήμα 3.
Το επόμενο item που θα προσθέσω είναι η φόρμα επικοινωνίας όπως έγραψα και ενώ βρίσκομαι στη σελίδα του κεντρικού μενού, πατάω πάλι την επιλογή new. Στο υποσέλιδο που μου ανοίγει, δίνω σαν "Menu Title" Φόρμα Επικοινωνίας και σαν Menu Item Type επιλέγω Contacts - Single Contact. Στη συνέχεια επιλέγω την "επαφή" που έχω δημιουργήσει (αναλυτικά για τις φόρμες επικοινωνίας και την δημιουργία τους μπορείτε να δείτε πατώντας ΕΔΩ) και πατάω save.
Τέλος, θέτουμε το menu item με τον τίτλο "Κεντρική" ως default, όπως μπορείτε να δείτε και στην παρακάτω φωτογραφία, για να λειτουργεί ως κουμπί επιστροφής στην κεντρική σελίδα του site.
Δημιουργήσαμε λοιπόν ένα μενού με 2 items αλλά ακόμα δεν εμφανίζεται στην ιστοσελίδα μας. Για να το επιτύχουμε αυτό, πρέπει να μεταφερθούμε στο section των extensions και το module magager. Από την οριζόντια μπάρα στην κορυφή του περιβάλλοντος διαχείρισης επιλέγουμε extensions - module manager και στη νέα σελίδα που μας ανοίγει πατάμε το πράσινο κουμπί με τον τίτλο "New". Στο παράθυρο που μας ανοίγεται στην οθόνη και ζητάει να επιλέξουμε τον τύπο του module που θέλουμε να προσθέσουμε, βρίσκουμε και πατάμε πάνω στην επιλογή "menu". Αφού πατήσουμε μας ανοίγει μια νέα σελίδα και δίνουμε έναν τίτλο στο Module πχ "Κεντρικό Μενού", επιλέγουμε το Menu που θα αφορά το Module μας (το κεντρικό μενού στην προκειμένη περίπτωση όπως βλέπετε στην φωτογραφία) και επιλέγουμε και σε ποιο "position" θα εμφανίζεται. Για τις ανάγκες του παραδείγματος, χρησιμοποιώ το template "protostar" που εγκαθίσταται αυτόματα μαζί με το Joomla 3.x. και σαν position επέλεξα την θέση "right" του συγκεκριμένου Template.
Έτσι όπως φαίνεται και στην φωτογραφία, ένα καινούριο μενού εμφανίστηκε στην ιστοσελίδα μου, στην δεξιά στήλη της.
Για να δημιουργήσουμε ένα οριζόντιο μενού, η διαδικασία είναι ακριβώς η ίδια αλλά χρειάζονται 2 επιπλέον ρυθμίσεις. Αυτές γίνονται μέσα στο module που δημιουργήσαμε στο module manager. Η πρώτη ρύθμιση αφορά το "position" που θα εμφανίζεται το μενού μας και προφανώς θα πρέπει να βρούμε κάποια οριζόντια θέση στην ιστοσελίδα μας. Όλα τα templates έχουν πάντα μία οριζόντια θέση τουλάχιστον, η οποία ονομάζεται συνήθως "navigation" ή "nav" ή κάτι παρεμφερές. Στο template protostar που χρησιμοποιώ, το συγκεκριμένο position ονομάζεται navigation και το επιλέγω. Στη συνέχεια, θα πρέπει να ανοίξουμε την καρτέλα με το όνομα "advanced" και στο πεδίο "Menu Class Suffix" να γράψουμε, αφήνοντας πρώτα ένα κενό, το πρόθεμα "nav-pills". Είναι σημαντικό να αφήσουμε πρώτα ένα κενό, διαφορετικά το μενού μας δεν θα δουλέψει σωστά. Πατάμε λοιπόν Save και αυτό ήταν, το μενού μας έγινε οριζόντιο.
Υπάρχουν 2 βασικοί τύποι μενού όσον αφορά την διάταξη του και αυτοί είναι το οριζόντιο και το κάθετο. Το οριζόντιο συνηθίζεται να τοποθετείται στην κορυφή της ιστοσελίδας, ενώ το κάθετο πλευρικά, αριστερά ή δεξιά της ιστοσελίδας. Ένα μενού μπορεί να τοποθετηθεί γενικότερα οπουδήποτε στην ιστοσελίδα μας, σε όποιο "position" επιθυμούμε εμείς.
Α. Δημιουργία Κάθετου Μενού
Βήμα 1:
Συνδεόμαστε στο περιβάλλον διαχείρισης του Joomla και από την οριζόντια μπάρα στην κορυφή επιλέγουμε menus - menu manager όπως βλέπετε και στην φωτογραφία. Στη συνέχεια πατάμε στο πράσινο κουμπί "new" για να προσθέσουμε ένα καινούριο μενού.
Στη σελίδα που θα μας ανοίξει, δίνουμε το όνομα στο μενού μας και τον τύπο και αν επιθυμούμε και μια περιγραφή προαιρετικά. Το όνομα και ο τύπος του μενού καθορίζεται αποκλειστικά από εμάς και καλό θα ήταν να δώσουμε κάποιες χαρακτηριστικές λέξεις που θα περιγράφουν με σαφήνεια τι ακριβώς περιλαμβάνει το συγκεκριμένο μενού. Για τις ανάγκες αυτού του tutorial, δημιούργησα ένα μενού με την ονομασία "Κεντρικό Μενού" και συμπλήρωσα ανάλογα και τα υπόλοιπα πεδία. Πατάμε "save" και προχωράμε στο επόμενο βήμα.
Βήμα 2:
Στη συνέχεια πρέπει να δημιουργήσουμε κάποια "items" τα οποία θα εμφανίζονται στο μενού μας και θα οδηγούν τους επισκέπτες στα αντίστοιχα υποσέλιδα της ιστοσελίδας μας. Αυτά μπορεί να είναι οτιδήποτε, από φόρμες επικοινωνίας, κατηγορίες άρθρων, μεμονωμένα άρθρα, ένα κουμπί επιστροφής στην κεντρική σελίδα του site κ.α. Εφόσον δημιούργησα ένα "Κεντρικό Μενού" θα βάλω ένα κουμπί που θα οδηγεί τον επισκέπτη στην κεντρική σελίδα του site και θα προσθέσω ακόμα ένα με την φόρμα επικοινωνίας που είχα φτιάξει σε παλαιότερο tutorial. Στο κάθε "item" που προσθέτουμε στο μενού μας, μπορούμε να προσθέσουμε κι άλλα σαν υποκατηγορίες (υπομενού δηλαδή), έτσι οι επιλογές μας είναι απεριόριστες. Ας προσθέσω όμως το πρώτο item που θα επιστρέφει τον επισκέπτη στην κεντρική σελίδα του site. Για να το πετύχω αυτό, πηγαίνω στο menu manager, επιλέγω το Κεντρικό Μενού και στην σελίδα που μου ανοίγει επιλέγω "New". Στη νέα σελίδα που μου ανοίγει, όπως βλέπετε και στην φωτό πιο κάτω, έδωσα σαν τίτλο του "item" "Κεντρική" και σαν Menu Item Type "Featured Articles" (αυτός είναι ένας default τύπος item, που εμφανίζει όλα τα άρθρα που έχουμε ρυθμίσει να εμφανίζονται στην κεντρική σελίδα του site). Όπως βλέπετε στην φωτογραφία, υπάρχει πληθώρα άλλων ρυθμίσεων για το item που δημιουργήσαμε, προς το παρόν όμως και για το παράδειγμα μας δεν είναι απαραίτητες, οπότε περνάμε στο βήμα 3.
Βήμα 3:
Το επόμενο item που θα προσθέσω είναι η φόρμα επικοινωνίας όπως έγραψα και ενώ βρίσκομαι στη σελίδα του κεντρικού μενού, πατάω πάλι την επιλογή new. Στο υποσέλιδο που μου ανοίγει, δίνω σαν "Menu Title" Φόρμα Επικοινωνίας και σαν Menu Item Type επιλέγω Contacts - Single Contact. Στη συνέχεια επιλέγω την "επαφή" που έχω δημιουργήσει (αναλυτικά για τις φόρμες επικοινωνίας και την δημιουργία τους μπορείτε να δείτε πατώντας ΕΔΩ) και πατάω save.
Τέλος, θέτουμε το menu item με τον τίτλο "Κεντρική" ως default, όπως μπορείτε να δείτε και στην παρακάτω φωτογραφία, για να λειτουργεί ως κουμπί επιστροφής στην κεντρική σελίδα του site.
Βήμα 4:
Δημιουργήσαμε λοιπόν ένα μενού με 2 items αλλά ακόμα δεν εμφανίζεται στην ιστοσελίδα μας. Για να το επιτύχουμε αυτό, πρέπει να μεταφερθούμε στο section των extensions και το module magager. Από την οριζόντια μπάρα στην κορυφή του περιβάλλοντος διαχείρισης επιλέγουμε extensions - module manager και στη νέα σελίδα που μας ανοίγει πατάμε το πράσινο κουμπί με τον τίτλο "New". Στο παράθυρο που μας ανοίγεται στην οθόνη και ζητάει να επιλέξουμε τον τύπο του module που θέλουμε να προσθέσουμε, βρίσκουμε και πατάμε πάνω στην επιλογή "menu". Αφού πατήσουμε μας ανοίγει μια νέα σελίδα και δίνουμε έναν τίτλο στο Module πχ "Κεντρικό Μενού", επιλέγουμε το Menu που θα αφορά το Module μας (το κεντρικό μενού στην προκειμένη περίπτωση όπως βλέπετε στην φωτογραφία) και επιλέγουμε και σε ποιο "position" θα εμφανίζεται. Για τις ανάγκες του παραδείγματος, χρησιμοποιώ το template "protostar" που εγκαθίσταται αυτόματα μαζί με το Joomla 3.x. και σαν position επέλεξα την θέση "right" του συγκεκριμένου Template.
Έτσι όπως φαίνεται και στην φωτογραφία, ένα καινούριο μενού εμφανίστηκε στην ιστοσελίδα μου, στην δεξιά στήλη της.
B. Δημιουργία οριζόντιου μενού
Για να δημιουργήσουμε ένα οριζόντιο μενού, η διαδικασία είναι ακριβώς η ίδια αλλά χρειάζονται 2 επιπλέον ρυθμίσεις. Αυτές γίνονται μέσα στο module που δημιουργήσαμε στο module manager. Η πρώτη ρύθμιση αφορά το "position" που θα εμφανίζεται το μενού μας και προφανώς θα πρέπει να βρούμε κάποια οριζόντια θέση στην ιστοσελίδα μας. Όλα τα templates έχουν πάντα μία οριζόντια θέση τουλάχιστον, η οποία ονομάζεται συνήθως "navigation" ή "nav" ή κάτι παρεμφερές. Στο template protostar που χρησιμοποιώ, το συγκεκριμένο position ονομάζεται navigation και το επιλέγω. Στη συνέχεια, θα πρέπει να ανοίξουμε την καρτέλα με το όνομα "advanced" και στο πεδίο "Menu Class Suffix" να γράψουμε, αφήνοντας πρώτα ένα κενό, το πρόθεμα "nav-pills". Είναι σημαντικό να αφήσουμε πρώτα ένα κενό, διαφορετικά το μενού μας δεν θα δουλέψει σωστά. Πατάμε λοιπόν Save και αυτό ήταν, το μενού μας έγινε οριζόντιο.
Δεν υπάρχουν σχόλια:
Δημοσίευση σχολίου