เมนูหีบเพลง: 4 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:04

สร้างเมนูหีบเพลงหลายระดับโดยใช้ HTML และ CSS เท่านั้น

ในขณะที่ฉันใช้ Raspberry Pi สำหรับโครงการของฉัน สิ่งนี้สามารถทำงานบนเว็บเซิร์ฟเวอร์ใดก็ได้

แทนที่จะให้ตัวอย่างวิธีสร้างองค์ประกอบเว็บโดยเฉพาะ เป้าหมายคือการมีเทมเพลตที่มีตัวอย่างการทำงานของแต่ละองค์ประกอบที่ใช้ในโครงการของฉัน การปรับเปลี่ยนบางอย่างที่ใช้ได้ผลง่ายกว่านั้น จากนั้นจึงพยายามทำให้มันใช้งานได้

เมนูหีบเพลงสามารถใช้เป็นส่วนต่อประสานกับอุปกรณ์ Raspberry Pi ผ่านคอมพิวเตอร์ แพด หรือโทรศัพท์มือถือ ในขณะที่ฉันใช้ Raspberry Pi ที่รัน lighttpd คุณสามารถใช้ฮาร์ดแวร์และเว็บเซิร์ฟเวอร์ใดก็ได้

ทุกโครงการ Raspberry Pi ควรมีอินเทอร์เฟซ เนื่องจากขนาดจอแสดงผลที่ค่อนข้างเล็ก โทรศัพท์มือถือจึงเป็นอุปกรณ์ที่มีข้อจำกัดมากที่สุด เมนูหีบเพลงได้รับรอบขีดจำกัดของโทรศัพท์โดยการขยาย (+) และยุบ (-) ในแนวตั้งเพื่อให้รายการเมนูได้มากเท่าที่ต้องการ

มีตัวอย่างมากมายของเมนูหีบเพลงบนเว็บ เนื่องจากฉันชอบรูปลักษณ์ของ OpenHAB หรือ OpenSprinkler ฉันจึงต้องการสิ่งที่คล้ายกัน

จนถึงตอนนี้ เมนูของโปรเจ็กต์ Raspberry Pi ของฉันนั้นเรียบง่ายมาก ฉันไม่ได้ใช้เวลามากกับรูปลักษณ์ อินเทอร์เฟซส่วนใหญ่ของฉันเขียนด้วย HTML เท่านั้นและไม่ใช้ CSS ฉันไม่ใช่นักออกแบบ UI และการทำงานด้านรูปลักษณ์นั้นอยู่นอกเหนือขอบเขตความสบายของฉัน เนื่องจากฉันไม่ได้ทำงานบนเว็บไซต์บ่อยนัก ฉันจึงได้เรียนรู้และลืม CSS หลายครั้ง ฉันต้องการทำรูปลักษณ์ของเมนูเพียงครั้งเดียว ทำให้ถูกต้อง แล้วนำกลับมาใช้ใหม่

ในแอปพลิเคชันของฉัน ฉันต้องการเมนูเพื่อรองรับ:

• ลิงก์ไปยังเว็บไซต์หรืออุปกรณ์อื่น
• แสดงค่าหรือสถานะและ
• อนุญาตให้อัปเดตค่า

สองรายการสุดท้ายต้องการมากกว่า HTML และ CSS

เนื่องจากไม่ทราบล่วงหน้าว่าจะต้องใช้กี่รายการ เมนูหีบเพลงช่วยให้ขยายเมนูได้ตามต้องการ

ความคิดเห็นของฉันใน CSS และ HTML อาจสูงเกินไป แต่ฉันสามารถดูความคิดเห็นและรู้วิธีเปลี่ยนเมนูให้ตรงตามความต้องการโดยไม่ต้องเรียนรู้ CSS ใหม่ ความคิดเห็นยังทำให้ฉันเข้าใจว่า CSS ส่งผลต่อ HTML อย่างไรโดยไม่ต้องสลับไปมาระหว่างทั้งสอง

ฉันมีข้อกำหนดอื่นๆ อีกสองสามข้อ:

• บางครั้งบ้านของฉันขาดอินเทอร์เน็ต ดังนั้นฉันจึงไม่สามารถให้ระบบเมนูขึ้นอยู่กับลิงก์ไปยังเว็บไซต์ภายนอก ซึ่งรวมถึงแบบอักษรภายนอก, API หรือจาวาสคริปต์
• ครอบครัวของฉันมีรสนิยมทางคอมพิวเตอร์ที่หลากหลายและใช้ iPhone, Android, MAC, PC และ iPads, แท็บเล็ต ตลอดจน Chrome, Firefox, Safari และ IE เมนูนี้ต้องรันทั้งหมด

ฉันใช้เวลาสองสามสัปดาห์ในการทดลองใช้งานเมนูหีบเพลงต่างๆ แก้ไข ปรับเปลี่ยน และเลิกใช้ เว็บไซต์ CSS Scripts มีเมนูหลายระดับที่ตรงตามข้อกำหนดทั้งหมดของฉันและเป็นพื้นฐานของคำแนะนำนี้

ขั้นตอนที่ 1: ติดตั้งทีละขั้นตอน

เปิดหน้าต่างเทอร์มินัลบน MacBook หรือ PC และเรียกใช้คำสั่งต่อไปนี้:

แทนที่รายการใน ♣ ด้วยค่าจริง

เข้าสู่ระบบ 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.png" $ sudo chown pi *.png

สำรองข้อมูลไปยังไดเร็กทอรีหลัก และสร้างไดเร็กทอรี css แล้วย้ายเข้าไป

$ ซีดี..

$ 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 หรือ PC ก็ได้

• ดับเบิลคลิกที่ index.html หรือ
• เลือก index.html คลิกขวาแล้วเปิดด้วยเบราว์เซอร์ที่คุณเลือก

หากใช้ Raspberry Pi จะต้องใช้งานเว็บเซิร์ฟเวอร์ เปิดเบราว์เซอร์บนพีซีหรือ Mac ของคุณและในหน้าต่าง URL ให้ป้อน:

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

เซิร์ฟเวอร์ของฉันต้องการการเชื่อมต่อที่ปลอดภัย (ลบช่องว่างรอบโคลอน):

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

และมันก็ได้ผล!

ขั้นตอนที่ 2: ภาคผนวก: ข้อมูลอ้างอิง

• สคริปต์ CSS เมนูหีบเพลงหลายระดับโดยใช้ HTML และ CSS. เท่านั้น
• เมนูหีบเพลง W3Schools
• W3Schools CSS
• W3Schools HTML

ขั้นตอนที่ 3: ภาคผนวก: อัปเดต

ขั้นตอนที่ 4: ภาคผนวก: การแก้ไขปัญหา

ต่อไปนี้เป็นแนวคิดที่อาจช่วยได้:

• หากต้องการจัดรูปแบบ HTML ในคำสั่ง php echo ให้เพิ่ม "\r" ต่อท้ายเพื่อใส่อักขระส่งคืน
• รหัสกลุ่มสำหรับเมนูย่อยต้องไม่ซ้ำกัน หาก group-id ของเมนูย่อยไม่ซ้ำกัน รายการในเมนูย่อยจะรวมอยู่ในตัวอย่างแรกของ group-id