Μενού ακορντεόν: 4 βήματα

2024 Συγγραφέας: John Day | [email protected]. Τελευταία τροποποίηση: 2024-01-30 08:34

Δημιουργήστε ένα μενού ακορντεόν πολλαπλών επιπέδων χρησιμοποιώντας μόνο HTML και CSS.

Ενώ χρησιμοποιώ ένα Raspberry Pi για τα έργα μου, αυτό μπορεί να τρέξει σε οποιονδήποτε διακομιστή ιστού.

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

Ένα μενού ακορντεόν μπορεί να χρησιμοποιηθεί ως διεπαφή σε μια συσκευή Raspberry Pi μέσω υπολογιστή, pad ή κινητού τηλεφώνου. Ενώ χρησιμοποιώ ένα Raspberry Pi που εκτελεί lighttpd, μπορεί να χρησιμοποιηθεί οποιοδήποτε υλικό και διακομιστής ιστού.

Κάθε έργο Raspberry Pi πρέπει να έχει μια διεπαφή. Λόγω του σχετικά μικρού μεγέθους της οθόνης του, τα κινητά τηλέφωνα είναι τα πιο περιοριστικά. Ένα μενού ακορντεόν ξεπερνά τα όρια ενός τηλεφώνου με την επέκταση (+) και τη σύμπτυξη (-) κατακόρυφα επιτρέποντας όσα στοιχεία μενού απαιτούνται.

Υπάρχουν πολλά παραδείγματα μενού ακορντεόν στον ιστό. Επειδή μου αρέσει η εμφάνιση και η αίσθηση του OpenHAB ή του OpenSprinkler, ήθελα κάτι παρόμοιο.

Μέχρι τώρα, τα μενού του έργου μου Raspberry Pi ήταν πολύ απλά. Δεν αφιέρωσα πολύ χρόνο στην εμφάνιση και αίσθηση. Οι περισσότερες από τις διεπαφές μου γράφτηκαν μόνο σε HTML και δεν χρησιμοποιούσαν CSS. Δεν είμαι σχεδιαστής διεπαφής χρήστη και η εργασία στην εμφάνιση και την αίσθηση είναι έξω από τη ζώνη άνεσής μου. Επειδή δεν εργάζομαι σε ιστότοπους πολύ συχνά, έχω μάθει και ξεχάσω το CSS πολλές φορές. Wantedθελα να κάνω το μενού εμφάνιση και αίσθηση μια φορά, να το κάνω σωστά και μετά να το ξαναχρησιμοποιήσω.

Στις εφαρμογές μου, χρειάζομαι το μενού για υποστήριξη:

• συνδέσμους προς άλλους ιστότοπους ή συσκευές,
• εμφανίζουν τιμές ή κατάσταση και
• επιτρέπουν ενημερώσεις τιμών.

Τα δύο τελευταία απαιτούν περισσότερα από HTML και CSS.

Δεδομένου ότι δεν γνωρίζω εκ των προτέρων, πόσα στοιχεία μενού θα χρειαστώ, ένα μενού ακορντεόν επιτρέπει την ευελιξία να επεκτείνουμε το μενού όπως απαιτείται.

Τα σχόλιά μου στο CSS και στο HTML μπορεί να είναι λίγο πιο πάνω, αλλά μπορώ να κοιτάξω τα σχόλια και να ξέρω πώς να αλλάξω το μενού για να καλύψω τις ανάγκες μου χωρίς να ξαναμάθω CSS. Τα σχόλια με διευκολύνουν επίσης να καταλάβω πώς το CSS επηρεάζει το HTML χωρίς να γυρίζει μπρος-πίσω μεταξύ των δύο.

Είχα μερικές άλλες απαιτήσεις:

• Μερικές φορές το σπίτι μου χάνει πρόσβαση στο Διαδίκτυο. Επομένως, δεν μπορώ να εξαρτώ το σύστημα μενού από συνδέσμους προς εξωτερικούς ιστότοπους, οι οποίοι περιλαμβάνουν εξωτερικές γραμματοσειρές, API ή javascript
• Η οικογένειά μου έχει εκλεκτικές προτιμήσεις στον υπολογιστή και χρησιμοποιεί iPhone, android, MAC, PC και iPad, tablet, καθώς και, chrome, firefox, safari και IE. Το μενού πρέπει να λειτουργεί σε όλα αυτά

