vendredi, avril 19, 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
Ingénieur, spécialisé dans les infra IT, et les réseaux informatique. J’ai découvert la domotique en 2009, et depuis cela est devenu une passion grandissante. Je suis maintenant le gérant de Nord-Domotique

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Suivez nous sur nos réseaux sociaux :

712FansJ'aime
141SuiveursSuivre
1,857SuiveursSuivre
199AbonnésS'abonner

les articles les plus lus actuellement :

Test du robot tondeuse Husqvarna Nera 320

7
Présentation du robot tondeuse Husqvarna Nera 320. Aujourd'hui je vous présente le test du robot tondeuse Husqvarna Nera 320 de la nouvelle gamme Automower® NERA....