Présentation d’un menu css sous jeedom / nextdom

Vous allez me dire, un menu de plus et plus compliqué à mettre en place…
Alors peut être un menu de plus , mais ce menu est différent par ca conception.
Le menu n’est pas à copier coller sur chaque design, mais créer sur une page unique.

Il est ecrit en js afin de facilité son intégration en ne modifiant que quelques infos ( ID design, type plateforme )
L’équipe Nextdom, notamment Noodom, et Slobberbone, ont travaillé pour adapter ce menu CSS.

Le principe et d’avoir un design menu, et des sous designs ou nous mettrons les informations équipements etc..

1er etape pour le menu css sous jeedom / nextdom :

Télécharger le pack de menus en cours de travail par nextdom .
https://github.com/NextDom/nextdom-theme-design

Cliquez sur le bouton vert « Clone or Download »

Après avoir téléchargé le pack le déziper sur le pc. On y reviendra plus tard.

2eme étape :

Préparer votre jeedom / nextdom .

Création de design de dimensions 1280 X 768
Un design : Menu
Puis des designs au nombre de 7
Pour aller plus vite dupliquez le 1er design
1 – 2 -3 -4- 5 -6 -7

Il est possible d’installer le plugins jeeexplorer pour jeedom, afin de facilité la mise en place du menu ou bien de passer par winscp pour mettre en place le menu sous nextdom.

Pour jeedom

Créer un répertoire montheme à la racine du html.
Soit /var/www/html pour avoir /var/www/html/montheme
Y glisser le dossier packicons
Y glisser le dossier themes présent dans slidingMenu

Pour nextdom

Mettre les droits en SSH
sudo chmod 775 -R /var/lib/data/
sudo chown -R www-data:www-data /var/lib/data/
Utiliser winscp ou filezilla

Créer un répertoire custom sous
/var/www/html/data pour avoir /var/www/html/data/custom
Y glisser le dossier packicons
Y glisser le dossier themes présent dans slidingMenu

Editer le fichier menu.html présent dans slidingMenu/themes
Et renseigner Jeedom ou nextdom ligne 85
et les ID des designs autre que menu 1 2 3 …… ici pour une nouvelle installation.

Editer la taille de l’iframe 1290 X 790 afin d’éviter les scrolls

Après il vous reste a copier entièrement le code . Et retourner sur jeedom ou nextdom design menu.
Ajouter un texte/hml et l’agrandir affin qu’il prenne toute la place du design menu

Editer le texte /html et copier le code du menu précédemment modifié dans la zone texte et sauvegarder.

Normalement le menu dois être visible à cette étape, afin de poursuivre l’aménagement de vote design, vous ne travaillerez que sur les sous design 1 2 3 4 ..7 Le design menu étant a ne pas modifier .

Voila le résultat il ne vous restera plus que à aller sur les design 1 2 3… pour y mettre vos donnée équipements … images.

Pour résumer voici une petite vidéo.