Améliorer son design Jeedom avec un menu bubble

Améliorer son design Jeedom avec un menu bubble

Capture menu bubble

Je vous propose aujourd’hui les sources d’un menu qui a un style arrondi, animé et sobre pour compléter avec simplicité votre design jeedom. Toujours dans l’idée de maximiser l’espace de l’écran pour l’affichage des équipements, ce menu se dépliera au click et permettra d’avoir un accès très rapide à n’importe quelle page de votre design.

Un menu arrondi et animé

Comme vous l’avez peut être vu en preview sur ma page facebook, voici rapidement le rendu en vidéo.

Comme dans le menu full screen, je vous recommande d’afficher vos pages avec une iframe pour faciliter l’usage. Voici un article qui pourrait vous aider à le mettre en place.

Vous trouverez les sources ci-dessous qui sont inspirées d’un code disponible ici : https://codepen.io/simgooder/pen/bVLjgM/.

Télécharger “Archive Menu Bubble” Archive_Menu_Bubble_V1.4.zip – Téléchargé 379 fois – 3 KB

Menu bubble version Mobile

Vous avez été nombreux à demander comment grossir les boutons. Je vous ai préparé une version plutôt mobile avec des icônes plus gros, voici une démo :

Et voici les sources :

Télécharger “Archive Menu Bubble Mobile” Archive-3.zip – Téléchargé 117 fois – 2 KB

J’ai aussi commencé à rendre cette version plus facilement paramètrable en modifiant le code en début du fichier css :

:root {
  --icon-color:white; /*couleur des icônes*/
  --background-color-plus:#333333; /*Couleur du bouton +/x*/
  --background-color-btn:#4e4e4e; /*Couleur des boutons*/
  --btn-size:2.5em; /*Taille des boutons*/
}

Quelques explications du menu « Bubble » pour Jeedom

Vous verrez dans l’archive les mêmes styles de fichier que d’habitude, le fichier html vous permettra de personnaliser la structure de votre menu.

  • J’ai volontairement laissé cette classe vide. Dans l’option 1, le bouton d’affichage du menu s’affichera dans le coin droit de votre champs text/html dans votre design Jeedom. En ajustant la taille, vous positionnerez comme bon vous semble. Dans l’option 2, le menu se positionnera de manière absolue en bas à droite de votre écran, quelque soit sa taille.
<!-- Option 1 -->
<div class="">
    
<!-- Option 2 -->
<div class="menu-container">
  • Ajouter/Changer les icônes en arc de cercle vous sera possible en modifiant la div avec classe « menu-round ». Par contre, nous ne pourrez par contre avoir que 3 boutons dans cette classe.
<div class="menu-round">
	<div class="btn-app">
	    <a href="">
		    <div class="fa fa-users<a href="">"></div>
		</a>
	</div>
	<div class="btn-app">
	    <a href="">
		    <div class="fa fa-cogs"></div>
	    </a>
	</div>
	<div class="btn-app">
	    <a href="">
		    <div class="fa fa-home"></div>
		</a>
	</div>
</div>
  • Ajouter/Changer les icônes en ligne vous sera possible en modifiant la div avec classe « menu-line ».
<div class="menu-line">
	<div class="btn-app">
	    <a href="">
		    <div class="fa fa-lightbulb"></div>
		</a>
	</div>
	<div class="btn-app">
	    <a href="">
		    <div class="fa fa-thermometer-three-quarters"></div>
	    </a>
	</div>
	<div class="btn-app">
	    <a href="">
		    <div class="fa fa-shield-alt"></div>
	    </a>
	</div>
	<div class="btn-app">
	    <a href="">
		    <div class="fa fa-plug"></div>
	    </a>
	</div>
	<div class="btn-app">
	    <a href="">
		    <div class="fa fa-network-wired"></div>
	    </a>
	</div>
</div>

Par contre, vous ne pourrez par contre avoir que 8 boutons dans cette classe. Si vous voulez en rajouter, il vous faudra modifier la fin du fichier menu.css en faisant un copié/collé puis en incrémentant le chiffre entre parenthèses.

.menu-line.open .btn-app:nth-of-type(1) {
  bottom: 4.45em;
}
.menu-line.open .btn-app:nth-of-type(1) {
  bottom: 7.45em;
}
.menu-line.open .btn-app:nth-of-type(2) {
  bottom: 10.45em;
}
.menu-line.open .btn-app:nth-of-type(3) {
  bottom: 13.45em;
}
.menu-line.open .btn-app:nth-of-type(4) {
  bottom: 16.45em;
}
.menu-line.open .btn-app:nth-of-type(5) {
  bottom: 19.45em;
}
.menu-line.open .btn-app:nth-of-type(6) {
  bottom: 22.45em;
}
.menu-line.open .btn-app:nth-of-type(7) {
  bottom: 25.45em;
}
.menu-line.open .btn-app:nth-of-type(8) {
  bottom: 28.45em;
}

Comment « installer » ce menu ?

