Akkordeon Menyu: 4 addım

2024 Müəllif: John Day | [email protected]. Son dəyişdirildi: 2024-01-30 07:45

Yalnız HTML və CSS istifadə edərək çox səviyyəli bir akkordeon menyusu yaradın.

Layihələrim üçün bir Raspberry Pi istifadə edərkən, bu hər hansı bir veb serverdə işləyə bilər.

Müəyyən bir veb elementinin necə yaradılacağına dair nümunələr vermək əvəzinə, layihələrimdə istifadə olunan hər bir elementin iş nümunələrini özündə birləşdirən bir şablon əldə etməkdir. İşləyən bir şeyi dəyişdirmək, sonra işə salmağa çalışmaq daha asandır.

Bir akkordeon menyusu bir kompüter, pad və ya cib telefonu vasitəsilə bir Raspberry Pi cihazına bir interfeys olaraq istifadə edilə bilər. Lighttpd işləyən bir Raspberry Pi istifadə edərkən, hər hansı bir hardware və veb server istifadə edilə bilər.

Hər bir Raspberry Pi layihəsinin bir interfeysi olmalıdır. Nisbətən kiçik ekran ölçüsünə görə mobil telefonlar ən çox məhdudlaşdırıcıdır. Bir akkordeon menyusu, lazım olduğu qədər çox menyuya icazə verərək şaquli olaraq genişləndirməklə (+) və çökməklə (-) bir telefonun sərhədlərini alır.

İnternetdə bir çox akkordeon menyusu nümunəsi var. OpenHAB və ya OpenSprinkler-in görünüşünü xoşladığım üçün oxşar bir şey istədim.

İndiyə qədər Raspberry Pi layihəsinin menyuları çox sadə idi. Görünüşə çox vaxt sərf etmədim. İnterfeyslərimin çoxu yalnız HTML -də yazılıb və heç bir CSS -dən istifadə olunmayıb. Mən UI dizayneri deyiləm və görünüş və hiss üzərində işləmək rahatlıq zonamın xaricindədir. Veb saytlarda çox çalışmadığım üçün CSS -ni dəfələrlə öyrənmişəm və unutmuşam. Menyu bir dəfə baxmaq və hiss etmək, düzəltmək və sonra yenidən istifadə etmək istədim.

Tətbiqlərimdə dəstəkləmək üçün menyuya ehtiyacım var:

• digər veb saytlara və ya cihazlara bağlantılar,
• dəyərləri və ya vəziyyəti göstərin və
• dəyərləri yeniləməyə icazə verin.

Son ikisi HTML və CSS -dən çox tələb edir.

Nə qədər menyuya ehtiyacım olacağını əvvəlcədən bilmədiyim üçün, bir akkordeon menyusu elastikliyi lazım olduğu kimi genişləndirməyə imkan verir.

CSS və HTML-də yazdığım şərhlər bir qədər üstələyə bilər, amma şərhlərə baxa bilərəm və CSS-i yenidən öyrənmədən ehtiyaclarımı ödəmək üçün menyunu necə dəyişəcəyimi bilirəm. Şərhlər, CSS-in ikisini bir-birinə çevirmədən HTML-yə necə təsir etdiyini anlamağı asanlaşdırır.

Başqa bir neçə tələbim var idi:

• Bəzən evim internetə girir. Beləliklə, menyu sisteminin xarici yazı tipləri, API və ya javascript daxil olmaqla xarici veb saytlara bağlantılardan asılı ola bilmərəm
• Ailəmin eklektik kompüter zövqləri var və iPhone, android, MAC, PC və iPad, tablet, həmçinin xrom, firefox, safari və IE istifadə edir. Menyu bütün bunların üzərində işləməlidir

Bir neçə həftə ərzində müxtəlif akkordeon menyu tətbiqlərini sınadım. Onları redaktə etmək, uyğunlaşdırmaq və onlardan imtina etmək. Veb sayt, CSS Skriptləri, bütün tələblərimə cavab verən və bu təlimatın əsasını təşkil edən çox səviyyəli bir menyuya malikdir.

Addım 1: Addım-addım Quraşdırma

MacBook və ya PC -də terminal pəncərəsini açın və aşağıdakı əmrləri yerinə yetirin:

İn -dəki elementləri həqiqi dəyərlərlə əvəz edin.

Raspberry Pi -yə daxil olun

$ ssh pi@♣ moruq-pi-ip-ünvan ♣

Əsas qovluğa keçin

$ cd /var /www

İndex.html yükləyin və faylın icazələrini və sahibini dəyişdirin

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

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

Şəkillər üçün bir kataloq yaradın və həmin qovluğa keçin

$ mkdir img

$ cd img

Şəkilləri yükləyin və sahibini dəyişdirin.

$ 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/ moruq-pi-p.webp

Əsas qovluğa qayıdın və css qovluğunu yaradın və ona keçin

$ cd..

$ mkdir css $ cd css

Stil cədvəlini yükləyin və faylın icazələrini və sahibini dəyişdirin

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

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

Moruq pi yoxdursa, bu faylları Mac və ya PC -yə yükləyə bilərsiniz. Menyu Mac və ya PC -dən işə salmaq üçün

• index.html və ya üzərinə iki dəfə vurun
• index.html seçin, sağ klikləyin və seçdiyiniz brauzerlə açın.

Bir Raspberry Pi istifadə edirsinizsə, bir veb serveri işləməlidir. PC və ya Mac -da bir brauzer açın və URL pəncərəsinə daxil edin:

♣ moruq-pi-ip-ünvan ♣/index.html

Serverim etibarlı bir əlaqə tələb edir (iki nöqtənin ətrafındakı boşluqları çıxarın):

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

Və işləyir!

Addım 2: Əlavə: İstinadlar

• CSS skript Yalnız HTML və CSS istifadə edərək çox səviyyəli akkordeon menyusu
• W3Schools akkordeon menyusu
• W3Schools CSS
• W3Schools HTML

Addım 3: Əlavə: Yeniləmələr

Addım 4: Əlavə: Problemlərin aradan qaldırılması

İşdə kömək edə biləcək bəzi fikirlər:

• HTML -ni php echo ifadələrində formatlaşdırmaq üçün sonuna "\ r" əlavə edərək qaytarma xarakteri qoyun
• Alt menyu üçün qrup kimliyi unikal olmalıdır. Bir alt menyunun qrup identifikatoru unikal deyilsə, alt menyu elementləri qrup idinin birinci instansiyasına daxil ediləcək.