Modification menus custom pour les Designs

Petite modification du menu de F$B33 que beaucoup utilise pour les Designs.
Adaptez les chemins en fonction de votre organisation, pour moi tous ce que je fais est das un répertoire custom à la racine de Jeedom.

L’avantage de cette modification, c’est d’avoir un seul et même fichier qui gère les menus de toutes les pages des designs.
Dans un Design, Ajouter un text/Html avec le contenu Suivant :

<script>
  $(function () {
    $("#menu-custom").load("custom/theme/menu.html");
  });
  var idIs = 1; // value of plan_id for active link
</script>

<div id="menu-custom"></div>v>

Dans chaque page, changer l’idIs par l’id de la page en cours (se voit dans l’URL)

Dans le répertoire /custom/theme/ copier le fichier menu.html
Dans ce fichier modifier la variable links avec les valeur des plan_id et les noms des images associées dans le répertoire /custom/theme/images/

  var links = {
    1: { plan_id: 1, img: "icon_home.png"},
    2: { plan_id: 3, img: "icon_skydive.png"},
    3: { plan_id: 8, img: "icon_light.png"},
    4: { plan_id: 7, img: "icon_planning2.png"},
    5: { plan_id: 7, img: "icon_graff.png"},
    6: { plan_id: 9, img: "icon_volets.png"},
    7: { plan_id: 7, img: "icon_chauffage.png"},
    8: { plan_id: 7, img: "icon_reseau.png"},
  };

Contenu du fichier : menu.html


<ul class="nav custom-menu flex-column"></ul>

<script>
  $.urlParam = function (name) {
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if (results == null) {
      return null;
    }
    return decodeURI(results[1]) || 0;
  };
  var links = {
    1: { plan_id: 1, img: "icon_home.png"},
    2: { plan_id: 11, img: "icon_skydive.png"},
    3: { plan_id: 8, img: "icon_light.png"},
    4: { plan_id: 0, img: "icon_planning2.png"},
    5: { plan_id: 13, img: "icon_graff.png"},
    6: { plan_id: 9, img: "icon_volets.png"},
    7: { plan_id: 0, img: "icon_chauffage.png"},
    8: { plan_id: 12, img: "icon_reseau.png"},
  };
console.log(idIs);
  $.each( links, function (key, val) {
    if (idIs === val.plan_id)  {
      active_class = 'active';
    } else {
      active_class = 'podzob';
    }
    $('ul.nav.custom-menu').append('  <li class="nav-item">\n' +
      '    <a class="nav-link '+active_class+'" href="index.php?v=d&p=plan&plan_id='+val.plan_id+'">\n' +
      '      <img height=100px  width=100px src="custom/theme/images/'+val.img+'">\n' +
      '    </a>\n' +
      '  </li>')
  });
  $(".nav-link").click(function () {
    let id_is = $(this).attr('href');
    var current = (id_is[id_is.length -1]);
  });
</script>
4 J'aimes

en V4 avec le plugin HTML je pense que du coup on peut faire plus simple encore sans utiliser de Javascript

Possible sauf que je n’arrive pas à comprendre comment ce plugIn fonctionne, la Doc est un peu light …

Merci exactement ce que je cherchais !

Bonjour

bon maintenant j’aimerai rajouter en plus dans le menu la température par exemple, sauf qu’a part ajouter l’équipement dans chaque page je vois pas trop comment fiare, une idée pour ajouter en html ou js une info d’un équipement ?

Bonjour,

Non pas d’autre solution que d’ajouter l’équipement dans chaque page.

Alors entre temps j’ai trouvé !
Je fais une requête GET en ajax (au sein d’une balise script html) sur les 3 URL des équipements qui me donnent la température !
Du coup j’ai un composant via le plugin Html que je peut mettre sur chaque design et modifier que en une fois !

1 J'aime

Merci beaucoup pour ce partage.

Est-ce que quelqu’un sait où je peux trouver d’autres icones que ceux de base pour ajouter au menu ou sur les cadres ?

Ici

Merci …

Bonjour,

Merci beaucoup pour la solution.

Encore moi :slight_smile: quand je passe la souris sur les icones du menu, j’ai une case blanche qui se met sur l’icone et donc je ne le vois plus. Il me semble que dans la version d’origine c’était gris donc on voyait l’icone qui est sur fond blanc …
Ai-je loupé quelque chose ?

C’est la pseudo class « hover » qui doit être a changer pour qu’au passage de la sourie il se passe autre chose. Essaie un truc comme ca par exemple :

[data-page="plan"] ul.nav.custom-menu li:hover {
    box-shadow: inset 0px 0px 30px 10px #EEE;
}

Bonsoir,
J’ai une largeur de 1280px, je n’arrive pas à agrandir mon bandeau de menu pour qu’il fasse 1280 et non pas 1020 sur mes design.
j’ai modifié mon css :
perso.txt (1,2 Ko)

code html dan smon text/html :
html.txt (1,5 Ko)

Je ne trouve pas où je dois modifier la largeur, avez vous une idée ?
Merci par avance.

Nicolas.

Bonsoir,
J’ai fait la modification seulement dans le perso.css mais la modification a mis un moment à venir.
Soit patient ! Il y a peut-être un moyen de forcer la maj, mais je ne connais pas.

Salut,

Tu peux forcer le cache de ton navigateur pour forcer la mise à jour.
Tu peux aussi modifier le code pour forcer le rechargement du CSS mais il sera alors rechargé à chaque consultation de la page,
ce n’est donc pas forcément une bonne idée à long terme.

Tu peux vider ton cache avec Ctrl/r, Ctrl/F5. Et dans Jeedom tu peux nettoyer le cache : Réglage/Système/Configuration/Cache (attention juste netoyer !)

Bonjour,

J’essaye ce soir et je vous dis.
Merci

Bonjour,
J’ai suivie vos conseils, toujours identique. Je vais attendre encore, a suivre…
Merci

Hello

Il y a pas mal de fautes dans ton code html, en voila quelques unes à corriger

  • Le DOCTYPE est en HTML5 donc pas besoin d’ecrire <br/>, <br> suffit pour un retour à la ligne, de plus tu les avais écris à l’envers : </br> ?!
  • <div class="menu_top" width=1280px> ça s’écris plutôt : <div class="menu_top" style="width=1280px"> mais préfère mettre tous tes CSS dans la feuille de style jointe

Il n’y a pas de soucis de largeur, ton menu doit deja faire les 1280px que tu lui demande ici :

div.menu_top {
	width:1280px;
	height:70px;
	background-color:rgba(0,0,0,0.6);
	border-bottom:2px solid rgba(0,0,0,1);
}

mais il ne peux pas être plus grand car il n’y a plus rien a afficher après la dernière image !
Pour vérifier que ton menu fait bien la taille voulu ajoute un

backgroung: red;

a la fin de div.menu_top et tu verra que le fond rouge fait bien toute la largeur de ton écran.

Tu peux utiliser ca : https://jsfiddle.net/ pour tester ton code.