Bonjour,
J’ai fait mon design à l’aide du tuto de FSB33 ça marche top.
Aujourd’hui je souhaite me faire un design pour mon téléphone mobile.
Je voudrai faire un menu dans ce style:
Quelqu’un peux m’expliquer quoi récupérer du code et où le mettre svp?
Pour le Html pas de soucis je vois bien où le mettre mais pour le css?
Comme vous vous en douter je ne suis pas un as du code 
Hello,
Dans configuration > personnalisation avancée, tu as la possibilité de mettre du css qui va être appliqué en général.
Sinon tu peux aussi dans ton code html mettre le css fans des balises <style></style>
Salut tetiti20
J’ai utilisé le même goo menu dans mes desings pour mon menu.
ce que j’ai fait, j’ai mis dans un fichier html le code du bouton (pour moi navigation entre mes design) dans un répertoire custom dans jeedom
j’ai mis le css associé dans une feuille de style a coté que j’appelle dans le html :
<link rel="stylesheet" type="text/css" href="custom_files/css/goo-menu-css.css">
tout en haut de mon html
dans mes script perso (customization → js) j’ai mis la fonction includeHtml qui inclue du html à la volée :
function includeHTML() {
var z, i, elmnt, file, xhttp;
/* Loop through a collection of all HTML elements: */
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-html");
if (file) {
/* Make an HTTP request using the attribute value as the file name: */
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/* Remove the attribute, and call this function once more: */
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/* Exit the function: */
return;
}
}
}
=> dans mes design un equipement text => avec :
<div w3-include-html="custom_files/html/Bonton_Nav.html">test</div>
<script>
includeHTML();
</script>
comme ça j’ai mes menu identiques pour la navigation sur tout mes design et je maintient un seul fichier (plutôt que d’aller ds chaque design…!)
Note : je n’ai pas encore explorer le plugin « html display » sui doit pouvoir s’adapter
Salut Bben,
Merci pour ta réponse rapide! c’est exactement ce que je veux faire, navigation entre mes designs.
Du coup si j’ai bien compris,
je me fais les répertoire custom_files/html et custom_files/css
je crée un fichier « Bonton_Nav.html » avec le code du goo menu => si tu peux partager le tiens du coup 
je crée le fichier « goo-menu-css.css » avec le code du goo menu css => si tu peux partager le tiens aussi 
je crée le sript avec ton code comment? est-ce possible avec le plugin script?
sur mon design j’insère un texte/html avec le lien vers l’html du bouton et l’appel du scrip.
Effectivement pour le coup si on peux rentrer tout ça direct dans le plugin htmldisplay ce serais le top!
Histoire de pas mettre trop de fichier partout. malheureusement on trouve pas d’info ou tuto sur ce plugin
Bonjour @Domotech
J’aime bien l’idée de rajouter le css direct dans le html mais à quel endroit faut-il tout mettre?
Merci
C’est ce que j’ai fait, au début de mon utilisation de jeedom. Y’a peut être plus adapté comme html/desktop/custom ou html/mobile/custom [edit] ou plutôt html/data/customTemplate [/edit]. Très sincèrement je ne sais pas si l’un ou l’autre peuvent poser pbs. Faut juste pointer au bon endroit.
Mes fichier :
Bonton_Nav.html.txt (2,1 Ko) goo-menu-css.css.txt (4,6 Ko)
(enlever les .txt !)
Ca ne change pas grd choses par rapport à l’exemple que tu donne. J’ai un poil plus ciblé le css pour éviter certaines interaction.
J’ai changé la direction ds laquelle s’ouvre le menu également, et les couleurs…
Pour le javascript (includeHTML) je l’ai mis dans Réglage->Système->Personalisation avancée dans l’encart Javascript (pour moi ds l’onglet desktop)
→ tu peux mettre du css également, qui sera importé partout (ce que propose Domotech au dessus)
Pour mes -courts- tests avec le plugin HTML display, j’avais un pb d’affichage : il faut que l’encart qui contient l’équipement soit supérieur à la taille du menu, et comme je part vers la gauche pour moi fallait surajouter su css pour le caler à droite sans rien bouger (suis une quiche aussi), et ça m’oblige à revenir ds mes design pour réadatper la taille au changement de menu.
Merci pour le partage.
voilà ce que j’ai pour le moment:
Faut-il ajouter des images pour l’icone du menu?
Malheureusement ça ne fonctionne pas il semble il y avoir un soucis au niveau du CSS.
Voilà le log de mon chrome sur la page avec seulement le menu…
css3:1 Failed to load resource: the server responded with a status of 404 (Not Found)
css3:1 Failed to load resource: the server responded with a status of 404 (Not Found)
DevTools failed to parse SourceMap: chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.preload.js.map
DevTools failed to parse SourceMap: chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.postload.js.map
le problème semble lier à @import « compass/css3 » du fichier css
Un idée?
Merci
Dans l’editeur de code là ou tu as choppé le menu, tu as probablement dans le menu du css « view compiled css »
qui te donnera le code css propre
[Edit] Attention, utiliser le fichier html que j’ai linké avec le css du menu que tu montres à de fortes chances de ne pas fonctionner!
Pour le coup je viens de faire avec tout ton code ça fonctionne bien.
En tout cas truc mega important que je viens de piger grâce a toi !
C’est qu’il faut mettre le compiled css dans le fichier 
En fait quand j’ai mis dans le fichier css j’avais pas sauvegarder semble t-il! (quelle truffe )
En attendant c’est nickel! c’est pile poil ce que je voulais pour le téléphone pour faire avec le pouce droit. Ou peut être un menu mais juste dans l’angle en 1/4 de cercle.
Il me reste à creusé le reste pour tout faire fonctionner je m’y replonge bientôt pour mettre les bonne pageid et icones
Grand merci @Bben tu devrais en faire un tuto
content que ça serve!
Y’a plein de truc super pour faire des menus full css (ou avec un poil de js)
J’en ai qques uns également pour quelques commandes, et ça libère de l’espace sur les designs.
en attendant je galère sur des conneries…
j’ai fait mon design pour un tablette sous Windows no problem pour la résolution du design
Mais là sur un téléphone android c’est très obscurs par defaut il y a un zoom et j’arrive pas à avoir la bonne résolution pour ne pas avoir de scroll bar
Bonjour à vous !
Je tiens à vous remercier pour ce menu que j’ai pu adapter sur mon design, depuis le temps que je voulais en faire un !
Je bute sur 2 choses : la position des icônes une fois le menu déroulé (elles sont décalées vers le bas, je cherche à les centrer) et un problème de couleur entre les bulles, blanchie, qui n’est pas encore très grave.
Je ne m’y connais pas trop en css, j’ai tenté plein de modification mais rien n’y fait…
@Bben tu saurais m’aider ?
D’avance merci ! 
bonjour
merci pour les infos
@Bben juste une question, la menu s’ouvre vers la gauche, il faut modifier quoi pour qu’il parte à droite ?
Salut Nemeraud,
C’est dans le CSS, il faut modifier les trasnform des .menu-goo .menu-open:checked ~ .menu-item:nth-child(X)
Il y a les 3 coordonnées, tu peux même faire des diagonales!*
Pour moi le x est négatif pour ouvrir vers la gauche. Il suffit de passer en positif
La valeur est fonction de la taille des tes items.
marche nickel, j’ai mis le html + css dans le plugin HTML
je te derange avec une derniere question, j’ai voulu changer la couleur, j’ai changé les 2 endroits où j’ai trouvé un code couleur mais les zones entre les ronds restent dans ta couleur initiale
qd je change la propriété bakground de .menu-goo .menu-item, .menu-goo .menu-open-button ça modifie la couleur du menu.
@Nunchy, désolé, quiche ici aussi en css. En générale je passe par la console de mon navigateur pour tester la modif de propriétés
Chez moi les icones sont centrées, quelque soit l’orientation, même en diagonale!
j’ai bien changé :
.menu-goo .menu-item,.menu-goo .menu-open-button {
background: #0099FF;
.menu-goo .menu-item:hover {
background: white;
color: #0099FF !important;
Mais entre les ronds, c’est toujours la couleur bleue plus claire, la tienne
marrant ça, j’ai mis tes valeurs et je n’(ai pas ce résultat :
ça ressemble plus à du blanc qu’à la couleurs que j’ai utilisé.
Tu es sous quel navigateur?
je suis sous Chrome
Ah oui, sous chrome j’ai un léger dégradé :
mais pas aussi marqué que chez toi.
Je penche pour l’interprétation du filtre #shadowed-goo
en noir c’est encore plus marqué :
y’a une sorte de dropshadowfilter blanc. Je ne vois pas d’ou ça peut venir…