Menu accordéon : 4 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:06

Créez un menu accordéon à plusieurs niveaux en utilisant uniquement HTML et CSS.

Bien que j'utilise un Raspberry Pi pour mes projets, cela peut fonctionner sur n'importe quel serveur Web.

Au lieu de fournir des exemples sur la façon de créer un élément Web particulier, l'objectif est d'avoir un modèle qui inclut des exemples de travail de chaque élément utilisé dans mes projets. Il est plus facile de modifier quelque chose qui fonctionne, puis d'essayer de le faire fonctionner.

Un menu accordéon peut être utilisé comme interface avec un appareil Raspberry Pi via un ordinateur, un pad ou un téléphone portable. Pendant que j'utilise un Raspberry Pi exécutant lighttpd, n'importe quel matériel et serveur Web peut être utilisé.

Chaque projet Raspberry Pi doit avoir une interface. En raison de sa taille d'affichage relativement petite, les téléphones mobiles sont les plus restrictifs. Un menu accordéon contourne les limites d'un téléphone en développant (+) et en réduisant (-) verticalement, permettant autant d'éléments de menu que nécessaire.

Il existe de nombreux exemples de menus accordéon sur le Web. Parce que j'aime l'apparence d'OpenHAB ou d'OpenSprinkler, je voulais quelque chose de similaire.

Jusqu'à présent, les menus de mon projet Raspberry Pi étaient très simples. Je n'ai pas passé beaucoup de temps sur le look and feel. La plupart de mes interfaces ont été écrites uniquement en HTML et n'ont utilisé aucun CSS. Je ne suis pas un concepteur d'interface utilisateur et travailler sur l'apparence est en dehors de ma zone de confort. Parce que je ne travaille pas très souvent sur des sites Web, j'ai appris et oublié CSS plusieurs fois. Je voulais faire le look-and-feel du menu une fois, le faire correctement, puis le réutiliser.

Dans mes applications, j'ai besoin du menu pour prendre en charge:

• des liens vers d'autres sites Web ou appareils,
• afficher les valeurs ou l'état et
• autoriser les mises à jour des valeurs.

Les deux derniers nécessitent plus que HTML et CSS.

Comme je ne sais pas à l'avance de combien d'éléments de menu j'aurai besoin, un menu en accordéon permet d'étendre le menu selon les besoins.

Mes commentaires dans le CSS et le HTML sont peut-être un peu exagérés, mais je peux regarder les commentaires et savoir comment modifier le menu pour répondre à mes besoins sans réapprendre CSS. Les commentaires me permettent également de comprendre facilement l'impact du CSS sur le HTML sans basculer entre les deux.

J'avais quelques autres exigences:

• Parfois, ma maison perd l'accès à Internet. Donc, je ne peux pas faire dépendre le système de menus de liens vers des sites Web externes, qui incluent des polices externes, des API ou du javascript
• Ma famille a des goûts informatiques éclectiques et utilise iPhone, Android, MAC, PC et iPad, tablettes, ainsi que Chrome, Firefox, Safari et IE. Le menu doit fonctionner sur tous ces

J'ai passé quelques semaines à essayer diverses implémentations de menu accordéon. Les éditer, les adapter et les abandonner. Le site Web, CSS Scripts, propose un menu à plusieurs niveaux qui répond à toutes mes exigences et constitue la base de cette instructable.

Étape 1: Installation étape par étape

Ouvrez la fenêtre du terminal sur un MacBook ou un PC et exécutez les commandes suivantes:

Remplacez les éléments dans les par les valeurs réelles.

Connectez-vous au Raspberry Pi

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

Passer au répertoire principal

$ cd /var/www

Téléchargez index.html et modifiez les autorisations et le propriétaire du fichier

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

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

Créez un répertoire pour les images et déplacez-vous dans ce répertoire

$ mkdir img

$ cd img

Téléchargez les images et changez de propriétaire.

$ 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

Sauvegardez dans le répertoire principal, créez le répertoire css et déplacez-vous dedans

$ cd..

$ mkdir css $ cd css

Téléchargez la feuille de style et modifiez les autorisations et le propriétaire du fichier

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

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

Si vous n'avez pas de Raspberry Pi, vous pouvez télécharger ces fichiers sur un Mac ou un PC. Pour exécuter le menu à partir d'un Mac ou d'un PC, soit

• double-cliquez sur index.html, ou
• sélectionnez index.html, faites un clic droit et ouvrez avec le navigateur de votre choix.

Si vous utilisez un Raspberry Pi, il doit exécuter un serveur Web. Ouvrez un navigateur sur votre PC ou Mac et dans la fenêtre URL, saisissez:

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

Mon serveur nécessite une connexion sécurisée (supprimez les espaces autour des deux points):

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

Et il fonctionne!

Étape 2: Annexe: Références

• Script CSS Menu accordéon à plusieurs niveaux utilisant uniquement HTML et CSS
• Menu accordéon W3Schools
• CSS W3Schools
• W3Schools HTML

Étape 3: Annexe: Mises à jour

Étape 4: Annexe: Dépannage

Voici quelques idées qui pourraient vous aider:

• Pour formater le HTML dans les instructions echo php, ajoutez "\r" à la fin pour mettre un caractère de retour
• L'identifiant de groupe d'un sous-menu doit être unique. Si l'identifiant de groupe d'un sous-menu n'est pas unique, ses éléments de sous-menu seront inclus dans la première instance de l'identifiant de groupe