Menu Akordeon: 4 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:55

Buat menu akordeon multi-level hanya menggunakan HTML dan CSS.

Meskipun saya menggunakan Raspberry Pi untuk proyek saya, ini dapat berjalan di server web mana pun.

Alih-alih memberikan contoh cara membuat elemen web tertentu, tujuannya adalah memiliki template yang menyertakan contoh kerja setiap elemen yang digunakan dalam proyek saya. Lebih mudah untuk memodifikasi sesuatu yang berfungsi, kemudian mencoba membuatnya berfungsi.

Menu akordeon dapat digunakan sebagai antarmuka ke perangkat Raspberry Pi melalui komputer, pad, atau ponsel. Sementara saya menggunakan Raspberry Pi yang menjalankan lighttpd, perangkat keras dan server web apa pun dapat digunakan.

Setiap proyek Raspberry Pi harus memiliki antarmuka. Karena ukuran layarnya yang relatif kecil, ponsel adalah yang paling membatasi. Menu akordeon mengatasi batas telepon dengan memperluas (+) dan menciutkan (-) secara vertikal memungkinkan item menu sebanyak yang diperlukan.

Ada banyak contoh menu akordeon di web. Karena saya menyukai tampilan dan nuansa OpenHAB atau OpenSprinkler, saya menginginkan sesuatu yang serupa.

Sampai sekarang, menu proyek Raspberry Pi saya sangat sederhana. Saya tidak menghabiskan banyak waktu untuk melihat-dan-merasa. Sebagian besar antarmuka saya hanya ditulis dalam HTML dan tidak menggunakan CSS. Saya bukan desainer UI dan mengerjakan tampilan dan nuansa berada di luar zona nyaman saya. Karena saya tidak terlalu sering bekerja di situs web, saya telah mempelajari dan melupakan CSS beberapa kali. Saya ingin melakukan tampilan dan nuansa menu sekali, melakukannya dengan benar, dan kemudian menggunakannya kembali.

Dalam aplikasi saya, saya memerlukan menu untuk mendukung:

• tautan ke situs web atau perangkat lain,
• menampilkan nilai atau status dan
• memungkinkan pembaruan nilai.

Dua yang terakhir membutuhkan lebih dari HTML dan CSS.

Karena saya tidak tahu sebelumnya, berapa banyak item menu yang saya perlukan, menu akordeon memungkinkan fleksibilitas untuk memperluas menu sesuai kebutuhan.

Komentar saya di CSS dan HTML mungkin sedikit berlebihan, tapi saya bisa melihat komentar dan tahu bagaimana mengubah menu untuk memenuhi kebutuhan saya tanpa mempelajari ulang CSS. Komentar juga memudahkan saya untuk memahami bagaimana CSS memengaruhi HTML tanpa harus bolak-balik di antara keduanya.

Saya memiliki beberapa persyaratan lain:

• Terkadang rumah saya kehilangan akses internet. Jadi, saya tidak dapat membuat sistem menu bergantung pada tautan ke situs web eksternal, yang mencakup font eksternal, API, atau javascript
• Keluarga saya memiliki selera komputer eklektik dan menggunakan iPhone, android, MAC, PC dan iPad, tablet, serta, chrome, firefox, safari, dan IE. Menu perlu dijalankan pada semua ini

Saya menghabiskan beberapa minggu mencoba berbagai implementasi menu akordeon. Mengeditnya, mengadaptasinya, dan melepaskannya. Situs web, Skrip CSS, memiliki menu multi-level yang memenuhi semua persyaratan saya dan menjadi dasar dari instruksi ini.

Langkah 1: Instal Langkah-demi-Langkah

Buka jendela terminal di MacBook atau PC dan jalankan perintah berikut:

Ganti item dalam dengan nilai sebenarnya.

Masuk ke Raspberry Pi

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

Ubah ke direktori utama

$cd /var/www

Unduh index.html, dan ubah izin dan pemilik file

$ 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

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

Cadangkan ke direktori utama, dan buat direktori css dan pindah ke dalamnya

$cd..

$ mkdir css $ cd css

Unduh lembar gaya, dan ubah izin dan pemilik file

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

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

Jika Anda tidak memiliki raspberry pi, Anda dapat mengunduh file-file ini ke Mac atau PC. Untuk menjalankan menu dari Mac atau PC,

• klik dua kali pada index.html, atau
• pilih index.html, klik kanan, dan buka dengan browser pilihan Anda.

Jika menggunakan Raspberry Pi, harus menjalankan web server. Buka browser di PC atau Mac Anda, dan di jendela URL masukkan:

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

Server saya memerlukan koneksi yang aman (hapus spasi di sekitar titik dua):

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

Dan itu berhasil!

Langkah 2: Lampiran: Referensi

• Skrip CSS Menu akordeon bertingkat hanya menggunakan HTML dan CSS
• Menu akordeon W3Schools
• CSS W3Schools
• HTML W3Schools

Langkah 3: Lampiran: Pembaruan

Langkah 4: Lampiran: Pemecahan Masalah

Berikut adalah beberapa ide yang mungkin bisa membantu:

• Untuk memformat HTML dalam pernyataan gema php, tambahkan "\r" di akhir untuk memasukkan karakter kembali
• ID grup untuk submenu harus unik. Jika id grup submenu tidak unik maka item submenunya akan dimasukkan dalam contoh pertama id grup