Πώς να φτιάξετε ένα κατακόρυφο αναπτυσσόμενο μενού

Πίνακας περιεχομένων:

Πώς να φτιάξετε ένα κατακόρυφο αναπτυσσόμενο μενού
Πώς να φτιάξετε ένα κατακόρυφο αναπτυσσόμενο μενού

Βίντεο: Πώς να φτιάξετε ένα κατακόρυφο αναπτυσσόμενο μενού

Βίντεο: Πώς να φτιάξετε ένα κατακόρυφο αναπτυσσόμενο μενού
Βίντεο: Μάθε να κάνεις Handstand. Κάνε Κατακόρυφο Τώρα. 2024, Νοέμβριος
Anonim

Το κατακόρυφο αναπτυσσόμενο μενού είναι πολύ βολικό - εξοικονομεί χώρο στην ιστοσελίδα, ενώ ταυτόχρονα βοηθά στην εύκολη πλοήγηση στον ιστότοπο. Προσπαθήστε να δημιουργήσετε ένα αναπτυσσόμενο μενού βάσει CSS - Cascading Style Sheets. Εάν δεν είστε ακόμη ειδικός στη δημιουργία κώδικα CSS, χρησιμοποιήστε την υπηρεσία purecssmenu.com. Πρέπει να επιλέξετε έναν τύπο μενού, να προσαρμόσετε την εμφάνισή του και, στη συνέχεια, να τον προσαρμόσετε στον δικό σας ιστότοπο. Η ίδια η υπηρεσία θα δημιουργήσει τον απαραίτητο κώδικα, τον οποίο στη συνέχεια θα εισαγάγετε στα αρχεία του ιστότοπού σας.

Πώς να φτιάξετε ένα κατακόρυφο αναπτυσσόμενο μενού
Πώς να φτιάξετε ένα κατακόρυφο αναπτυσσόμενο μενού

Οδηγίες

Βήμα 1

Εγγραφείτε στον ιστότοπο purecssmenu.com, διαφορετικά δεν θα μπορείτε να κατεβάσετε το δημιουργημένο μενού. Κάντε κλικ στο κουμπί Πρότυπα στην αριστερή πλευρά της σελίδας. Παρακάτω θα δείτε πολλά μικρά παράθυρα με πρότυπα αναπτυσσόμενου μενού, κάνοντας κλικ στο οποίο θα φορτωθεί μια προεπισκόπηση στα δεξιά στο παράθυρο Προεπισκόπηση. Επιλέξτε ένα πρότυπο που ταιριάζει στον ιστότοπό σας

Βήμα 2

Προσαρμόστε τη γραμματοσειρά και το χρώμα του μενού: χρησιμοποιήστε την καρτέλα Παράμετροι. Στο πεδίο Γραμματοσειρά, επιλέξτε μια γραμματοσειρά, μέγεθος γραμματοσειράς, εάν είναι απαραίτητο, υπογράμμιση και έντονη γραφή. Στο πεδίο "Χρώματα", ορίστε το φόντο του μενού, το χρώμα γραμματοσειράς και το δείκτη του ποντικιού και του χρώματος του φόντου

Βήμα 3

Ανοίξτε την καρτέλα Στοιχεία για να διαχειριστείτε τα στοιχεία του μενού. Εάν κάνετε κλικ στο κουμπί Εκκαθάριση κάδου ανακύκλωσης, τα δείγματα στοιχείων διαγράφονται και μπορείτε να δημιουργήσετε το δικό σας. Για να το κάνετε αυτό, πατήστε το κουμπί Προσθήκη στοιχείου συν - το στοιχείο θα προστεθεί στο τέλος του μενού. Το κουμπί Προσθήκη επόμενου στοιχείου χρησιμοποιείται για την προσθήκη ενός αντικειμένου μετά την τρέχουσα επιλεγμένη ώρα. Το κουμπί Add Subitem δημιουργεί ένα στοιχείο υπομενού για την επιλογή. Κατά συνέπεια, για να καταργήσετε ένα αντικείμενο, χρησιμοποιήστε το κουμπί Κατάργηση στοιχείου

Βήμα 4

Δώστε προσοχή στο πεδίο Παράμετροι αντικειμένων στο κάτω μέρος του ιστότοπου. Στη γραμμή κειμένου, καθορίστε το όνομα του στοιχείου μενού, στη γραμμή συνδέσμου - τη διεύθυνση URL της σελίδας στην οποία θα οδηγεί αυτό το στοιχείο. Στη γραμμή συμβουλών, μπορείτε να αφήσετε μια περιγραφή του στοιχείου, η οποία θα εμφανίζεται όταν τοποθετείτε το δείκτη του ποντικιού πάνω από το σύνδεσμο. Η γραμμή προορισμού χρησιμοποιείται για τον προσδιορισμό του τρόπου ανοίγματος της σελίδας στην οποία οδηγεί ο σύνδεσμος. Η παράμετρος _self σε αυτήν τη γραμμή ανοίγει τη σελίδα στο ίδιο παράθυρο του προγράμματος περιήγησης με την τρέχουσα

Βήμα 5

Αφού ολοκληρώσετε τη ρύθμιση του μενού, κατεβάστε το - κάντε κλικ στο κουμπί Λήψη κάτω δεξιά στη σελίδα (αυτή η λειτουργία είναι διαθέσιμη μετά την εγγραφή στον ιστότοπο). Επιλέξτε έναν φάκελο στον σκληρό σας δίσκο όπου θα αποθηκευτεί το αρχείο αρχειοθέτησης. Αποσυσκευάστε το. Θα χρειαστεί να αντιγράψετε τον απαιτούμενο κωδικό από το αρχείο purecssmenu.html στο αρχείο προτύπου CSS του ιστότοπού σας. Ανοίξτε το αρχείο purecssmenu.html με ένα πρόγραμμα επεξεργασίας κειμένου και αντιγράψτε τον κώδικα μεταξύ των ετικετών και στο πρότυπο CSS του ιστότοπού σας (αυτό το αρχείο έχει επέκταση.css και μοιάζει με το αρχείο.css). Τώρα επικολλήστε τον κώδικα στο αρχείο προτύπου ιστότοπου (θέματα) - τον κωδικό από το purecssmenu.html μεταξύ των σχολίων και αντί του κανονικού κώδικα μενού. Για να το κάνετε αυτό, πρέπει να είστε τουλάχιστον λίγο εξοικειωμένοι με τον προγραμματισμό. Βεβαιωθείτε ότι έχετε επικολλήσει τον κώδικα στο σωστό αρχείο και αποθηκεύστε.

Συνιστάται: