Je vous propose un menu recorder pour votre design Jeedom au style sombre mais qui s’adaptera très facile à vos thèmes et à vos différents designs. Si vous êtes intéressés par une version horizontale ou dans le style clair, n’hésitez pas à me laisser un commentaire en dessous de cet article.

Menu Recorder horizontal

Comme vous l’avez peut être vu en preview sur ma page facebook, voici rapidement le rendu en vidéo de ce menu.

Ce menu s’adaptera automatiquement au nombre d’éléments de votre menu et sera paramètrable comme démontré dans la vidéo ci-dessous.

Par ailleurs, je vous recommande d’afficher vos pages avec une iframe pour faciliter l’usage et la maintenabilité. Voici un article qui pourrait vous aider à le mettre en place.

Ce menu est inspiré des sources siuvantes : https://codepen.io/raptor5/pen/WxQvgw. Je l’ai ensuite adapté à Jeedom et modifié pour le rendre paramètrable et automatiquement ajustable au nombre d’icônes souhaités.

Télécharger “Archives-menu-recorder” Archive-menu-recorder.zip – Téléchargé 446 fois – 2 Ko

Quelques explications pour la personnalisation

Vous trouverez dans les premières lignes du fichier css des paramètres que vous pourrez modifier pour personnaliser le menu.

:root {
  --recorder-hover-color:yellow; /* couleur au passage de la souris */
  --recorder-bg-color:linear-gradient(#3D4246, #24282B); /* couleur du fond du menu */
  --recorder-button-bg-color:linear-gradient(#44494F, #2F3237); /* couleur du fond du bouton */
  --recorder-active-color:#6c6d77; /* couleur de l'icône du bouton quand actif */
  --recorder-active-bg-color:#2A2D31;/* couleur de fond du bouton quand actif */
  --recorder-icon-color:#D9D9D9; /* couleur de l'icône */
}

Vous avez la possibilité comme montré dans la vidéo de montrer sur quelle paged e votre design vous vous trouvez en grisant le bouton correspondant. Pour cela, il faudra simplement ajouter la classe css « active », comme ci-dessous, sur le bouton en question

    <ul id="nav">
      <li><a href="#"><i class="fas fa-house"></i></a></li>
      <li><a href="#"><i class="fas fa-house-user"></i></a></li>
      <li class="active"><a href="#"><i class="fas fa-air-conditioner"></i></a></li>
      <li><a href="#"><i class="fas fa-cctv"></i></a></li>
      <li><a href="#"><i class="fas fa-door-closed"></i></a></li>
    </ul>

Comment « installer » ce menu ?

En attendant, il vous faudra le plugin Jeexplorer pour déposer le fichier css dans un dossier à la racine telle que sur la capture d’écran : mytheme/menu_recorder/ …

Maintenant rendez vous dans le design où vous souhaitez positionner votre menu. 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 :

Faites un nouveau clic droit sur le texte qui est apparu pour afficher les paramètres d’affichage :

Et dans le champs texte vous pourrez copié/collé le contenu du fichier html :

• Comme potentiellement votre menu viendra au dessus de votre design, il est important d’augmenter la position.
• Il est important de configurer votre design avec la taille de votre écran.
• Je vous recommande manuellement ou en modifiant hauteur/largeur dans l’écran ci-dessus pour faire en sorte que ca couvre votre Design.
• Il vous faudra être vigilant sur les chemins d’accès au fichier css. Dans mon cas, mytheme/menu_recorder/menu.css qui remplacera menu.css dans les lignes ci-dessous :

<!-- line 11 -->
<link rel="stylesheet" href="menu.css">

• Pour ajouter un icône / lien dans ce menu, il vous suffira d’ajouter une ligne comme celle ci-dessous. Pensez aussi à aller chercher l’icône qu’il vous faut sur la librairie font awesome (je vous explique tout cela ici):

<li><a href="#"><i class="fas fa-house"></i></a></li>

Comment lier ce menu avec vos pages ?

J’ai écris il y a quelques semaines un article qui pourrait vous intéresser si vous vous posez cette question. Pour lier vos pages à ce menu et assurer une navigation fluide, je vous propose 2 options dans cet article. Dans tous les cas, ca se passera dans la balise a, comme ci-dessous :

<!-- remplacer le # par le lien vers votre plan -->
<li>
    <a href="#">
        <i class="fas fa-house"></i>
    </a>
</li>

N’hésitez pas à poser vos questions sur ce menu recorder pour design Jeedom. J’apprécie aussi tous les feedbacks en utilisant par exemple les commentaires ci-dessous (ou ma page facebook).

A bientôt
/F