Περιεχόμενο

• Βήματα
• Συμβουλή
• Προειδοποίηση

Αυτό το wikiHow σάς διδάσκει πώς να δημιουργείτε αναπτυσσόμενα μενού στον ιστότοπό σας χρησιμοποιώντας κώδικα HTML και CSS. Ένα αναπτυσσόμενο μενού θα εμφανιστεί όταν ο επισκέπτης τοποθετεί το δείκτη του ποντικιού πάνω από το καθορισμένο κουμπί. Στη συνέχεια, μπορούν να κάνουν κλικ σε ένα από τα στοιχεία για να μεταβούν στον ιστότοπο αυτής της επιλογής.

Βήματα

1. 

   Ανοίξτε το πρόγραμμα επεξεργασίας κειμένου HTML. Μπορείτε να χρησιμοποιήσετε ένα απλό πρόγραμμα επεξεργασίας κειμένου (Σημειωματάριο, TextEdit) ή πιο προηγμένο (Σημειωματάριο ++).
   • Εάν αποφασίσετε να πάτε στο Σημειωματάριο ++, πρέπει να επιλέξετε HTML από το τμήμα "H" του μενού Γλώσσα (Γλώσσα) στο πάνω μέρος του παραθύρου πριν συνεχίσετε.

2. 

   
   
   Εισαγάγετε έναν τίτλο για το έγγραφο. Εδώ είναι ο κωδικός που καθορίζει τον τύπο του κώδικα που θα χρησιμοποιηθεί για το υπόλοιπο έγγραφο:

3. 

   Δημιουργία αναπτυσσόμενου μενού. Εισαγάγετε τον ακόλουθο κωδικό για να καθορίσετε το μέγεθος και το χρώμα του αναπτυσσόμενου μενού, θυμηθείτε να αντικαταστήσετε το "#" με την παράμετρο που θέλετε να χρησιμοποιήσετε (όσο μεγαλύτερος είναι ο αριθμός, τόσο μεγαλύτερο θα είναι το αναπτυσσόμενο μενού). Μπορούμε επίσης να αντικαταστήσουμε το χρώμα φόντου "φόντο-χρώμα" και το χρώμα "χρώμα" με οποιοδήποτε χρώμα (ή κώδικα χρώματος HTML) θέλετε:

4. 

   
   
   Καθορίστε ότι θέλετε να αντικαταστήσετε τους συνδέσμους στο αναπτυσσόμενο μενού. Δεδομένου ότι στη συνέχεια θα προσθέσετε συνδέσμους στο μενού, μπορείτε να τους αντικαταστήσετε στο αναπτυσσόμενο μενού εισάγοντας τον ακόλουθο κωδικό:

5. 

   Δημιουργεί την εμφάνιση του αναπτυσσόμενου μενού. Ο παρακάτω κώδικας καθορίζει το μέγεθος και το χρώμα του αναπτυσσόμενου μενού, συμπεριλαμβανομένης της θέσης όταν συνδυάζεται με άλλα στοιχεία στην ιστοσελίδα. Μην ξεχάσετε να αντικαταστήσετε το "#" στην ενότητα "πλάτος min" με τον αριθμό που θέλετε (π.χ. 250) και να αλλάξετε την κεφαλίδα "background-color" (χρώμα φόντου) σε συγκεκριμένο χρώμα ή κώδικα HTML:

6. 

   
   
   Προσθέστε λεπτομέρειες στα περιεχόμενα του αναπτυσσόμενου μενού. Ο παρακάτω κώδικας θα καθορίσει το χρώμα του κειμένου στο εσωτερικό και το μέγεθος του κουμπιού του αναπτυσσόμενου μενού. Μην ξεχάσετε να αντικαταστήσετε το "#" με τον αριθμό των pixel που καθορίζει το μέγεθος του κουμπιού μενού:

7. 

   Επεξεργάζεται τον τρόπο με τον οποίο ο δείκτης του ποντικιού αλλάζει όταν τοποθετείται στο αναπτυσσόμενο μενού. Όταν τοποθετείτε το δείκτη του ποντικιού πάνω από το κουμπί μενού, πρέπει να αλλάξετε ορισμένα χρώματα. Η γραμμή "background-color" θα αντικατοπτρίζει το χρώμα που άλλαξε όταν επιλέγετε κάτι στο αναπτυσσόμενο μενού, ενώ η δεύτερη γραμμή "background-color" είναι το χρώμα στο οποίο θα αλλάξει το κουμπί μενού. Στην ιδανική περίπτωση, και τα δύο αυτά χρώματα πρέπει να είναι ελαφρύτερα από ό, τι όταν δεν ήταν επιλεγμένα:

8. 

   Κλείστε την ενότητα CSS. Εισαγάγετε τον ακόλουθο κωδικό για να καθορίσετε ότι τελειώσατε με το τμήμα CSS του εγγράφου:

9. 

   Δημιουργήστε ένα όνομα για το κουμπί μενού. Εισαγάγετε τον ακόλουθο κωδικό, αλλά θυμηθείτε να αντικαταστήσετε το "Όνομα" με το όνομα του κουμπιού αναπτυσσόμενου μενού (για παράδειγμα: Μενού):

10. 

    Προσθέστε συνδέσμους στο μενού. Κάθε στοιχείο στο αναπτυσσόμενο μενού θα συνδέεται με κάτι, είτε πρόκειται για σελίδα στον τρέχοντα ιστότοπο είτε για εξωτερικό ιστότοπο. Προσθέστε την επιλογή σας στο αναπτυσσόμενο μενού εισάγοντας τον ακόλουθο κωδικό, από τον οποίο πρέπει να αντικαταστήσετε https://www.website.com με τη διεύθυνση συνδέσμου (κρατήστε τις παρενθέσεις) και αντικαταστήστε το "Όνομα" με το όνομα συνδέσμου.

11. 

    Κλείσιμο εγγράφου. Εισαγάγετε τις ακόλουθες ετικέτες για να κλείσετε το έγγραφο και καθορίστε το τέλος κώδικα του αναπτυσσόμενου μενού:

12. 

    Ο κώδικας κριτικής καθορίζει το αναπτυσσόμενο μενού. Το απόσπασμα θα μοιάζει με αυτό: Διαφημίσεις

Συμβουλή

• Ελέγχετε πάντοτε τον κώδικα πριν δημοσιεύσετε στον ιστότοπο.
• Οι παραπάνω οδηγίες αφορούν αναπτυσσόμενα μενού που θα λειτουργούν όταν τοποθετείτε το δείκτη του ποντικιού πάνω από το κουμπί μενού. Εάν θέλετε να δημιουργήσετε ένα αναπτυσσόμενο μενού που κάνει κλικ μόνο όταν κάνετε κλικ, τότε χρειάζεστε JavaScript.

Προειδοποίηση

• Ο χρωματισμός HTML είναι αρκετά περιορισμένος όταν χρησιμοποιούμε ετικέτες όπως "μαύρο" ή "πράσινο". Μπορείτε να δείτε τη γεννήτρια κώδικα χρώματος HTML που επιτρέπει στους χρήστες να δημιουργούν και να χρησιμοποιούν προσαρμοσμένα χρώματα εδώ.