[TUTO noodom] Présentation d'un nouveau Design vertical menuVerticalTom avec paramétrage par fichier JSON et navigation par FRAME

Bonjour,

Je vous présente un nouveau menu Design (Enfin disponible depuis quelques temps mais sans son post dédié pour les différents retours).

C’est un menu vertical paramétrable depuis un fichier JSON (déclaration des boutons, définition des icônes assoxiés). Il n’est donc plus nécessaire de modifier le code.

La navigation entre les différents écrans associés aux boutons se fait par une navigation par frame.

Voilà pour les captures (menu ouvert/fermé) :

L’installation détaillée et le code sont accessibles ici :

5 « J'aime »

Bonjour, je viens expliquer mon petit souci.
Apres plusieurs tentative plus ou moins fructueuse, j’ai enfin réussi a mettre en place ce menu sur mon design pour nos 2 smartphones.
Hors, sur la partie haute du menu au-dessus du logo jeedom, j’ai une petite case a cocher qui a l’origine est là pour la gestion du menu.

Si quelqu’un a une astuce pour l’enlevé …
Merci :wink:

1 « J'aime »

Super boulot comme dab
Merci pour ce partage

C’est grâce à vous que la communauté grandit et que jeedom devient ce qu’il est !!

Pour faire suite à nos échanges, je confirme mon impression que c’est un problème de CSS qu’il ne trouve pas.
Tu as simplement les logos et aucun entourage autour et la checkbox est non transformée.

Tu as testé un F12 pour voir si tu avais un problème de récupération du fichier CSS au chargement.
Tu devrais voir une erreur de chargement du fichier dans l’onglet Network ou Réseau selon ta version de navigateur
(demande moi des détails si tu ne vois pas comment vérifier)

Tu peux aussi faire une capture de ton arborescence où ton ficher est inclus (depuis jeeXplorer très pratique pour ça :slight_smile: )

1 « J'aime »

Merci, voici 2 screen de ce que tu m’as demandé (si j’ai bien compris)


Je viens de voir ceci

Donc, en résumé, tu as bien ton perso.css dans l’arborescence (vu dans l’autre post) :
html/montheme/menuVerticalTom/css/perso.css
(et pas le perso.css qu’on voit sur la capture)

Pour les captures de requêtes, il faudrait :

  • Charger ton Design
  • faire F12, sélectionner l’onglet Network
  • effacer les lignes de traces (icone de poubelle)
  • faire F5 pour recharger la page
  • une fois le menu chargé, sélectionner le bouton « JS » pour ne voir que le chargement des fichiers JS pour trouver le fichier perso.css et voir si il est en erreur
  • faire la capture du résultat avec le fichier perso.css visible

Salut, alors j’ai regardé mais dans JS pas vu de perso.css…

Et dans mon arborescence il ya un autre perso.css car c’est un autre menu ( tablette murale). Tout est bon coté arborescence?

Merci pour ton aide.

Oops, erreur de ma part désolé, post écrit trop rapidement.
Il fallait lire sélectionner le bouton « CSS » bien sûr pour voir défiler les fichiers CSS dont perso.css

1 « J'aime »

Pas de souci :slight_smile:

Comme ceci?

Il semble aller dans le cache.
Vide ton cache avant ou lance le design en navigation privée

voici en navigation privée

@greg62 Comme proposé par MP, je te propose de créer un post séparé pour ton problème d’affichage pour ne pas surcharger ce post de présentation du menu.

Merci.

Problème de chargement du menu pour @greg62 résolu :slight_smile:
Pas simple et pas intuitif (même si je me suis déjà fait avoir sur d’autres installations et d’autres menus…).

En fait, il ne faut PAS DE CORRECTEUR ORTHOGRAPHIQUE AUTOMATIQUE paramétré pour le navigateur ! :scream:

le CSS se retrouve traduit automatiquement avec par exemple : ‹ display:none › remplacé par ‹ affichage:aucun › !
Forcément, Chrome est vite perdu :slight_smile:

Problème résolu par @noodom

Un grand merci à lui pour son aide.
Tout ça à cause d’un correcteur :joy:, j’aurais pas su trouvé seul.

Merci pour l’aide, merci à la communauté :v::v:

Bonjour,

J’ai réussi à installer ce menu qui est vraiment bien :+1: , par contre j’aimerais pouvoir l’agrandir.
Il y a t’il une facon particulière pour le faire ?
Merci

Nouveau paramètre ajoutée au menu depuis le fichier de configuration /json/perso.json : init_close_menu

  • "init_close_menu" : "1" : le menu est fermé au chargement du menu
  • "init_close_menu" : "0" : le menu est ouvert au chargement du menu

Ce paramètre est complémentaire du paramètre déjà existant : auto_reduce_menu

  • "auto_reduce_menu" : "1" : le menu est automatiquement fermé après la sélection d’un bouton du menu
  • "auto_reduce_menu" : "0" : le menu reste ouvert après la sélection d’un bouton du menu

Exemples de configuration :

  • "init_close_menu" : "1", "auto_reduce_menu" : "1" : le design se charge avec le menu fermé, s’ouvre en cliquant sur le seul bouton du menu puis se referme sur sélection d’un des boutons du menu.

  • "init_close_menu" : "0", "auto_reduce_menu" : "0" : le design se charge avec le menu ouvert et reste toujours ouvert

Salut,

Pour l’agrandir, il faut modifier le CSS dans le fichier perso.css.
Je n’ai pas prévu de permettre cette possibilité par paramétrage par manque de temps, mais pourquoi pas plus tard.

Si tu a le temps ce serait pas mal effectivement…
Je trouve le menu un peu petit sur la tablette pour cliquer sur les icones…
En tout cas merci d’avoir partager avec nous…

@noodom … hello je sais pas si j’ai mal fait un truc mais tout ce qui est derriere le menu (hors menu ouvert) aucune action n’est possible … cela ne me choque pas vu que mon element html est au dessus de mon iframe … mais je vois pas comment faire …can you help me ?
Comme je sens que je suis pas clair … une image est mieux qu’une explication … :slight_smile:


comme tu peux le voir le menu est de couleur bleu et l’iframe verte …

En effet, c’est une limitation de la superposition des éléments htmlDisplay.
A voir si de futures évolutions pourront permettre de contourner ce problème.