Δευτέρα, 8 Απριλίου 2013

Μπάρα πλοήγησης με υπομενού (1. Εισαγωγικά)

Κοινοποιήστε Share to Facebook Share to Twitter Email This
Α. Εισαγωγικά

Επιτέλους επιστρέφω για τον τρίτο και τελευταίο τρόπο, με το οποίο μπορούμε να φτιάξουμε μπάρα/μενού πλοήγησης στο blog μας, χρησιμοποιώντας κώδικα HTML και CSS.
Αν θέλετε να δείτε περισσότερους (και πιο εύκολους) τρόπους και συμβουλές, επισκεφθείτε τις προηγούμενες σχετικές αναρτήσεις:
1ο μέρος: Προετοιμασία (απαραίτητη για όλους τους τρόπους)
2ο: μέρος: α' τρόπος (Ετικέτες)
3ο μέρος: β' τρόπος (Σελίδες)
Extra: Εμφάνιση (για τους τρόπους α' και β')



ΥΠΕΡ 
  1. Μπορούμε να έχουμε υπομενού, δηλαδή, όταν περνάμε το δείκτη μας από μία καρτέλα (κουμπί) της μπάρας, εμφανίζεται μια κάθετη λίστα με υποκατηγορίες γι' αυτή την καρτέλα.
ΚΑΤΑ
  1. Απαιτεί τη χρήση κώδικα και μάλιστα σε μεγάλο βαθμό. Επίσης, δε θα χρησιμοποιήσουμε τον κώδικα μόνο μία φορά και ξεμπερδέψαμε! Κάθε φορά που θα προσθέτουμε ή θα μετονομάζουμε μια ετικέτα στο blog μας, θα πρέπει να επιστρέφουμε στον κώδικα και να τον επεξεργαζόμαστε.
  2. Είναι αρκετά δύσκολος τρόπος και δεν τον προτείνω, αν δεν έχετε γνώσεις html και css. 
  3. Πρέπει να τον προσαρμόσουμε στο δικό μας blog. Δηλαδή, αν σας δώσω ακριβώς το δικό μου κώδικα, μπορεί να φαίνεται εντελώς διαφορετικά στο δικό σας blog, και να δημιουργήσει ένα μικρό "χάος".
  4. Μπορεί να δημιουργήσει προβλήματα στην εμφάνιση του blog μας, αν δεν ξέρουμε πώς να τον επεξεργαστούμε για να τον προσαρμόσουμε.
  5. Είναι αρκετά χρονοβόρος.
Αν κατανοήσατε τις δυνατότητες, αλλά και τις μεγάλες δυσκολίες αυτού του τρόπου, και έχετε εμπιστοσύνη στον εαυτό σας, τολμήστε το.

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

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

Έστω λοιπόν, ότι έχω τις εξής ετικέτες, μετά το ξεκαθάρισμα που έκανα.
συνταγές, γλυκά, φαγητά, πλέξιμο, διασημότητες

Θέλω, φυσικά, να έχουν την εξής δομή:
πλέξιμο
διασημότητες
συνταγές
        φαγητά
        γλυκά

Δηλαδή, τα φαγητά και τα γλυκά να είναι οι υποκατηγορίες των συνταγών.

Τι θα κάνω:
Θα προσθέσω δύο κομμάτια κώδικα στο blog μου.
Το ένα αφορά τη λειτουργικότητα της μπάρας (HTML) και το άλλο την εμφάνισή της (CSS).

Προσοχή: Αν παραλείψω εντελώς το κομμάτι της εμφάνισης (CSS), η μπάρα μου θα φαίνεται κάπως έτσι:


Όταν θα ολοκληρώσω τη διαδικασία, η μπάρα μου θα φαίνεται κάπως έτσι.


Αν είστε έτοιμοι, προχωρήστε στην επόμενη ανάρτηση, για το λειτουργικό κομμάτι της μπάρας.
Καλή επιτυχία!

2 σχόλια:

  1. Καλώς σε βρήκα!Κι ευτυχώς που σε βρήκα, γιατί έμαθα πως γίνονται οι μπάρες.Αυτή με τα υπομενού είναι πολύπλοκη και τη φοβάμαι, γι΄ αυτό έκανα την απλή.
    Αυτό το βελάκι όμως κάτω δεξιά που σε παραπέμπει στην κεφαλίδα δεν ξέρω πως γίνεται!Έχω πολλά να μάθω ακόμα..!
    Καλό σου απόγευμα!:-)

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Νίκο, καλώς ήρθες!
      Δες τη σχετική ανάρτησή μου για το βελάκι!
      http://horiseirmo.blogspot.gr/2013/04/scroll-to-top-arrow.html
      Καλό απόγευμα!

      Διαγραφή