Améliorer son design Jeedom avec un menu full screen
Aujourd’hui, je vous propose en téléchargement un menu full screen pour votre design Jeedom. Je voulais trouver un moyen de conserver un maximum d’espace de l’écran dédié à l’affichage du design, des informations et des équipements.
Un menu plein écran
L’idée est donc d’avoir un menu totalement caché et seulement quand on clique sur l’icône, il apparait et prend tout l’écran pour une navigation facilitée.
J’ai fait, pour l’exemple, 6 liens avec un icône associé à chaque fois mais on pourrait imaginer des tuiles, voir même l’affichage de certaines informations quand le menu recouvre l’écran.
Il me semble important aussi de vous recommander d’afficher le reste de votre design sous forme d’une iframe pour que ce menu soit pleinement utile et facile d’utilisation. Si vous souhaitez savoir comment faire, voici un article dédié à ce sujet.
Voici les sources de ce menu inspiré à l’origine par le code disponible ici : https://codepen.io/breadz/pen/zrMRoo
Télécharger “Archive Menu Full Screen” Archive-menu-full-screen.zip – Téléchargé 449 fois – 3 Ko
Comment « installer » ce menu dans votre design Jeedom ?
En attendant, il vous faudra le plugin Jeexplorer pour déposer les fichiers css et js dans un dossier à la racine telle que sur la capture d’écran : mytheme/menu_full_screen/ …
Maintenant rendez vous dans le design en question, il vous faudra passer en mode édition en faisant clic droit au milieu de votre écran :
Puis il vous faudra ajouter un élément Texte / Html toujours grâce au clic droit :
Il vous faudra ensuite faire un nouveau clic droit sur le texte qui est apparu pour afficher les paramètres :
Et dans le champs texte vous pourrez copié/collé le contenu du fichier html :
Il vous faudra être vigilant sur les chemins d’accès aux fichiers css et js. Dans mon cas, mytheme/menu_full_screen/menu.css ou mytheme/menu_full_screen/menu.js.
Si toutefois vous voulez changer les icônes, en rajouter, ou autres … voici un article dédié à la librairie gratuite que j’utilise.
N’hésitez pas à poser vos questions ou me faire du feedback en commentaire ou sur ma page facebook.
A bientôt
/F
32 réflexions sur « Améliorer son design Jeedom avec un menu full screen »
Bien pensé! Bravo 🙂
Merci 🙂
Bonjour,
Super boulot.
Je me permet de poster une petite question que je n’arrive pas à résoudre.
Une fois le code HTML copié dans la zone de texte puis sauvegardé, tout fonctionne correctement, le menu s’affiche bien mais je n’arrive plus à le modifier. La seul possibilité, c’est d’aller dans la BD supprimé l’ID de l’élément de mon design et le recréer.. (Je suis en V3.3.39)
Avez vous une solution plus simple pour modifier après enregistrement?
Encore merci pour le partage.
Bonjour,
Je viens de corriger les sources, la version 1.1 est disponible.
Pour info, dans le code html, l’appel de la librairie jquery posait problème.
Il suffit de retirer la ligne, de toute manière la librairie est déjà utilisée dans jeedom.
Désolé du dérangement.
Bonjour,
Merci pour ce partage et ce blog.
Est-il possible de passer directement au design sélectionné sans être obligé de cliquer sur la croix pour faire disparaître le menu (on gagne un clic) ?
Salut raqpub,
J’imagine que tu utlises des iframes et que du coup tu veux que lors d’un click l’iframe soit de suite visible ?
Dans ce cas, dans le fichier js ajoute la fonction suivante :
function closeMenu (){$("#menu").toggleClass('open');
$(".toggle-menu").toggleClass('active');
};
Et dans la balise a du menu, sur l’événement onclick après le changement de source de l’iframe rajoute closeMenu(); et ca devrait fonctionner.
N’hésites pas à me dire si ca correspond à ton besoin.
Bonjour florian,
J’ai mise le bout de code cans le fichier js.
Par contre, j’ai essayé plusieur possibilités mais je ne sais pas où mettre le » closeMenu(); » exactement.
Serais-tu m’en dire plus ?
En tout cas super boulot. Merci bcp
Bonjour Benbboy,
Merci pour le feedback.
As-tu essayé quelque chose comme ça sur la balise a ?
onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=2&fullscreen=1'; closeMenu();"Salut Florian.
Je n’ai pas du essayé car ça fonctionne. Par contre, le menu se ferme avant le chargement du frame, rien de grave.
Merci bcp et continue comme ça.
Salut,
J’essaye de te répondre avec mes codes mais j’ai une erreur 403 sur ton site dès que je clique sur « Laisser un commentaire ». Je mets ça sous community de jeedom ici : https://community.jeedom.com/t/presentation-geqr-et-blog-ma-maison-intelligente/11387/9 ?
Je te remercie de ta réactivité.
C’es top.
Pour avoir ton menu sur toutes mes pages, il faut que je mette en le code HTML dans un balise texte sur toutes mes pages, en profondeur 0 pour qu’il se retrouve sur le « calque » le plus bas?
Tu as en effet 2 options, soit le duplicata de ton menu sur chaque page, soit une iframe.
J’ai essayé d’expliquer ces 2 concepts ici : http://ma-maison-intelligente.fr/2020/03/2-options-pour-la-navigation-dans-votre-design-jeedom/
En espérant que ca t’aide
Bonjour,
Si je veux augmenter la taille des caractères du menu. Où dois-je modifier cela dans le menu.css ?
Merci
Hello,
Tu peux m’indiquer sur quelle ligne du CSS tu appliques la couleur du texte ?
J’ai réussi à jouer sur la transparence et la couleur de l’arrière plan aux lignes 8 et 23 mais pas sur la couleur des textes (d’ailleurs j’ai aussi l’impression que la transparence s’est appliquée au texte, ce que je ne veux pas forcément)
Merci, beau boulot 😉
Salut Roman,
Merci pour le feedback.
La couleur du texte est géré ligne 100 dans la balise #menu .main-nav a
Pour la gestion de la transparence, il te faudrait utiliser ligne 12, quelque chose comme ça : background-color: rgba(130,186,27,0.5); où 0.5 est l’index de transparence. background-color permet de gérer la transparence de l’élément sans affecter son contenu contrairement à opacity.
/F
Effectivement coté transparence du texte c’est mieux, par contre ça ne marche pas pour la couleur du texte 🙁 , j’ai essayé aussi avec une commande en rgba mais j’ai toujours une couleur genre gris du type 3c3c3c en hexa / 606060 en rgb.
Et, petite question, j’utilise le fichier en V1.1 et ma ligne « backgrouncolor » est 8 au lieu de 12, sur notepad++ (idem 96 au lieu de 100 pour la balise menu), bizarre ?
Merci 😉
Je complète mon réponse précédente : j’ai l’impression que la couleur du texte s’ajuste automatiquement en fonction de la couleur du background ; c’est possible ?
J’ai testé un background plutot foncé -> le texte
s’est mis gris clair
J’ai testé un background plutot clair -> le texte s’est mis gris plus foncé
Voici la séquence de fonctionnement du menu :
– Quand on clic pour l’ouvrir, la div avec l’id menu prend la classe open pour devenir visible (opacity:1).
Le fond est donc vert et le texte blanc (avec mon exemple) comme indiqué dans le fichier css line 9 #menu, tant que la souris reste loin des éléments du menu, au dessus ou au dessous par exemple.
– Si la souris passe sur la balise ul, soit la liste des éléments du menu, alors les éléments se grisent, en devenant à moitié transparent avec opacity:0.5 (line 78)
– Quand la souris passe sur un des éléments du menu ou dans son prolongement droit ou gauche car il prend toute la largeur du design, cet élément devient blanc car son opacity repasse à 1 (line 86)
Donc, la couleur du background du menu se gère line 12, par défaut: background: #82ba1b; et la couleur du texte line 101, par défaut: color: #ffffff;
En espérant que ca aide 🙂
J’avais plus ou moins déduis ce type de fonctionnement, et j’ai réussi à forcer la couleur avec la commande !important comme préconisé ci-dessous, par contre en faisant ça je n’ai plus la surbrillance quand je passe la souris sur un texte => Perso ça ne me dérange pas car usage tablette tactile, mais je remonte juste l’info.
Concernant la commande F12, j’ai jeté un oeil est j’arrive la à mes limites de compétences sur la question 🙁
Conclusion : De mon coté j’ai le résultat souhaité, merci 🙂
@+
Finalement j’ai bien la surbrillance au passage de la souris ; je suis reparti depuis le fichier CSS de base (j’avais surement modifié un paquet de choses inutiles) :
Balise menu Ligne 5 : background: rgba(14,14,14,0.8);
Balise menu .main-nav Ligne 96 : color: #DCDCDC !important;
Ok super 🙂
bonjour , pour infos pour la couleur du texte c ‘est a la ligne 91
en dessous de #menu ul a {
color: black !important;
J’ai le même « problème » que Romain concernant la couleur du texte.
En fond, j’ai la couleur verte mais mon texte est en gris. J’ai bien renseigné la couleur #ffffff dans le css mais rien n’y fait.
Est-ce que ma réponse juste au dessus à Roman t’aide ?
Il se peut aussi qu’une couleur soit hérité d’un autre fichier css ailleurs. Dans ce cas, color:#ffffff !important; permettra de « forcer » la couleur. Ce n’est pas idéal, il vaudrait mieux comprendre d’où ca vient en utilisant par exemple l’inspection de code de Google Chrome (F12 sur PC de mémoire).
bonjour, j’ai le même problème , impossible de changer la couleur de fond verte, quelle que ce soit la valeur que j’indique.
je ne comprends pas
Bonjour Romain,
As-tu essayé dans le fichier menu.css, dans la balise #menu, de changer background:#82ba1b par background-color: #333333; (couleur que tu veux) ?
Y a-t-il une chance qu’autres part dans ton design il y est une balise qui porte le id #menu ? Si oui en changeant dans le code html id= »menu » par id= »menuFullScreen » puis en remplaçant dans le fichier css « menu » par « menuFullScreen ».
Bonjour, à priori il s’agit d’un rafraîchissement que JEEDOM ne fait pas immédiatement pour une raison que j’ignore, meme en rechargeant la page , etc… cela ne se répercute pas de suite.
mais j’y suis arrivé !
parfois il suffit d’attendre tout simplement.
merci bcp
Ca ressemble plutôt au cache de ton navigateur, en effet, il faut penser à le vider.
Si tu veux, envoie moi par mail ou la page facebook ton code css pour que je le regarde, ca sera plus simple.
bonjour, ok merci. j’ai envoyé sur facebook. merci de ton aide
par contre , sur ce menu, après mes modifications, je ne sais pas ce que j’ai touché, mais le dernier élément de la liste s’affiche en premier directement sans fondu ni rien, et ensuite les autres apparaissent en fondu et en déroulant vers le bas.
je vois bien dans la prog l’animation toutes les 0.1 s , et je n’ai pas touché cela. donc je comprends pas..
est-ce que tu pourrais me dire quel paramètre je dois vérifier ? par avance merci
en tout cas le résultat est super malgré cela ! merci bcp
Bonjour,
Je suis en train de mettre en place ce menu pour une utilisation sur un petit écran tactile de Raspberry pi.
Mais je rencontre un soucis, dans l’utilisation.
En effet, dès lors que je passe le design en mode plein écran (quelque soit le navigateur) l’icone du menu disparait, le rendant inutilisable.
Auriez-vous une solution pour ce problème?
D’avance merci,
Florent
Bonjour et merci pour le feedback.
Je n’avais pas encore eu ce retour.
Je viens de corriger les sources .Si jamais vous voulez faire la modification dans votre code directement : il faut changer dans le code html la balise header par div.
Bonne soirée