Akordeon Menüsü: 4 Adım

2024 Yazar: John Day | [email protected]. Son düzenleme: 2024-01-30 13:18

Yalnızca HTML ve CSS kullanarak çok düzeyli bir akordeon menüsü oluşturun.

Projelerim için bir Raspberry Pi kullanırken, bu herhangi bir web sunucusunda çalışabilir.

Belirli bir web öğesinin nasıl oluşturulacağına dair örnekler vermek yerine, projelerimde kullanılan her bir öğenin çalışan örneklerini içeren bir şablona sahip olmayı hedefliyorum. Çalışan bir şeyi değiştirmek, sonra onu çalıştırmaya çalışmak daha kolaydır.

Bir akordeon menüsü, bir bilgisayar, ped veya cep telefonu aracılığıyla bir Raspberry Pi cihazına arayüz olarak kullanılabilir. Lighttpd çalıştıran bir Raspberry Pi kullanırken, herhangi bir donanım ve web sunucusu kullanılabilir.

Her Raspberry Pi projesinin bir arayüzü olmalıdır. Nispeten küçük ekran boyutu nedeniyle, cep telefonları en kısıtlayıcı olanlardır. Bir akordeon menüsü, gerektiği kadar menü öğesine izin vererek dikey olarak genişleterek (+) ve daraltarak (-) telefonun sınırlarını aşıyor.

Web'de birçok akordeon menü örneği var. OpenHAB veya OpenSprinkler'ın görünüşünü ve verdiği hissi sevdiğim için benzer bir şey istedim.

Şimdiye kadar Raspberry Pi projemin menüleri çok basitti. Görünüm ve his için çok fazla zaman harcamadım. Arayüzlerimin çoğu yalnızca HTML ile yazılmıştı ve CSS kullanmıyordu. Ben bir UI tasarımcısı değilim ve görünüm ve his üzerinde çalışmak konfor alanımın dışında. Web sitelerinde çok sık çalışmadığım için CSS'yi defalarca öğrendim ve unuttum. Menüyü bir kez bakmak ve hissetmek, doğru yapmak ve sonra yeniden kullanmak istedim.

Uygulamalarımda aşağıdakileri desteklemek için menüye ihtiyacım var:

• diğer web sitelerine veya cihazlara bağlantılar,
• değerleri veya durumu göster ve
• değerlerin güncellenmesine izin verir.

Son ikisi, HTML ve CSS'den daha fazlasını gerektirir.

Ne kadar menüye ihtiyacım olacağını önceden bilmediğim için bir akordeon menü, menüyü gerektiği gibi genişletme esnekliği sağlıyor.

CSS ve HTML'deki yorumlarım biraz abartılı olabilir, ancak yorumlara bakabilir ve CSS'yi yeniden öğrenmeden ihtiyaçlarımı karşılamak için menüyü nasıl değiştireceğimi biliyorum. Yorumlar ayrıca CSS'nin HTML'yi nasıl etkilediğini, ikisi arasında ileri geri dönmeden anlamamı da kolaylaştırıyor.

Birkaç şartım daha vardı:

• Bazen evim internet erişimini kaybediyor. Bu nedenle, menü sisteminin harici yazı tipleri, API'ler veya javascript içeren harici web sitelerine bağlantılara bağlı olmasını sağlayamam.
• Ailemin eklektik bilgisayar zevkleri var ve iPhone, android, MAC'ler, PC ve iPad'ler, tabletlerin yanı sıra chrome, firefox, safari ve IE kullanıyor. Menünün bunların hepsinde çalışması gerekiyor

Çeşitli akordeon menü uygulamalarını denemek için birkaç hafta geçirdim. Onları düzenlemek, uyarlamak ve onlardan vazgeçmek. Web sitesi, CSS Scripts, tüm gereksinimlerimi karşılayan ve bu talimatın temelini oluşturan çok seviyeli bir menüye sahip.

Adım 1: Adım Adım Kurulum

Bir MacBook veya PC'de terminal penceresini açın ve aşağıdaki komutları çalıştırın:

♣'lerdeki öğeleri gerçek değerlerle değiştirin.

Raspberry Pi'ye giriş yapın

$ ssh pi@♣ahududu-pi-ip-adresi♣

Ana dizine değiştir

$ cd /var/www

index.html dosyasını indirin ve dosyanın izinlerini ve sahibini değiştirin

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

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

Görüntüler için bir dizin oluşturun ve bu dizine gidin

$ mkdir img

$ cd resmi

Resimleri indirin ve sahibini değiştirin.

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

Ana dizine yedekleyin ve css dizinini oluşturun ve içine taşıyın

$ cd..

$ mkdir css $ cd css

Stil sayfasını indirin ve dosyanın izinlerini ve sahibini değiştirin

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

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

Ahududu pi'niz yoksa, bu dosyaları bir Mac veya PC'ye indirebilirsiniz. Menüyü bir Mac veya PC'den çalıştırmak için

• index.html'ye çift tıklayın veya
• index.html'yi seçin, sağ tıklayın ve istediğiniz tarayıcı ile açın.

Ahududu Pi kullanıyorsanız, bir web sunucusu çalıştırıyor olmalıdır. PC'nizde veya Mac'inizde bir tarayıcı açın ve URL penceresine şunu girin:

♣ahududu-pi-ip-adresi♣/index.html

Sunucum güvenli bir bağlantı gerektiriyor (iki nokta üst üste etrafındaki boşlukları kaldırın):

https://♣ahududu-pi-ip-adresi♣/index.html

Ve çalışıyor!

2. Adım: Ek: Referanslar

• Yalnızca HTML ve CSS kullanan CSS komut dosyası Çok düzeyli akordeon menüsü
• W3Schools akordeon menüsü
• W3Schools CSS'si
• W3Schools HTML'si

3. Adım: Ek: Güncellemeler

4. Adım: Ek: Sorun Giderme

İşte yardımcı olabilecek bazı fikirler:

• PHP eko ifadelerinde HTML'yi biçimlendirmek için, bir dönüş karakteri koymak için sonuna "\r" ekleyin
• Bir alt menünün grup kimliği benzersiz olmalıdır. Bir alt menünün grup kimliği benzersiz değilse, alt menü öğeleri grup kimliğinin ilk örneğine dahil edilecektir.