lundi, juillet 15, 2024
AccueilBox DomotiqueJeedomPrésentation d’un menu css sous jeedom / nextdom

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 »

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

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 .

design-menu-1-7 Présentation d’un menu css sous 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

logo-jeedom-grand-nom-couleur-2008x1536-1-300x229 Présentation d’un menu css sous jeedom / nextdom
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

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

Pour nextdom

nextdom-wide-alphablackblue-300x145 Présentation d’un menu css sous jeedom / 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

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

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/themesmenu-a-editer Présentation d’un menu css sous jeedom / nextdom
Et renseigner Jeedom ou nextdom ligne 85
et les ID des designs autre que menu 1 2 3 …… ici pour une nouvelle installation.

menu-edition-1-1000x577 Présentation d’un menu css sous jeedom / nextdom

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

edition-menu-1000x856 Présentation d’un menu css sous jeedom / nextdom

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

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

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

coller-le-texte-1000x533 Présentation d’un menu css sous jeedom / nextdom

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.

menu-1-1000x613 Présentation d’un menu css sous jeedom / nextdom

Pour résumer voici une petite vidéo.

 

Veuillez noter que cet article peut comporter des liens affiliés, sans impact sur vos achats ou les prix des produits. En utilisant ces liens, vous exprimez votre reconnaissance pour le travail quotidien fourni sur le blog et soutenez le financement des dépenses du site, telles que l'hébergement, les frais de port, l'achat de produits pour les tests et les concours. Cela ne vous engage à rien financièrement, mais cela représente une aide précieuse pour moi ! Un grand merci à ceux qui participent à cette démarche !"

Kragg
Kragg
Kragghttp://www.nord-domotique.com
Fort de 22 années d'expertise dans le domaine de l'IT, Je suis responsable des réseaux et télécoms, j'ai été séduit par la domotique et les objets connectés dès 2009, une passion qui n'a cessé de croître depuis. Explorez avec moi une décennie d'aventures et de découvertes sur mon blog, où je partage mes expériences et analyses.

4 Commentaires

  1. Bonjour

    Bravo pour ce super menu que je cherche a mettre en place, tout se passe bien mais j’ai une erreur et du coup ben ça marche pas 🙁

    index.php?v=d&p=plan&plan_id=50 188 Uncaught TypeError: Cannot read property ‘split’ of undefined

    une idée ?

    Merci

LAISSER UN COMMENTAIRE

S'il vous plaît entrez votre commentaire!
S'il vous plaît entrez votre nom ici

Suivez Nous !

716FansJ'aime
1,469SuiveursSuivre
1,857SuiveursSuivre
236AbonnésS'abonner

Nos articles les plus consultés en ce moment

Segway Navimow I108E : Découvrez notre test complet

Présentation du robot tondeuse Navimow I108E Aujourd'hui, je vous propose le test du nouveau robot tondeuse de chez Segway le Navimow i108E ! Si vous...

Test du kit Zendure SolarFlow Hub 2000 et AB2000

Présentation du kit complet Solaire Zendure SolarFlow Hub 2000, AB2000. Aujourd'hui, je ne vous propose pas un seul test, mais un test complet de l'écosystème...

Participez à notre Jeu-Concours pour gagner un Super Équipement pour votre Robot Tondeuse Navimow !

Présentation de notre jeu-concours Navimow Vous êtes prêt(e)s à équiper votre robot tondeuse Navimow avec les meilleurs accessoires ? Ne cherchez pas plus loin !...

Test du Shelly Pro 3EM avec le Kit Zendure SolarFlow

Présentation du Shelly Pro 3EM Dans l'univers de la domotique et de la gestion énergétique, le Shelly Pro 3EM se distingue comme un produit innovant...

Test de Beem On : La station solaire à brancher en quelques secondes.

Présentation de Beem On Dans une démarche constante d'innovation, Beem élargit son éventail de solutions solaires plug & play avec l'arrivée de Beem On !...