Menu de acordeão: 4 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:36

Crie um menu de acordeão de vários níveis usando apenas HTML e CSS.

Embora eu use um Raspberry Pi para meus projetos, ele pode ser executado em qualquer servidor da web.

Em vez de fornecer exemplos de como criar um elemento da web específico, o objetivo é ter um modelo que inclua exemplos funcionais de cada elemento usado em meus projetos. É mais fácil modificar algo que funciona do que tentar fazê-lo funcionar.

Um menu de acordeão pode ser usado como uma interface para um dispositivo Raspberry Pi por meio de um computador, teclado ou telefone celular. Enquanto eu uso um Raspberry Pi rodando lighttpd, qualquer hardware e servidor web podem ser usados.

Todo projeto Raspberry Pi deve ter uma interface. Por causa de seu tamanho de tela relativamente pequeno, os telefones celulares são os mais restritivos. Um menu acordeão contorna os limites de um telefone expandindo (+) e recolhendo (-) verticalmente, permitindo quantos itens de menu forem necessários.

Existem muitos exemplos de menus sanfonados na web. Como gosto da aparência do OpenHAB ou do OpenSprinkler, eu queria algo semelhante.

Até agora, os menus do meu projeto Raspberry Pi eram muito simples. Eu não gastei muito tempo olhando e sentindo. A maioria das minhas interfaces foi escrita apenas em HTML e não usava CSS. Não sou um designer de IU e trabalhar na aparência está fora da minha zona de conforto. Como não trabalho em sites com muita frequência, aprendi e esqueci CSS várias vezes. Eu queria fazer a aparência do menu uma vez, acertar e depois reutilizá-lo.

Em meus aplicativos, preciso do menu para oferecer suporte a:

• links para outros sites ou dispositivos,
• exibir valores ou status e
• permitir atualizações de valores.

Os dois últimos requerem mais do que HTML e CSS.

Como não sei com antecedência de quantos itens de menu vou precisar, um menu acordeão permite a flexibilidade de expandir o menu conforme necessário.

Meus comentários em CSS e HTML podem ser um pouco exagerados, mas posso olhar os comentários e saber como alterar o menu para atender às minhas necessidades sem reaprender CSS. Os comentários também facilitam para mim entender como o CSS afeta o HTML sem alternar entre os dois.

Eu tinha alguns outros requisitos:

• Às vezes, minha casa perde o acesso à Internet. Portanto, não posso fazer com que o sistema de menus dependa de links para sites externos, o que inclui fontes externas, APIs ou javascript
• Minha família tem gostos ecléticos de computador e usa iPhone, Android, MACs, PC e iPads, tablets, assim como, Chrome, Firefox, Safari e IE. O menu precisa ser executado em todos esses

Passei algumas semanas testando várias implementações de menu de acordeão. Editando-os, adaptando-os e desistindo deles. O site, CSS Scripts, tem um menu multinível que atendeu a todos os meus requisitos e forma a base deste instrutível.

Etapa 1: instalação passo a passo

Abra a janela do terminal em um MacBook ou PC e execute os seguintes comandos:

Substitua os itens em ♣ pelos valores reais.

Faça login no Raspberry Pi

$ ssh pi @ ♣ endereço-pi-framboesa ♣

Mude para o diretório principal

$ cd / var / www

Baixe index.html e altere as permissões e o proprietário do arquivo

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

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

Crie um diretório para imagens e mova para esse diretório

$ mkdir img

$ cd img

Baixe as imagens e mude o dono.

$ 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

Faça backup no diretório principal, crie o diretório css e mova para ele

$ cd..

$ mkdir css $ cd css

Baixe a folha de estilo e altere as permissões e o proprietário do arquivo

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

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

Se você não tem um raspberry pi, pode baixar esses arquivos para um Mac ou PC. Para executar o menu em um Mac ou PC,

• clique duas vezes em index.html, ou
• selecione index.html, clique com o botão direito e abra com o navegador de sua escolha.

Se estiver usando um Raspberry Pi, ele deve estar executando um servidor da web. Abra um navegador em seu PC ou Mac e, na janela de URL, digite:

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

Meu servidor requer uma conexão segura (remova os espaços ao redor dos dois pontos):

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

E funciona!

Etapa 2: Apêndice: Referências

• Script CSS menu acordeão multinível usando apenas HTML e CSS
• Menu de acordeão W3Schools
• W3Schools CSS
• W3Schools HTML

Etapa 3: Apêndice: atualizações

Etapa 4: Apêndice: Solução de problemas

Aqui estão algumas idéias que podem ajudar:

• Para formatar HTML em declarações php echo, adicione "\ r" no final para inserir um caractere de retorno
• O id de grupo para um submenu deve ser exclusivo. Se o group-id de um submenu não for único, seus itens de submenu serão incluídos na primeira instância do group-id