Πέρασα μερικές εβδομάδες δοκιμάζοντας διάφορες εφαρμογές μενού ακορντεόν. Επεξεργασία τους, προσαρμογή τους και εγκατάλειψη από αυτά. Ο ιστότοπος, CSS Scripts, έχει ένα μενού πολλαπλών επιπέδων που πληρούσε όλες τις απαιτήσεις μου και αποτελεί τη βάση αυτού του εκπαιδευτικού.

Βήμα 1: Εγκατάσταση βήμα προς βήμα

Ανοίξτε το παράθυρο τερματικού σε MacBook ή υπολογιστή και εκτελέστε τις ακόλουθες εντολές:

Αντικαταστήστε στοιχεία στα ♣'s με πραγματικές τιμές.

Συνδεθείτε στο Raspberry Pi

$ ssh pi@♣ raspberry-pi-ip-address

Αλλαγή στον κύριο κατάλογο

$ cd /var /www

Κάντε λήψη του index.html και αλλάξτε τα δικαιώματα και τον κάτοχο του αρχείου

$ sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/index.html"

$ sudo chmod 774 index.html $ sudo chown pi index.html

Δημιουργήστε έναν κατάλογο για εικόνες και μεταβείτε σε αυτόν τον κατάλογο

$ mkdir img

$ cd img

Κατεβάστε τις εικόνες και αλλάξτε τον κάτοχο.

$ sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/tv.png"

$ sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/menu-icon.png" $ sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/ raspberry-pi-p.webp

Δημιουργήστε αντίγραφα ασφαλείας στον κύριο κατάλογο και δημιουργήστε τον κατάλογο css και μεταβείτε σε αυτόν

cd $..

$ mkdir css $ cd css

Κατεβάστε το φύλλο στυλ και αλλάξτε τα δικαιώματα και τον κάτοχο του αρχείου

$ sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/style.css"

$ sudo chmod 744 style.css $ sudo chown pi style.css

Εάν δεν έχετε raspberry pi, τότε μπορείτε να κατεβάσετε αυτά τα αρχεία σε Mac ή PC. Για να εκτελέσετε το μενού είτε από Mac είτε από υπολογιστή

• διπλό κλικ στο index.html, ή
• επιλέξτε index.html, κάντε δεξί κλικ και ανοίξτε με το πρόγραμμα περιήγησης της επιλογής σας.

Εάν χρησιμοποιείτε Raspberry Pi, πρέπει να εκτελεί διακομιστή ιστού. Ανοίξτε ένα πρόγραμμα περιήγησης στον υπολογιστή ή το Mac σας και στο παράθυρο URL εισαγάγετε:

♣ raspberry-pi-ip-address ♣/index.html

Ο διακομιστής μου απαιτεί ασφαλή σύνδεση (κατάργηση κενών γύρω από το παχύ έντερο):

♣raspberry-pi-ip-address♣/index.html

Και λειτουργεί!

Βήμα 2: Παράρτημα: Παραπομπές

• Σενάριο CSS Μενού ακορντεόν πολλαπλών επιπέδων που χρησιμοποιεί μόνο HTML και CSS
• Μενού ακορντεόν W3Schools
• WSSchools CSS
• W3Schools HTML

Βήμα 3: Προσάρτημα: Ενημερώσεις

Βήμα 4: Προσάρτημα: Αντιμετώπιση προβλημάτων

Ακολουθούν μερικές ιδέες που μπορεί να βοηθήσουν:

• Για να μορφοποιήσετε HTML σε δηλώσεις php echo, προσθέστε "\ r" στο τέλος για να εισαγάγετε έναν χαρακτήρα επιστροφής
• Το αναγνωριστικό ομάδας για ένα υπομενού πρέπει να είναι μοναδικό. Εάν το αναγνωριστικό ομάδας ενός υπομενού δεν είναι μοναδικό, τα στοιχεία του υπομενού του θα συμπεριληφθούν στην πρώτη περίπτωση του αναγνωριστικού ομάδας