Akkordeon menyusi: 4 qadam
Akkordeon menyusi: 4 qadam

Mundarija:

Anonim
Akkordeon menyusi
Akkordeon menyusi

Faqat HTML va CSS yordamida ko'p darajali akkordeon menyusini yarating.

Men o'z loyihalarim uchun Raspberry Pi dan foydalansam ham, bu har qanday veb -serverda ishlashi mumkin.

Muayyan veb -elementni yaratish bo'yicha misollar keltirishning o'rniga, mening loyihalarimda ishlatiladigan har bir elementning ishchi misollarini o'z ichiga olgan shablonga ega bo'lish maqsad qilib qo'yilgan. Ishlayotgan narsani o'zgartirish, keyin uni ishga tushirishga harakat qilish osonroq.

Akkordeon menyusi kompyuter, pad yoki mobil telefon orqali Raspberry Pi qurilmasiga interfeys sifatida ishlatilishi mumkin. Lighttpd ishlaydigan Raspberry Pi dan foydalansam, har qanday apparat va veb -serverdan foydalanish mumkin.

Har bir Raspberry Pi loyihasi interfeysga ega bo'lishi kerak. Nisbatan kichik displey o'lchamlari tufayli mobil telefonlar eng cheklovli hisoblanadi. Akkordeon menyusi vertikal ravishda vertikal ravishda (+) kengaytirilishi va qulashi (-) orqali telefon chegaralari atrofida bo'ladi.

Internetda akkordeon menyusiga ko'plab misollar mavjud. Menga OpenHAB yoki OpenSprinkler tashqi ko'rinishi yoqadi, shunga o'xshash narsani xohlardim.

Hozirgacha Raspberry Pi loyihasining menyusi juda oddiy edi. Men tashqi ko'rinishga ko'p vaqt sarflamadim. Mening ko'p interfeyslarim faqat HTMLda yozilgan va CSS ishlatilmagan. Men foydalanuvchi interfeysi dizayneri emasman va tashqi ko'rinish bilan ishlash men uchun qulay zonadan tashqarida. Men tez -tez veb -saytlarda ishlamasligim sababli, CSS -ni bir necha bor o'rganganman va unutganman. Men menyuni bir marta ko'rinadigan va to'g'ri bajarishni, keyin to'g'ri ishlatishni va keyin qayta ishlatishni xohlardim.

Mening ilovalarimda menyu qo'llab -quvvatlashi kerak:

  • boshqa veb -saytlar yoki qurilmalarga havolalar,
  • qiymatlar yoki holatni ko'rsatish va
  • qiymatlarni yangilashga ruxsat bering.

Oxirgi ikkitasi HTML va CSS -dan ko'proq narsani talab qiladi.

Menga qancha menyu kerak bo'lishini oldindan bilmasligim uchun, akkordeon menyusi moslashuvchanlikni menyuni kerakli darajada kengaytirishga imkon beradi.

Mening CSS va HTML-dagi sharhlarim biroz yuqoriroq bo'lishi mumkin, lekin men sharhlarga qarashim va CSS-ni qaytadan o'rganmasdan o'z ehtiyojlarimni qondirish uchun menyuni qanday o'zgartirish kerakligini bilaman. Sharhlar, shuningdek, CSS HTML-ga qanday ta'sir qilishini tushunishga yordam beradi.

Menda boshqa talablar bor edi:

  • Ba'zida uyim Internetga kirishni yo'qotadi. Shunday qilib, menyu tizimi tashqi shriftlar, API yoki javascriptni o'z ichiga olgan tashqi veb -saytlarga havolalarga bog'liq bo'lishi mumkin emas
  • Mening oilam kompyuterning eklektik ta'miga ega va iPhone, android, MAC, PC va iPad, planshetlar, shuningdek, Chrome, Firefox, Safari va IE -dan foydalanadi. Menyu bularning barchasida ishlashi kerak

Men bir necha hafta davomida akkordeon menyusining turli xil dasturlarini sinab ko'rdim. Ularni tahrir qilish, moslashtirish va ulardan voz kechish. CSS skriptlari veb-saytida mening barcha talablarimga javob beradigan ko'p darajali menyu mavjud va bu ko'rsatma asosini tashkil qiladi.

1-qadam: bosqichma-bosqich o'rnatish

Bosqichma-bosqich o'rnatish
Bosqichma-bosqich o'rnatish

MacBook yoki kompyuterda terminal oynasini oching va quyidagi buyruqlarni bajaring:

In elementlarini haqiqiy qiymatlarga almashtiring.

Raspberry Pi -ga kiring

$ ssh pi@♣ malina-pi-ip-manzili ♣

Asosiy katalogga o'zgartirish

$ cd /var /www

Index.html -ni yuklab oling va faylning ruxsatini va egasini o'zgartiring

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

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

Rasmlar uchun katalog yarating va shu katalogga o'ting

$ mkdir img

$ CD img

Rasmlarni yuklab oling va egasini o'zgartiring.

$ 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/ malina-pi.png "$ sudo chown pi *.png

Asosiy katalogga zaxira qiling va CSS katalogini yarating va unga o'ting

$ CD..

$ mkdir css $ cd css

Uslublar jadvalini yuklab oling, faylning ruxsatini va egasini o'zgartiring

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

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

Agar sizda malina pi bo'lmasa, bu fayllarni Mac yoki kompyuterga yuklab olishingiz mumkin. Menyuni Mac yoki kompyuterdan ishlatish uchun

  • index.html yoki ni ikki marta bosing
  • index.html -ni tanlang, sichqonchaning o'ng tugmachasini bosing va siz tanlagan brauzer bilan oching.

Agar Raspberry Pi ishlatilsa, u veb -serverda ishlayotgan bo'lishi kerak. Kompyuter yoki Mac -da brauzerni oching va URL oynasida quyidagilarni kiriting:

♣ malina-pi-ip-manzili ♣/index.html

Mening serverim xavfsiz ulanishni talab qiladi (yo'g'on ichak atrofidagi bo'shliqlarni olib tashlang):

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

Va u ishlaydi!

2 -qadam: Ilova: Adabiyotlar

  • CSS skript ko'p darajali akkordeon menyusi faqat HTML va CSS yordamida
  • W3Schools akkordeon menyusi
  • W3Schools CSS
  • W3Schools HTML

3 -qadam: Qo'shimcha: yangilanishlar

4 -qadam: Ilova: Muammolarni bartaraf etish

Bu erda sizga yordam beradigan ba'zi fikrlar:

  • HTMLni php echo bayonotlarida formatlash uchun, qaytish belgisini qo'yish uchun oxiriga "\ r" qo'shing
  • Ichki menyu uchun guruh identifikatori yagona bo'lishi kerak. Agar pastki menyuning guruh identifikatori noyob bo'lmasa, uning pastki menyusi elementlari guruh identifikatorining birinchi misoliga kiritiladi.