აკორდეონის მენიუ: 4 ნაბიჯი

2024 ავტორი: John Day | [email protected]. ბოლოს შეცვლილი: 2024-01-30 10:17

შექმენით მრავალ დონის აკორდეონის მენიუ მხოლოდ HTML და CSS გამოყენებით.

მიუხედავად იმისა, რომ მე ვიყენებ Raspberry Pi– ს ჩემი პროექტებისთვის, ის შეიძლება მუშაობდეს ნებისმიერ ვებ სერვერზე.

იმის ნაცვლად, რომ მოვიყვანო მაგალითები, თუ როგორ უნდა შევქმნა კონკრეტული ვებ ელემენტი, მიზანი არის გვქონდეს შაბლონი, რომელიც მოიცავს ჩემს პროექტებში გამოყენებული თითოეული ელემენტის მუშა მაგალითებს. უფრო ადვილია რაღაცის შეცვლა, რაც მუშაობს, შემდეგ კი მისი ამოქმედების მცდელობა.

აკორდეონის მენიუ შეიძლება გამოყენებულ იქნას როგორც ინტერფეისი Raspberry Pi მოწყობილობისთვის კომპიუტერის, ბალიშის ან მობილური ტელეფონის საშუალებით. მიუხედავად იმისა, რომ მე ვიყენებ Raspberry Pi- ს, რომელიც მუშაობს lighttpd– ით, ნებისმიერი აპარატურის და ვებ სერვერის გამოყენება შეიძლება.

ყველა Raspberry Pi პროექტს უნდა ჰქონდეს ინტერფეისი. შედარებით მცირე ზომის ეკრანის გამო, მობილური ტელეფონები ყველაზე შეზღუდულია. აკორდეონის მენიუ ტელეფონის საზღვრებს იკავებს გაფართოების (+) და ჩამონგრევის (-) ვერტიკალურად დაშვებით რაც შეიძლება მეტი მენიუს ელემენტი.

აკორდეონის მენიუს მრავალი მაგალითია ინტერნეტში. რადგან მომწონს OpenHAB– ის ან OpenSprinkler– ის გარეგნობა და შეგრძნება, მეც მინდოდა მსგავსი რამ.

აქამდე, ჩემი Raspberry Pi პროექტის მენიუ ძალიან მარტივი იყო. დიდ დროს არ ვუთმობდი გარეგნობას. ჩემი ინტერფეისების უმეტესობა დაიწერა მხოლოდ HTML- ში და არ იყენებდა CSS- ს. მე არ ვარ ინტერფეისის დიზაინერი და გარეგნობაზე მუშაობა ჩემი კომფორტის ზონის მიღმაა. იმის გამო, რომ მე ხშირად არ ვმუშაობ ვებსაიტებზე, მე არაერთხელ ვისწავლე და დავივიწყე CSS. მინდოდა ერთხელ მენიუს შეხედულება და შეგრძნება გამეკეთებინა, სწორად გამეგო და შემდეგ გამომეყენებინა.

ჩემს აპლიკაციებში, მენიუ მჭირდება მხარდასაჭერად:

• ბმულები სხვა ვებსაიტებზე ან მოწყობილობებზე,
• ღირებულებების ან სტატუსის ჩვენება და
• ღირებულებების განახლების დაშვება.

ბოლო ორი უფრო მეტს მოითხოვს, ვიდრე HTML და CSS.

ვინაიდან წინასწარ არ ვიცი, რამდენი მენიუს ელემენტი დამჭირდება, აკორდეონის მენიუ იძლევა მოქნილობას, რომ საჭიროებისამებრ გააფართოვოს მენიუ.

ჩემი კომენტარები CSS და HTML შეიძლება იყოს ცოტათი ზემოთ, მაგრამ შემიძლია შევხედო კომენტარებს და ვიცოდე როგორ შევცვალო მენიუ ჩემი საჭიროებების დასაკმაყოფილებლად CSS– ის ხელახალი სწავლის გარეშე. კომენტარები ასევე გამიადვილებს იმის გაგებას, თუ როგორ ახდენს CSS გავლენას HTML- ზე ამ ორს შორის წინ და უკან გადაბრუნების გარეშე.

მე მქონდა რამდენიმე სხვა მოთხოვნა:

• ზოგჯერ ჩემი სახლი კარგავს ინტერნეტს. ამრიგად, მე არ შემიძლია მენიუს სისტემა დამოკიდებული იყოს გარე ვებსაიტების ბმულებზე, რომელიც მოიცავს გარე შრიფტებს, API- ებს ან javascript- ს
• ჩემს ოჯახს აქვს ეკლექტიკური კომპიუტერის გემოვნება და იყენებს iPhone- ს, Android- ს, MAC- ებს, კომპიუტერებსა და iPad- ებს, ტაბლეტებს, ასევე ქრომს, firefox- ს, safari- ს და IE- ს. მენიუ უნდა მუშაობდეს ამ ყველაფერზე

რამდენიმე კვირა ვცდილობდი აკორდეონის მენიუს სხვადასხვა დანერგვას. მათი რედაქტირება, ადაპტირება და მათზე უარის თქმა. ვებსაიტს, CSS Scripts, აქვს მრავალ დონის მენიუ, რომელიც აკმაყოფილებს ჩემს ყველა მოთხოვნას და ქმნის ამ ინსტრუქციის საფუძველს.

ნაბიჯი 1: ნაბიჯ-ნაბიჯ ინსტალაცია

გახსენით ტერმინალის ფანჯარა MacBook ან კომპიუტერზე და გაუშვით შემდეგი ბრძანებები:

ჩაანაცვლეთ ელემენტები ♣ -ის რეალურ მნიშვნელობებთან.

შედით 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/ 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

თუ თქვენ არ გაქვთ ჟოლოს პი, შეგიძლიათ გადმოწეროთ ეს ფაილები Mac ან PC– ზე. ასევე გაუშვით მენიუ Mac- დან ან PC- დან

• ორჯერ დააწკაპუნეთ index.html, ან
• აირჩიეთ index.html, დააწკაპუნეთ მარჯვენა ღილაკით და გახსენით თქვენთვის სასურველი ბრაუზერი.

თუ იყენებთ Raspberry Pi– ს, ის უნდა მუშაობდეს ვებ სერვერზე. გახსენით ბრაუზერი თქვენს კომპიუტერში ან Mac- ში და URL ფანჯარაში შეიყვანეთ:

♣ ჟოლო-პი-IP მისამართი ♣/index.html

ჩემი სერვერი მოითხოვს უსაფრთხო კავშირს (ამოიღეთ სივრცეები მსხვილი ნაწლავის გარშემო):

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

და მუშაობს!

ნაბიჯი 2: დანართი: წყაროები

• CSS სკრიპტი მრავალ დონის აკორდეონის მენიუ მხოლოდ HTML და CSS გამოყენებით
• W3Schools აკორდეონის მენიუ
• W3Schools CSS
• W3Schools HTML

ნაბიჯი 3: დანართი: განახლებები

ნაბიჯი 4: დანართი: პრობლემების მოგვარება

აქ მოცემულია რამდენიმე იდეა, რომელიც შეიძლება დაგეხმაროთ:

• PHP- ის php ექოს განცხადებებში დასამყარებლად დაამატეთ "\ r" ბოლოს, რომ ჩასვათ დაბრუნების სიმბოლო
• ქვე-მენიუს ჯგუფის ID უნდა იყოს უნიკალური. თუ ქვემენიუს ჯგუფის ID არ არის უნიკალური, მაშინ მისი ქვემენიუს ელემენტები შევა ჯგუფის პირადობის პირველ ინსტანციაში