En attendant, il vous faudra le plugin Jeexplorer pour déposer les fichiers css et js dans un dossier à la racine telle que sur la capture d’écran : mytheme/menu_bubble/ …

vue jeexplorer

Maintenant rendez vous dans le design en question, il vous faudra passer en mode édition en faisant clic droit au milieu de votre écran :

mode édition

Puis il vous faudra ajouter un élément Texte / Html toujours grâce au clic droit :

ajout texte / html

Il vous faudra ensuite faire un nouveau clic droit sur le texte qui est apparu pour afficher les paramètres :

Paramètre d'affichage

Et dans le champs texte vous pourrez copié/collé le contenu du fichier html :

ajout de l'html et changement de position
  • Comme potentiellement votre menu viendra au dessus de votre design, il est important d’augmenter la position.
  • Si vous avez choisi de laisse la classe de la div englobante vide, pensez à mettre une largeur et hauteur.
  • Il vous faudra être vigilant sur les chemins d’accès aux fichiers css et js. Dans mon cas, mytheme/menu_bubble/menu.css ou mytheme/menu_bubble/menu.js.

Comment changer les icônes ou lier ce menu avec vos pages ?

2 autres de mes articles pourront vous intéresser si vous vous posez ces questions :

N’hésitez pas à poser vos questions ou me faire du feedback en utilisant les commentaires.

A bientôt
/F

