Avant toute chose merci de (re)prendre connaissance de la charte et de la respecter.
Pour résumer :
- Avant de poser une question, je cherche si la réponse existe
- Je suis poli, courtois et je respecte tout un chacun sur le forum
- Si un post m'agace : je m'en éloigne plutôt que de répondre d'une façon qui pourrait être mal interprétée


Il n'est jamais du luxe que de rappeler des choses simples :
Courtoisie, amabilité, politesse et bonne humeur sont les maîtres mots pour un forum sympathique, bienveillant et accueillant :)

Le groupe des Helpers est present pour vous aidez, n'hésitez pas à poser des questions ;)

Toute la communauté vous remercie

[tuto] Design - menu pour mobile/tablette

Cette partie est réservée à l'utilisation de l'interface web pour smartphone et tablettes
Avatar de l’utilisateur
noodom
Actif
Messages : 919
Inscription : 13 juil. 2014, 17:25
Contact :

[tuto] Design - menu pour mobile/tablette

Message par noodom » 24 févr. 2019, 00:09

Bonsoir,

Je vous propose un menu simple pour mobile ou tablette facilement adaptable à ses besoins.
Il permet de se créer un menu rapidement et de le faire évoluer facilement.

Le rendu donne ceci :
menu.png
menu.png (872.06 Kio) Consulté 1165 fois
Pour l'adapter à son propre menu, il suffit de respecter les étapes suivantes :
- Copier menu.css dans /html/montheme (depuis le plugin "Outil de développement" par exemple)
- Si utilisation d'icônes perso.
-- Copier les images des icônes perso. dans /montheme/images
-- Créer la liste des icônes perso. en css /montheme/menu.css
-- Modifier les liens vers les icônes (ex : <i class="icon-design-jeedom"></i>)
- Si utilisation des icônes fontawesome standards
-- Modifier les liens vers les icônes (ex : <i class="fas fa-igloo"></i>)
(Liste des icônes disponibles ici : https://fontawesome.com/icons?d=gallery)
- Si pas d'utilisation des icônes fontawesome standards
-- Supprimer le lien vers font-awesome.min.css (pour alléger le chargement de la page)
- Dans le code HTML inséré dans le design :
-- Modifier l'arborescence du menu pour adapter le contenu à ses besoins
-- Pour chaque appel à "gotoPlan(XXX);", modifier XXX par l'identifiant de votre page Design cible.
-- Dans le mode Design, pour chaque page du menu, passer en mode édition, puis ajouter "Texte/html" puis copier/coller ce code HTML

Je n'ai pas mis les images pour chaque lien du menu pour ne pas alourdir le zip (mais elles doivent être récupérables depuis le post du menu F$B33)
menu.zip
(3.23 Kio) Téléchargé 52 fois

romanais
Actif
Messages : 1984
Inscription : 21 août 2014, 21:36
Localisation : Drôme

Re: [tuto] Design - menu pour mobile/tablette

Message par romanais » 24 févr. 2019, 12:49

Merci pour le partage, je mets ça de côté !
Merci à toute l'équipe pour le taf

Mon matériel

Avatar de l’utilisateur
Nitroks
Timide
Messages : 24
Inscription : 16 mars 2016, 21:43
Localisation : Caen

Re: [tuto] Design - menu pour mobile/tablette

Message par Nitroks » 03 mars 2019, 11:28

Bonjour Noodom,

Je n’ai pas réussi à intégrer le menu malgré les explications sur ton poste. J’ai indiqué les liens des icônes dans menu.css puis indiqué le lien de menu.css dans le html de la page design.
J’ai pourtant réussi avec celui de FB333!
Je n’arrive pas à voir ce qui ne va pas!


Envoyé de mon iPhone en utilisant Tapatalk
Jeedom 3.1.7 sur RPI3
Nas 5DD DIY sous OMV (Plex, Squeezebox server, ...)
Interface de contrôle tactile DIY de 13.3" sous Raspbian Jessie ((Design plein écran, Squeezelite, Antenne Blea)

Avatar de l’utilisateur
noodom
Actif
Messages : 919
Inscription : 13 juil. 2014, 17:25
Contact :

Re: [tuto] Design - menu pour mobile/tablette

Message par noodom » 03 mars 2019, 15:54

Nitroks a écrit :
03 mars 2019, 11:28
Bonjour Noodom,

Je n’ai pas réussi à intégrer le menu malgré les explications sur ton poste. J’ai indiqué les liens des icônes dans menu.css puis indiqué le lien de menu.css dans le html de la page design.
J’ai pourtant réussi avec celui de FB333!
Je n’arrive pas à voir ce qui ne va pas!


Envoyé de mon iPhone en utilisant Tapatalk
Salut Nitroks,

Peux-tu me donner plus de détails sur ce qui ne fonctionne pas pour comprendre plus précisément à quel endroit tu bloques pour l'intégration du menu ?

- Tu as bien créé un élément Design html/texte et recopié le contenu du html de mon design
- Tu as bien dans l'arborescence /html existante de Jeedom le fichier /montheme/menu.css et un répertoire /html/montheme/images (avec les images du menu)
- Tes fichiers ont les droits nécessaires (un glisser déposer par le plugin Outil de développement est suffisant)

Normalement, ces copier-coller devraient suffire à voir le menu (même avec des images manquantes)

neoloop
Timide
Messages : 42
Inscription : 01 sept. 2015, 22:49

Re: [tuto] Design - menu pour mobile/tablette

Message par neoloop » 10 mai 2019, 20:19

bonsoir

@noodom ce menu 'adapte tout seul en fonction d'un portable ou d'une tablette?
il ne faut pas faire deux design?

Avatar de l’utilisateur
noodom
Actif
Messages : 919
Inscription : 13 juil. 2014, 17:25
Contact :

Re: [tuto] Design - menu pour mobile/tablette

Message par noodom » 11 mai 2019, 02:40

neoloop a écrit :bonsoir

@noodom ce menu 'adapte tout seul en fonction d'un portable ou d'une tablette?
il ne faut pas faire deux design?
Salut,

Une fois bien positionné en haut à gauche, le menu s'adapte normalement bien sur un mobile ou une tablette.
Il faut bien sûr que le nombre de cases (verticales ou horizontales) soit adapté à la taille de l'écran sinon ça risque de dépasser

Répondre

Revenir vers « Portail web smartphone & tablettes »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité