Menú de acordeón: 4 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:41

Cree un menú de acordeón de varios niveles utilizando solo HTML y CSS.

Si bien uso una Raspberry Pi para mis proyectos, esta se puede ejecutar en cualquier servidor web.

En lugar de proporcionar ejemplos de cómo crear un elemento web en particular, el objetivo es tener una plantilla que incluya ejemplos prácticos de cada elemento utilizado en mis proyectos. Es más fácil modificar algo que funciona y luego intentar que funcione.

Un menú de acordeón se puede utilizar como interfaz para un dispositivo Raspberry Pi a través de una computadora, teclado o teléfono móvil. Si bien uso una Raspberry Pi con lighttpd, se puede usar cualquier hardware y servidor web.

Cada proyecto de Raspberry Pi debe tener una interfaz. Debido a su tamaño de pantalla relativamente pequeño, los teléfonos móviles son los más restrictivos. Un menú de acordeón supera los límites de un teléfono al expandir (+) y contraer (-) verticalmente, lo que permite tantos elementos de menú como sea necesario.

Hay muchos ejemplos de menús de acordeón en la web. Como me gusta la apariencia de OpenHAB u OpenSprinkler, quería algo similar.

Hasta ahora, los menús de mi proyecto Raspberry Pi eran muy sencillos. No dediqué mucho tiempo a la apariencia. La mayoría de mis interfaces estaban escritas solo en HTML y no usaban CSS. No soy un diseñador de UI y trabajar en la apariencia está fuera de mi zona de confort. Debido a que no trabajo en sitios web muy a menudo, he aprendido y olvidado CSS varias veces. Quería hacer la apariencia del menú una vez, hacerlo bien y luego reutilizarlo.

En mis aplicaciones, necesito que el menú admita:

• enlaces a otros sitios web o dispositivos,
• mostrar valores o estado y
• Permitir actualizaciones de valores.

Los dos últimos requieren más que HTML y CSS.

Como no sé de antemano cuántos elementos de menú necesitaré, un menú de acordeón permite la flexibilidad de expandir el menú según sea necesario.

Mis comentarios en CSS y HTML pueden ser un poco exagerados, pero puedo ver los comentarios y saber cómo cambiar el menú para satisfacer mis necesidades sin tener que volver a aprender CSS. Los comentarios también me facilitan entender cómo el CSS impacta el HTML sin cambiar de un lado a otro.

Tenía algunos otros requisitos:

• A veces mi casa pierde el acceso a Internet. Por lo tanto, no puedo permitir que el sistema de menús dependa de enlaces a sitios web externos, que incluyen fuentes externas, API o JavaScript.
• Mi familia tiene gustos informáticos eclécticos y usa iPhone, Android, MAC, PC y iPads, tabletas, así como Chrome, Firefox, Safari e IE. El menú debe ejecutarse en todos estos

Pasé un par de semanas probando varias implementaciones de menú de acordeón. Editándolos, adaptándolos y renunciando a ellos. El sitio web, CSS Scripts, tiene un menú de varios niveles que cumplió con todos mis requisitos y forma la base de este instructivo.

Paso 1: instalación paso a paso

Abra la ventana de terminal en una MacBook o PC y ejecute los siguientes comandos:

Reemplaza los elementos en ♣ con valores reales.

Inicie sesión en Raspberry Pi

$ ssh pi @ ♣ dirección-ip-raspberry-pi ♣

Cambiar al directorio principal

$ cd / var / www

Descargue index.html y cambie los permisos y el propietario del archivo

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

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

Cree un directorio para imágenes y muévase a ese directorio

$ mkdir img

$ cd img

Descarga las imágenes y cambia de dueño.

$ 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

Haga una copia de seguridad en el directorio principal, cree el directorio css y muévase a él

$ cd..

$ mkdir css $ cd css

Descargue la hoja de estilo y cambie los permisos y el propietario del archivo

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

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

Si no tiene una Raspberry Pi, puede descargar estos archivos en una Mac o PC. Para ejecutar el menú desde una Mac o PC,

• haga doble clic en index.html, o
• seleccione index.html, haga clic con el botón derecho y abra con el navegador de su elección.

Si usa una Raspberry Pi, debe ejecutar un servidor web. Abra un navegador en su PC o Mac, y en la ventana URL ingrese:

♣ dirección-ip-raspberry-pi ♣ / index.html

Mi servidor requiere una conexión segura (elimine los espacios alrededor de los dos puntos):

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

¡Y funciona!

Paso 2: Apéndice: Referencias

• Script CSS Menú de acordeón multinivel usando solo HTML y CSS
• Menú de acordeón de W3Schools
• CSS de W3Schools
• HTML de W3Schools

Paso 3: Apéndice: Actualizaciones

Paso 4: Apéndice: Solución de problemas

Aquí hay algunas ideas que pueden ayudar:

• Para formatear HTML en declaraciones de eco de php, agregue "\ r" al final para poner un carácter de retorno
• El ID de grupo de un submenú debe ser único. Si el ID de grupo de un submenú no es único, sus elementos del submenú se incluirán en la primera instancia de ID de grupo.