Menu akordeonu: 4 kroki

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:29

Stwórz wielopoziomowe menu akordeonowe używając tylko HTML i CSS.

Podczas gdy używam Raspberry Pi do moich projektów, można go uruchomić na dowolnym serwerze WWW.

Zamiast podawać przykłady tworzenia konkretnego elementu internetowego, celem jest posiadanie szablonu, który zawiera działające przykłady każdego elementu używanego w moich projektach. Łatwiej jest zmodyfikować coś, co działa, niż spróbować go uruchomić.

Menu akordeonowe może być używane jako interfejs do urządzenia Raspberry Pi za pośrednictwem komputera, tabletu lub telefonu komórkowego. Podczas gdy używam Raspberry Pi z systemem lighttpd, można użyć dowolnego sprzętu i serwera WWW.

Każdy projekt Raspberry Pi powinien mieć interfejs. Ze względu na stosunkowo mały rozmiar wyświetlacza telefony komórkowe są najbardziej restrykcyjne. Menu akordeonowe pozwala ominąć ograniczenia telefonu, rozwijając (+) i zwijając (-) w pionie, umożliwiając dowolną liczbę pozycji menu.

W sieci jest wiele przykładów menu akordeonowych. Ponieważ podoba mi się wygląd OpenHAB lub OpenSprinkler, chciałem czegoś podobnego.

Do tej pory menu mojego projektu Raspberry Pi były bardzo proste. Nie spędzałem dużo czasu na patrzeniu i odczuciu. Większość moich interfejsów była napisana tylko w HTML i nie używała CSS. Nie jestem projektantem UI, a praca nad wyglądem i odczuciem jest poza moją strefą komfortu. Ponieważ nie pracuję zbyt często na stronach internetowych, wiele razy nauczyłem się i zapomniałem CSS. Chciałem raz zrobić wygląd menu, zrobić to dobrze, a następnie użyć go ponownie.

W moich aplikacjach potrzebuję menu do obsługi:

• linki do innych stron internetowych lub urządzeń,
• wyświetlanie wartości lub stanu i
• zezwól na aktualizacje wartości.

Ostatnie dwa wymagają więcej niż HTML i CSS.

Ponieważ nie wiem z góry, ile pozycji menu będę potrzebować, menu akordeonowe pozwala na elastyczność w rozszerzaniu menu zgodnie z wymaganiami.

Moje komentarze w CSS i HTML mogą być nieco przesadzone, ale mogę spojrzeć na komentarze i wiem, jak zmienić menu, aby spełnić moje potrzeby, bez ponownego uczenia się CSS. Komentarze ułatwiają mi również zrozumienie, jak CSS wpływa na HTML bez przeskakiwania między nimi.

Miałem kilka innych wymagań:

• Czasami mój dom traci dostęp do internetu. Tak więc nie mogę mieć systemu menu zależnego od linków do zewnętrznych stron internetowych, które obejmują zewnętrzne czcionki, interfejsy API lub javascript
• Moja rodzina ma eklektyczne gusta komputerowe i używa iPhone'a, Androida, Maców, PC i iPadów, tabletów, a także Chrome, Firefox, Safari i IE. Menu musi działać na wszystkich tych

Spędziłem kilka tygodni wypróbowując różne implementacje menu akordeonowego. Edytowanie ich, dostosowywanie i rezygnacja z nich. Witryna CSS Scripts ma wielopoziomowe menu, które spełnia wszystkie moje wymagania i stanowi podstawę tej instrukcji.

Krok 1: Instalacja krok po kroku

Otwórz okno terminala na MacBooku lub PC i uruchom następujące polecenia:

Zastąp elementy w ♣ rzeczywistymi wartościami.

Zaloguj się do Raspberry Pi

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

Przejdź do katalogu głównego

$ cd /var/www

Pobierz index.html i zmień uprawnienia i właściciela pliku

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

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

Utwórz katalog dla obrazów i przejdź do tego katalogu

$ mkdir img

$ cd obraz

Pobierz obrazy i zmień właściciela.

$ 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

Utwórz kopię zapasową w głównym katalogu, utwórz katalog css i przejdź do niego

$ cd..

$ mkdir css $ cd css

Pobierz arkusz stylów i zmień uprawnienia oraz właściciela pliku

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

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

Jeśli nie masz Raspberry Pi, możesz pobrać te pliki na komputer Mac lub PC. Aby uruchomić menu z komputera Mac lub PC:

• kliknij dwukrotnie index.html lub
• wybierz index.html, kliknij prawym przyciskiem myszy i otwórz w wybranej przeglądarce.

Jeśli używasz Raspberry Pi, musi być uruchomiony serwer WWW. Otwórz przeglądarkę na komputerze PC lub Mac i w oknie adresu URL wpisz:

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

Mój serwer wymaga bezpiecznego połączenia (usuń spacje wokół dwukropka):

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

I to działa!

Krok 2: Załącznik: Referencje

• Skrypt CSS Wielopoziomowe menu akordeonowe używające tylko HTML i CSS
• Menu akordeonu W3Schools
• CSS W3Schools
• W3Schools HTML

Krok 3: Dodatek: Aktualizacje

Krok 4: Dodatek: Rozwiązywanie problemów

Oto kilka pomysłów, które mogą pomóc:

• Aby sformatować HTML w instrukcjach echa php, dodaj "\r" na końcu, aby wstawić znak powrotu
• Identyfikator grupy dla podmenu musi być unikalny. Jeśli identyfikator grupy podmenu nie jest unikalny, jego elementy podmenu zostaną uwzględnione w pierwszym wystąpieniu identyfikatora grupy