Menu Recorder pour design Jeedom

Menu Recorder pour design Jeedom

menu recorder

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é 517 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/ …

vue jeexplorer du 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 :

mode édition

Puis il vous faudra ajouter un élément Texte / Html toujours grâce au clic droit :

ajout texte / html

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

Paramètre d'affichage

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

ajout de l'html et changement de position
  • 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

5 réflexions sur « Menu Recorder pour design Jeedom »

  1. Encore un excellent boulot ! Pour ma part, j’ai installé le menu déroulant horizontal avec les noms paramètrables mais j’avoue que je suis séduit par celui-ci. Avec la possibilité, d’y inclure des icônes personnalisés (je pense notamment aux icônes de Salvialf de type Black), je pense que je passerais le pas mais je sais pas si c’est réalisable.

  2. Bonjour,

    Super les articles sur les différents menu, ça donne de bonne idée.

    Toutefois, il n’y a pas besoin de mettre le lien « link » vers fontawesome, vu qu’il est déjà inclus dans jeedom.
    En effet, jeedom inclus déjà le pack d’image gratuit, et ce en local. Donc, même pour fonctionner en local pur, pas besoin de télécharger les images, elles sont déjà présente.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *