Menu Akordion: 4 Langkah

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:08

Buat menu akordion pelbagai peringkat hanya menggunakan HTML dan CSS.

Walaupun saya menggunakan Raspberry Pi untuk projek saya, ini dapat dijalankan di mana-mana pelayan web.

Daripada memberikan contoh bagaimana membuat elemen web tertentu, tujuannya adalah untuk mempunyai templat yang merangkumi contoh kerja setiap elemen yang digunakan dalam projek saya. Lebih mudah untuk mengubah sesuatu yang berfungsi, kemudian berusaha untuk membuatnya berfungsi.

Menu akordion dapat digunakan sebagai antara muka ke peranti Raspberry Pi melalui komputer, pad atau telefon bimbit. Semasa saya menggunakan Raspberry Pi yang menjalankan lighttpd, sebarang perkakasan dan pelayan web dapat digunakan.

Setiap projek Raspberry Pi harus mempunyai antara muka. Kerana saiz paparannya yang agak kecil, telefon bimbit adalah yang paling ketat. Menu akordion berada di sekitar had telefon dengan mengembang (+) dan runtuh (-) secara menegak sehingga membolehkan sebilangan item menu diperlukan.

Terdapat banyak contoh menu akordeon di web. Kerana saya suka penampilan dan nuansa OpenHAB atau OpenSprinkler, saya mahukan sesuatu yang serupa.

Sehingga kini, menu projek Raspberry Pi saya sangat mudah. Saya tidak menghabiskan banyak masa untuk melihat-lihat. Sebilangan besar antara muka saya ditulis hanya dalam HTML dan tidak menggunakan CSS. Saya bukan pereka UI dan bekerja pada penampilan dan nuansa berada di luar zon selesa saya. Oleh kerana saya tidak kerap menggunakan laman web, saya telah belajar dan melupakan CSS beberapa kali. Saya mahu membuat menu melihat-dan-merasakan sekali, memperbaikinya, dan kemudian menggunakannya semula.

Dalam aplikasi saya, saya memerlukan menu untuk menyokong:

• pautan ke laman web atau peranti lain,
• memaparkan nilai atau status dan
• membenarkan kemas kini ke nilai.

Dua yang terakhir memerlukan lebih daripada HTML dan CSS.

Oleh kerana saya tidak tahu terlebih dahulu, berapa banyak item menu yang saya perlukan, menu akordeon membolehkan fleksibiliti untuk mengembangkan menu seperti yang diperlukan.

Komen saya dalam CSS dan HTML mungkin sedikit teratas, tetapi saya dapat melihat komen dan mengetahui cara mengubah menu untuk memenuhi keperluan saya tanpa belajar semula CSS. Komen itu juga memudahkan saya untuk memahami bagaimana CSS mempengaruhi HTML tanpa membolak-balik antara keduanya.

Saya mempunyai beberapa syarat lain:

• Kadang kala rumah saya kehilangan akses internet. Oleh itu, sistem menu tidak bergantung pada pautan ke laman web luaran, yang merangkumi fon luaran, API atau javascript
• Keluarga saya mempunyai selera komputer eklektik dan menggunakan iPhone, android, MAC, PC dan iPad, tablet, juga, chrome, firefox, safari dan IE. Menu perlu dijalankan pada semua ini

Saya menghabiskan beberapa minggu untuk mencuba pelbagai pelaksanaan menu akordeon. Menyuntingnya, menyesuaikannya dan menyerah pada mereka. Laman web, Skrip CSS, mempunyai menu pelbagai peringkat yang memenuhi semua kehendak saya dan menjadi asas petunjuk ini.

Langkah 1: Langkah demi Langkah Pasang

Buka tetingkap terminal pada MacBook atau PC dan jalankan arahan berikut:

Gantikan item dalam with dengan nilai sebenar.

Log masuk ke Raspberry Pi

$ ssh pi @ ♣ alamat-raspberry-pi-ip ♣

Tukar ke direktori utama

$ cd / var / www

Muat turun index.html, dan ubah kebenaran dan pemilik fail

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

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

Buat direktori untuk gambar dan pindah ke direktori itu

$ mkdir img

$ cd img

Muat turun gambar dan ubah pemiliknya.

$ 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

Sandarkan ke direktori utama, dan buat direktori css dan pindahkan ke dalamnya

$ cd..

$ mkdir css $ cd css

Muat turun helaian gaya, dan ubah kebenaran dan pemilik fail

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

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

Sekiranya anda tidak mempunyai pi raspberry, anda boleh memuat turun fail ini ke Mac atau PC. Untuk menjalankan menu dari Mac atau PC, sama ada

• klik dua kali pada index.html, atau
• pilih index.html, klik kanan, dan buka dengan penyemak imbas pilihan anda.

Sekiranya menggunakan Raspberry Pi, mestilah menjalankan pelayan web. Buka penyemak imbas di PC atau Mac anda, dan di tetingkap URL masukkan:

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

Pelayan saya memerlukan sambungan yang selamat (keluarkan ruang di sekitar titik dua):

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

Dan ia berjaya!

Langkah 2: Lampiran: Rujukan

• Skrip CSS Menu akordeon bertingkat menggunakan HTML dan CSS sahaja
• Menu akordion W3Schools
• W3Schools CSS
• W3Sekolah HTML

Langkah 3: Lampiran: Kemas kini

Langkah 4: Lampiran: Penyelesaian masalah

Berikut adalah beberapa idea yang boleh membantu:

• Untuk memformat HTML dalam pernyataan gema php, tambahkan "\ r" di akhir untuk memasukkan watak kembali
• Id kumpulan untuk sub-menu mestilah unik. Sekiranya kumpulan-id sub-menu tidak unik, maka item sub-menu akan dimasukkan dalam contoh pertama kumpulan-id