Suite à plusieurs de vos messages ou commentaires ici et là, je vais vous présenter 2 options que j’ai expérimenté pour gérer menus et navigations dans votre design Jeedom :

• Soit vous copiez / coller chacun de vos menus sur vos pages
• Soit vous faites une page avec votre menu et une iframe qui affichera vos autres pages.

Copier/Coller de votre menu sur chacune de vos pages

C’est en effet l’option la plus simple mais la plus fastidieuse. Dans le code html de ton menu, il faudra ajouter l’URL de la page cible dans la balise a (un lien) juste après href. Par exemple :

<li>
    <a href="/index.php?v=d&p=plan&plan_id=2">
        <i class="fa fa-lightbulb" aria-hidden="true"></i>
    </a>
</li>

Dans ce cas, quand on cliquera sur l’icône lampe, on sera redirigé vers la page dont l’identifiant est 2.

Si vous ne savez pas comment trouver l’identifiant de votre page, voici la marche à suivre. Ouvrir d’abord la page de votre design pour laquelle vous souhaitez connaître l’identifiant.

Puis regarder dans la barre d’adresse de votre navigateur, vous devriez retrouver quelque chose de ce genre : http://mon_nom_de_domaine/index.php?v=d&p=plan&plan_id=3
Le plan ID est donc l’identifiant de votre page qu’il faudra utiliser pour faire vos liens de navigation.

Une fois tous les liens ajoutés à votre menu, c’est là que cela devient fastidieux. Il vous faudra copier votre menu sur chacune de vos pages de votre design. Et à chaque fois que vous modifierez votre menu, il vous faudra le mettre à jour sur toutes les pages.

Une page avec menu et iframe

Pour rappel, une iFrame est le nom d’une balise HTML qui permet d’intégrer une page HTML au sein d’un autre document HTML. Dans notre cas, un conteneur pour les autres pages de votre design.

L’idée ici est de rendre la navigation dans votre design Jeedom la plus fluide possible.

Si je reprends l’exemple du menu « light », pour maintenant y ajouter cette navigation, voici la structure des pages :

• Page 0 : Affichage du menu et de l’iframe
• Page 1 : Page de gestion de présence sans menu
• Page 2 : Page de gestion de l’éclairage sans menu
• Page 3 : Page de gestion du chauffage sans menu
• Etc etc

Seule la page 0 comportera le menu, les autres se focaliseront sur l’affichage des informations de vos équipements. Rentrons maintenant dans le détail de cette navigation pour votre design Jeedom.

Focus sur la Page 0 : Affichage du menu

La première activité à faire est de calculer la taille de votre écran où votre design sera affiché. Par exemple, le Nest Hub Max profite d’un écran tactile de 10 pouces, lequel peut afficher une image en 1280 x 800 pixels. Par opposition, le Nest Hub dispose quant à lui d’un écran de 7 pouces pour une définition de 1024 x 600 pixels.

Il vous faudra ajouter un premier « text/html » pour ajouter le code du menu comme indiqué dans l’article initial mais complété avec le code qui permet d’appeler les différentes pages dans l’iframe.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web&display=swap" rel="stylesheet">
<link rel="stylesheet" href="mytheme/menu_light/menu.css">
<nav class="main-menu">
  <div class="settings"></div>
  <div class="scrollbar" id="style-1">
    <ul>
      <li>                                   
        <a onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=2&fullscreen=1'">
          <i class="fa fa-home vertical-center"></i>
          <span class="nav-text">HOME</span>
        </a>
      </li> 
      <li>                                   
        <a onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1'">
          <i class="fa fa-users vertical-center"></i>
          <span class="nav-text">PRÉSENCE</span>
        </a>
      </li>   
      <li class="darkerlishadow">                                 
        <a onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=4&fullscreen=1'">
          <i class="fa fa-lightbulb vertical-center"></i>
          <span class="nav-text">ÉCLAIRAGE</span>
        </a>
      </li>   
      <li class="darkerli">                                 
        <a onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=5&fullscreen=1'">
          <i class="fa fa-thermometer-three-quarters vertical-center"></i>
          <span class="nav-text">CHAUFFAGE</span>
        </a>
      </li>   
      <li class="darkerli">                                 
        <a onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=6&fullscreen=1'">
          <i class="fa fa-shield-alt vertical-center"></i>
          <span class="nav-text">SÉCURITÉ</span>
        </a>
      </li>
      <li class="darkerlishadowdown">                                 
        <a onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=7&fullscreen=1'">
          <i class="fa fa-plug vertical-center"></i>
          <span class="nav-text">ÉNERGIE</span>
        </a>
      </li> 
      <li>                                   
        <a onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=8&fullscreen=1'">
          <i class="fa fa-cogs vertical-center"></i>
          <span class="nav-text">PARAMÈTRAGE</span>
        </a>
      </li>
    </ul>
  </div>
</nav>

Pensez à bien conserver la position 3 et à dimensionner et positionner en fonction de votre écran. Pour chaque lien, il vous faudra donc mettre le plan_id correspond à l’identifiant de la page de votre design que vous souhaitez afficher dans l’iframe.

Focus sur la Page 0 : Affichage de l’iframe

Il vous faudra ensuite ajouter un 2ième « text/html » pour l’iframe où vous pourrez ajouter le code html suivant en prenant en compte les dimensions de votre écran. Je vous conseille de vous baser sur la largeur de votre écran à laquelle vous retirer 55 px (la largeur de votre menu).

<div style="float:left; width:1300px; height:800px;">	
  <iframe id="pagecontent_iframe" height="800px" width="1300px" frameBorder="1" scrolling="no" src="index.php?v=d&p=plan&plan_id=3&fullscreen=1">
  </iframe>
</div>

Il vous faudra penser à mettre une position inférieur à la position du menu, soit dans mon cas, position 1.

Je vous invite à être vigilant sur la taille de l’iframe et le positionnement dans la page tant que vous peaufinez votre menu sur votre laptop. Si vous êtes en plein écran il vous sera difficile de conserver la capacité de faire clic droit pour passer en mode édition de votre menu. Voir l’exemple en dessous où j’ai conservé une bande libre à droite de mon design :

Quand vous cliquerez sur le menu de votre design, seule l’iframe sera rafraîchit et mise à jour avec la page ciblée.

Si vous avez une boucle d’imbrication

Si vous avez votre menu qui s’affiche en bouclant, si l’iframe qui affiche la page conteneur, dont l’iframe afficherait la page conteneur et ainsi de suite avec une imbrication des menus, alors attention à l’ID appelait par votre iframe. Dans l’exemple du code ci-dessus de l’iframe, plan_id=3 est un paramètre à remplacer par la page que vous voulez afficher dans le conteneur « iframe ». le chiffre 3 renvoie vers la page dont l’identifiant est le 3. Il est important que ce chiffre ne soit pas l’identifiant de la page 0 comme dans mon exemple sous peine de voir boucler l’affichage. Il est aussi important que sur cette page dont l’identifiant est le 3, ne contienne pas de menu, car il est déjà sur la page conteneur.

Cette option est plus agréable à l’usage et pour continuer à faire vivre votre design Jeedom :

• Votre menu est centralisé, le rendant facilement maintenable
• Vous n’avez plus qu’à modifier vos différentes pages de votre design sans tenir compte du rendu avec le menu. C’est la page 0 qui s’en charge.

N’hésitez pas à partager vos feedbacks et à bientôt.
/F