Το μενού χρησιμοποιείται για τη διευκόλυνση της πλοήγησης των χρηστών στις ενότητες του ιστότοπου. Για να προσελκύσει την προσοχή του επισκέπτη, το μενού πρέπει να είναι λειτουργικό, εύκολο στη χρήση και ταυτόχρονα να συνδυάζεται με το σχεδιασμό ολόκληρου του πόρου.
Οδηγίες
Βήμα 1
Πριν δημιουργήσετε ένα μενού, αποφασίστε για τον τύπο του. Μπορείτε να δημιουργήσετε ένα αναπτυσσόμενο οριζόντιο ή κατακόρυφο πλαίσιο που θα εμφανίζεται στον χρήστη όταν ο χρήστης αιωρείται πάνω του με το δρομέα του ποντικιού. Κατά την επιλογή ενός συγκεκριμένου μενού, μπορείτε να καθοδηγηθείτε από το πόσο βολικό θα είναι για τους επισκέπτες να το χρησιμοποιούν και πώς θα συνδυαστεί με το σχεδιασμό.
Βήμα 2
Αφού επιλέξετε έναν τύπο μενού, ανοίξτε το αρχείο σελίδας σας χρησιμοποιώντας όποιο πρόγραμμα επεξεργασίας κειμένου χρησιμοποιείτε για την επεξεργασία HTML. Μεταβείτε στην επιθυμητή ενότητα του κώδικα όπου θέλετε να εισαγάγετε το στοιχείο διεπαφής.
Βήμα 3
Μετά από αυτό, κάντε μια λίστα επιλογών δημιουργώντας ένα μπλοκ και κάνοντας μια αριθμημένη λίστα με αντιστοιχισμένο αναγνωριστικό. Για παράδειγμα:
- Σύνδεσμος 1
- Σύνδεσμος 2
- Σύνδεσμος 3
Σε αυτό το παράδειγμα, δημιούργησα μια κουκκίδα λίστα τριών στοιχείων και την τοποθέτησα σε ένα στρώμα div με το αναγνωριστικό πίνακα ID.
Βήμα 4
Μεταβείτε στο μπλοκ ενοτήτων της σελίδας σας και δημιουργήστε το κατάλληλο μενού φύλλων στυλ. Εάν θέλετε να δημιουργήσετε ένα οριζόντιο μενού, μπορείτε να συμπεριλάβετε το ενσωματωμένο χαρακτηριστικό για τη λίστα που προκύπτει:
#panel ul li {display: inline; }
Βήμα 5
Για να δημιουργήσετε μια οριζόντια γραμμή σε όλο το μήκος της σελίδας, μπορείτε να χρησιμοποιήσετε τον ακόλουθο κώδικα:
#panel ul {margin-left: 0; επένδυση: 2px 0; }
Βήμα 6
Στη συνέχεια, μπορείτε να κάνετε την οπτική διαίρεση σε ορθογώνια:
#panel ul li a {margin-left: 3px; περίγραμμα: 1px; επένδυση: 2px 3px; φόντο: μπλε; }
Αυτός ο κώδικας ορίζει εσοχές κειμένου από στοιχεία περιγράμματος μέσω των χαρακτηριστικών περιθωρίου-αριστερού και γεμίσματος και επίσης ορίζει χρώμα φόντου για καθένα από τα στοιχεία λίστας. Σε αυτό το παράδειγμα, το χρώμα είναι μπλε, αλλά μπορείτε να το αλλάξετε κατά την κρίση σας.
Βήμα 7
Για να δείξετε το στοιχείο στην τρέχουσα σελίδα που έχει επιλεγεί στην καρτέλα, ορίστε τις κατάλληλες παραμέτρους στην ανοιχτή κλάση:
#menu ul li a # open {φόντο: κόκκινο; περίγραμμα-κάτω: 1px; }
Η τρέχουσα σελίδα που έχει επιλεγεί στον πίνακα θα εμφανίζεται τώρα με κόκκινο χρώμα.
Βήμα 8
Αποθηκεύστε τις αλλαγές στο αρχείο και ελέγξτε τη λειτουργικότητα του γραπτού κώδικα ανοίγοντας τη σελίδα σας μέσω ενός προγράμματος περιήγησης. Για να ορίσετε πρόσθετες επιλογές εμφάνισης, μπορείτε πάντα να προσθέσετε CSS ή HTML για να βελτιώσετε την εμφάνιση του αντικειμένου.
