תפריט אקורדיון: 4 שלבים

2024 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2024-01-30 09:14

צור תפריט אקורדיון רב רמות תוך שימוש ב- HTML ו- CSS בלבד.

בזמן שאני משתמש ב- Raspberry Pi לפרויקטים שלי, זה יכול לפעול בכל שרת אינטרנט.

במקום לספק דוגמאות כיצד ליצור אלמנט אינטרנט מסוים, המטרה היא לקבל תבנית הכוללת דוגמאות עבודה של כל אלמנט המשמש בפרויקטים שלי. קל יותר לשנות משהו שעובד, ואז לנסות לגרום לו לעבוד.

תפריט אקורדיון יכול לשמש ממשק למכשיר Raspberry Pi באמצעות מחשב, כרית או טלפון נייד. בזמן שאני משתמש ב- lightppd של Raspberry Pi, ניתן להשתמש בכל חומרה ושרת אינטרנט.

לכל פרויקט Raspberry Pi צריך להיות ממשק. בגלל גודל התצוגה הקטן יחסית, טלפונים ניידים הם המגבילים ביותר. תפריט אקורדיון עובר את גבולות הטלפון על ידי הרחבה (+) וקריסה (-) אנכית ומאפשר כמה שיותר תפריטים לפי הצורך.

ישנן דוגמאות רבות לתפריטי אקורדיון ברשת. מכיוון שאני אוהב את המראה והתחושה של OpenHAB או OpenSprinkler, רציתי משהו דומה.

עד כה, התפריטים של פרויקט Raspberry Pi שלי היו פשוטים מאוד. לא השקעתי הרבה זמן במראה והתחושה. רוב הממשקים שלי נכתבו ב- HTML בלבד ולא השתמשו בהם CSS. אני לא מעצב ממשק משתמש ועובד על מראה ותחושה נמצא מחוץ לאזור הנוחות שלי. מכיוון שאני לא עובד באתרים לעתים קרובות במיוחד, למדתי ושכחתי CSS מספר פעמים. רציתי לעשות את התפריט במראה ותחושה פעם אחת, לעשות את זה כמו שצריך ואז לעשות בו שימוש חוזר.

ביישומים שלי, אני צריך את התפריט כדי לתמוך:

• קישורים לאתרים או מכשירים אחרים,
• להציג ערכים או סטטוס ו
• לאפשר עדכונים לערכים.

שני האחרונים דורשים יותר מ- HTML ו- CSS.

מכיוון שאני לא יודע מראש, כמה פריטי תפריט אצטרך, תפריט אקורדיון מאפשר את הגמישות להרחיב את התפריט כנדרש.

ההערות שלי ב- CSS ו- HTML עשויות להיות קצת מוגזמות, אבל אני יכול להסתכל על ההערות ולדעת לשנות את התפריט כך שיענה על הצרכים שלי מבלי ללמוד מחדש CSS. ההערות גם מקלות עלי להבין כיצד CSS משפיע על ה- HTML מבלי לדפדף הלוך ושוב בין השניים.

היו לי עוד כמה דרישות:

• לפעמים הבית שלי מאבד את הגישה לאינטרנט. לכן, מערכת התפריטים לא יכולה להיות תלויה בקישורים לאתרים חיצוניים, הכוללים גופנים חיצוניים, ממשקי API או javascript
• למשפחתי יש טעמי מחשב אקלקיים ומשתמשים באייפון, אנדרואיד, מחשבי MAC, מחשבי אייפד, טאבלטים, כמו גם כרום, פיירפוקס, ספארי ו- IE. התפריט צריך לפעול על כל אלה

ביליתי כמה שבועות בניסיונות יישומים שונים של תפריט אקורדיון. עורכים אותם, מתאימים אותם ומוותרים עליהם. באתר, CSS Scripts, יש תפריט רב רמות שעונה על כל הדרישות שלי ומהווה את הבסיס להנחיה זו.

שלב 1: התקנה שלב אחר שלב

פתח את חלון הטרמינל ב- MacBook או PC והפעל את הפקודות הבאות:

החלף פריטים ב- with בערכים בפועל.

התחבר ל- Raspberry Pi

$ ssh pi@♣ פטל-פי-כתובת ip ♣

עבור לספרייה הראשית

$ 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/ פטל-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

אם אין לך פאי פטל, תוכל להוריד קבצים אלה ל- Mac או PC. להפעלת התפריט גם מ- Mac או PC

• לחץ פעמיים על index.html או
• בחר index.html, לחץ לחיצה ימנית ופתח באמצעות הדפדפן שבחרת.

אם אתה משתמש ב- Raspberry Pi, הוא חייב להפעיל שרת אינטרנט. פתח דפדפן במחשב האישי או ב- Mac, ובחלון כתובת האתר הזן:

♣ פטל- pi-ip-address ♣/index.html

השרת שלי דורש חיבור מאובטח (הסר רווחים סביב המעי הגס):

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

וזה עובד!

שלב 2: נספח: הפניות

• תסריט CSS תפריט אקורדיון רב -שכבתי באמצעות HTML ו- CSS בלבד
• תפריט אקורדיון של W3Schools
• W3Scools CSS
• W3Schools HTML

שלב 3: נספח: עדכונים

שלב 4: נספח: פתרון בעיות

להלן כמה רעיונות שעשויים לעזור:

• כדי לעצב HTML בהצהרות הד של php, הוסף בסוף "\ r" כדי להכניס תו החזרה
• מזהה הקבוצה לתפריט משנה חייב להיות ייחודי. אם מזהה הקבוצה של תפריט משנה אינו ייחודי אז פריטי תפריט המשנה שלו ייכללו במופע הראשון של מזהה הקבוצה.