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é 955 fois – 3 Ko

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é 1224 fois – 2 Ko

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/ …

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

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

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

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

• 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 :

• Si toutefois vous voulez changer les icônes, en rajouter, ou autres … voici un article dédié à la librairie gratuite que j’utilise.
• Pour lier vos pages à ce menu et assurer une navigation fluide, je vous propose 2 options dans cet article.

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

A bientôt
/F