42 thoughts on “Améliorer son design Jeedom avec un menu bubble

        1. Bonjour,
          Quel est le problème que tu rencontre ?
          Quand je regarde ton code html, je vois que tu as retiré beaucoup de la structure html globale initiale. Quel est ton objectif ? changer les icônes ?

  1. Salut,
    Super le menu bubble… Cependant je ne vois pas où je dois mettre le lien vers chaque design ID ?! 🙂
    Peux tu m’éclairer stp?

  2. J’ai découvert son site il y a quelques jours.
    Quel bonheur pour les débutants de pouvoir profiter de tes supers designs.
    J’essaye d’apprendre les bases du HMTL pour pouvoir me les approprier mais heureusement que tu donnes beaucoup d’explications.

  3. Salut,

    Super ton menu, quel paramètre est à modifier si je le veux en bas à gauche de mon design (pour que les icone se déroulent vers la droite) ?

    1. Bonjour,
      Merci pour le feedback.
      Tu peux regarder dans le fichier menu.css et à chaque fois que tu vois « right: », remplace le par « left: ».
      Et ca devrait basculer ton menu sur la gauche.

  4. Bonjour,

    Merci pour ton article.
    J’ai regardé ton article sur la création des liens entre design, mais je n’arrive pas a le mettre en place avec le bubble.

    Je souhaiterais faire la méthode 1 (copier\coller du menu pour chaque design), méthode la plus simple et j’arrive pas l’appliquer -_-‘.

    Je suis pas contre un petit coup de main ^^.

    Je te remercie par avance et encore top le blog !

      1. Bonjour,

        La ou je bloque c’est pour notifié dans le code que menu-round\fa fa-home pointe vers tel index.

        J’ai essayer avec la commande href :



        cela me créé un nouveau menu.

        ou

        Si tu pouvais juste montrer un exemple de code d’intégration de lien avec le menu bubble et la méthode 1 (copier\coller du menu), je pourrais mieux comprendre stp.

        Je te remercie par avance 😉

        1. Merci pour le feedback. Je viens de mettre à jour les sources html/css pour le rendre plus évident.

          voilà l’exemple, il faudra aussi mettre à jour le fichier css, j’ai fait une petite correction :

          code

          1. Merci pour ton retour et pour l’exemple.

            Pour que cela fonctionne j’ai juste du supprimé la première ligne du fichier HTML, sinon cela faisais planter le design.

            Pour le reste tout est ok !

            Merci !

  5. Sympa 😉
    Pour ma part je suis sur un design unique en 5760×900 ce qui permet de n’avoir aucun temps de chargement. J’utilise maintenant ton menu pour aller juste sur le design des programmes télé et sur un autre pour le trafic de la rocade bordelaise.
    Merci à toi 😉

    1. Bonjour Ma pomme
      Je trouve ton idée excellente! est ce que tu pourrais en dire un peu plus sur la manière dont tu arrives à te déplacer dans ton design unique?
      Merci d’avance pour ton aide

  6. Bonjour,
    Merci pour ton menu, il fait bien envie!
    Par contre j’ai un soucis d’installation. quand je le rajoute à un design, j’ai des erreurs javascript qui empêchent par la suite d’éditer le design:
    Dans getResource.php:
    TypeError: $.hideLoading is not a function
    TypeError: $(…).tooltipster is not a function

    Une idée d’où cela peut venir? Pour info je suis en v4.0.47.

    Merci et bon dimanche!

    1. Bonjour Seb,
      Merci pour le feedback. Je viens de mettre à jour les sources.
      Si tu veux faire la modif, il suffit de retirer la première ligne du fichier html :
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

  7. Bonjour Florian et merci pour ce travail c’est génial! Je débute avec le HTML, j’arrive a implémenter le code et tout semble fonctionnel sur mon design, seulement je ne peux plus faire de clic droit pour retrouver l’édition de mon design une fois que j’ai validé le code. Qu’est ce que j’ai mal fait? merci d’avance pour ton aide!

  8. Bonjour,
    J’ai découvert ce blog hier et les différents articles que tu as postés sont vraiment très intéressants.
    Je viens justement de finir mon design Jeedom et je souhaitais intégrer quelques une de tes idées.
    J’ai déjà commencer à préparer une version en Iframe car c’est vraiment une bonne idée pour ne pas avoir à recopier le menu à chaque fois 😉
    Par contre, en essayant d’utiliser le menu bubble, je n’arrive pas à centrer ma nouvelle icone sur le menu
    Voici ce que ça fait : https://1drv.ms/u/s!AuGxKTWyB0DCj4w078G6R8OnofIIhg?e=HH9OqP

    Au niveau du code, voici ce que j’ai modifié après lecture de plusieurs de tes articles:
    https://1drv.ms/u/s!AuGxKTWyB0DCj4w11N8ouqQQkPggcg?e=YkLaZm

    J’ai mis des liens vers des captures d’écrans, car je n’arrivais pas à insérer du code dans le commentaire .
    Niveau programmation, je suis lvl 0 donc je bidouille en suivant ce que je vois à droite et à gauche 😉

    Merci pour ton retour.

    1. Salut Benoit,
      Merci pour le feedback 🙂
      Saurais-tu me dire la taille de ton icône ? Autre question, y a-t-il une raison particulière à vouloir garder tes propres icônes ? Par exemple, on peut reproduire la bordure/cercle blanc en css autour de l’icône. Il faut modifier la ligne 43 (class btn-app) du fichier menu.css en y ajoutant :
      border: 1px solid #ffffff;
      Si tu veux me contacter par ma page facebook et m’envoyer ton icône pour que je regarde 🙂

  9. Bonjour,

    J’ai utilisé ce super Menu, ça fonctionnait nickel au début, mais là j’ai un petit bug d’affichage (je pense être responsable du bug ;p)
    En fait, la couleur des icones est maintenant grise sur fond gris donc peu visible. Alors que la croix elle est bien Blanche sur fond gris.
    Sais tu comment remettre les bonnes couleurs ?

    Merci d’avance.

    1. Salut,
      Tu devrais avoir selon les modifications que tu as faites line 45 :
      .btn-app a {
      color: #ffffff;
      }
      C’est ici que la couleur des icônes avec un lien se changent 🙂

  10. Merci pour ton retour.
    En fait ça ne vient pas de là.
    Depuis que je suis en V4, j’ai l’impression que le thème de mon jeedom change en fonction de l’heure. En effet ce soir j’ai un thème sombre quand je me connecte sur jeedom, et le menu buble est identique à celui que vous proposez.
    Alors que pendant la journée mon Jeedom était en thème clair et là j’avais une différence d’affichage sur le menu buble.
    Pourtant je n’ai pas activé de thème en fonction de l’heure …

    1. As-tu bien vérifié dans système/configuration/interfaces/Basculer le thème en fonction de l’heure ?
      J’avais aussi mis les thèmes « principal » et « alternatif » à l’identique dans mon cas Core2019 Light, histoire que ca n’est pas d’impact.

  11. Merci en effet je suis allé dans les paramétres et il y avait un changement de thème en fonction des heures.
    Cela créé un problème en thème light avec le menu Bubble.

    Dernière petite question pour bien m’approprier ton menu.
    Est-il possible d’avoir un exemple de la modif à faire quand on veut changer un des icones ? J’ai bien lu l’article mais je ne comprends pas comment on fait la modif par exemple pour mettre un icone à sois ?

    Encore merci pour ton excellent travail

  12. Bonjour, j’adore ton menu Bubble ! Il est vraiment super ! 👍 Mais, malheureusement, je n’arrive pas du tout à ce résultat, et je ne trouve pas pourquoi 😔. L’apparence n’a rien à voir…
    Je pense que c’est normal, vu que je commence à peine à m’intéresser au Css, donc je pédale dans la semoule !
    Serait-il possible de se contacter en mp via Messenger (je t’ai laissé le même message sur Facebook) ? Merci d’avance et encore bravo pour ton magnifique boulot !

  13. Bonsoir
    très beau menu
    je l’ai installé sur mon design en suivant le tuto
    le menu reste static
    je pense qu’il faut positionner les fichiers .css et .js sur un chemin particulier
    pouvez vous m’aider
    cordialement
    pierre

    1. Bonjour,
      merci pour le feedback 🙂
      En effet, j’en parle dans l’article : mytheme/menu_bubble/
      Et à modifier aussi dans le code html du menu en fonction de la ou tu déposes les fichiers.

      1. bonsoir
        merci pour la réponse
        A quel endroit faire la modif
        j’ai suivi le tuto et j’ai mis les fichiers .css et .js sous la racine html dans le répertoire mytheme/menu_bubble/
        cordialement
        pierre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *