Bonjour
Je vous présente deux styles de menus perso personnisable à volonté pour mes designs.
Fait et réaliser en créant un équipement via le plugin HTMLDisplay et copier le code.
Dès que vous avez placé la barre du menu correctement, aller dans la configuration du composant de l’équipement et bien coché la case couleur de fond transparent et texte par défaut.
Cela fait 1 semaine que c’est en prod chez moi, mais si un développeur passait par là
pour me confirmer ou pas d’un soucis quelconque, je n’en serai pas faché.
Le code correspond à ce menu (perso pour tablette écran 1280x800)
<!--fait avec ma version 4.4 de jeedom -->
<!-- Avoir le plugin html/diplay pour une meilleur utilisation dans le design
une fois le code ajouter via le plugin il ne reste plus qu'à ajouter comme un équipement
et de retrouver le menu et il sera intégré comme un équipement dans votre design.
modifier les tailles boutons barre menu et autre voir plus bas.
Avantage: en cas de modif de style ou autre, toutes les pages design ou l'équipement menu
sera installé se modifieront automatiquement
Bon je vous l'accorde il faut mettre un peu la main dans la poussière, mais finalement
cela se fait très bien et ludique pour comprendre.
<!--Attention fait avec ma version 4.4 de jeedom -->
<!-- Pour ajouter un bouton:
- faire un copier/coller d'un href complet: exemple:
<a href="index.php?v=d&p=plan&plan_id=54" class="menu-item">
<span class="menu-icon">🏠</span> Accueil
</a>
- ne pas oublier de changer l'id de votre page design pour celui ci par exemple; "index.php?v=d&p=plan&plan_id=54"
- Modifier le nom de votre page exemple; Accueil ou ne pas en mettre et seule les icones ou images
s'afficheront
- possible de mettre n’importe qu'elle image ou emoji en respectant la syntaxe
exemple pour icones; <span class="menu-icon">🏠</span> Accueil
exemple avec une images:
<span class="menu-icon">
<img src="/data/img/Perso/Solaire1.png" style="width:30px;height:30px;">
</span> Solaire
</a>
Mettre autant de href que vous voulez d'id page design, ici 10 id et supprimer le reste
Pour le reste vous pouvez vous lâcher sur les apparences voir quelque définitions dans les styles-->
<!--Attention fonctionne avec la version 4.4 de jeedom -->
<!--MENU JEEDOM 4.4 - STYLE ARRONDI, TEXTE BLANC, ICÔNES AGRANDIES AVEC BOUTON ACTIF DOUX -->
<!-- Avoir le plugin html/diplay pour une meilleur utilisation dans le design
une fois le code ajouter via le plugin il ne reste plus qu'à ajouter comme un équipement
et de retrouver le menu et il sera intégré comme un équipement dans votre design.
modifier les tailles boutons barre menu et autre voir plus bas.
Avantage: en cas de modif de style ou autre, toutes les pages design ou l'équipement menu
sera installé se modifiront automatiquement
Bon je vous l'accorde il faut mettre un peu la main dans la poussiere, mais finalement
cela se fait très bien et ludique pour compendre.
<!--Attention fait avec ma version 4.4 de jeedom -->
<!-- Pour ajouter un bouton:
- faire un copier/coller d'un href complet: exemple:
<a href="index.php?v=d&p=plan&plan_id=54" class="menu-item">
<span class="menu-icon">🏠</span> Accueil
</a>
- ne pas oublier de changer l'id de votre page design pour celui ci par exemble; "index.php?v=d&p=plan&plan_id=54"
- Modifier le nom de votre page exemple; Accueil ou ne pas en mettre et seule les icones ou images
s'afficheront
- vous pouver mettre nimporte qu'elle image ou emoji en respectant la syntaxe
exemple pour icones; <span class="menu-icon">🏠</span> Accueil
exemple avec une images:
<span class="menu-icon">
<img src="/data/img/Perso/Solaire1.png" style="width:30px;height:30px;">
</span> Solaire
</a>
Mettre autant de href que vous voulez d'id page design, ici 10 id et supprimer le reste
Pour le reste vous pouvez vous lacher sur les apparences voir quelque definitions dans les styles-->
<!--Attention fonctionne avec ma version 4.4 de jeedom -->
<!--Affichage du nombre de menu avec images et ou texte -->
<div id="menu-jeedom">
<a href="index.php?v=d&p=plan&plan_id=54" class="menu-item">
<span class="menu-icon">🏠</span> Accueil
</a>
<a href="index.php?v=d&p=plan&plan_id=56" class="menu-item">
<span class="menu-icon">ℹ️</span> Info
</a>
<a href="index.php?v=d&p=plan&plan_id=57" class="menu-item">
<span class="menu-icon">
<img src="/data/img/Perso/Solaire1.png" style="width:30px;height:30px;">
</span> Solaire
</a>
<a href="index.php?v=d&p=plan&plan_id=58" class="menu-item">
<span class="menu-icon">🔥</span> Chauffage
</a>
<a href="index.php?v=d&p=plan&plan_id=59" class="menu-item">
<span class="menu-icon">
<img src="/montheme/images/PISCINE.png" style="width:30px;height:30px;">
</span> Piscine
</a>
<a href="index.php?v=d&p=plan&plan_id=60" class="menu-item">
<span class="menu-icon">
<img src="data/img/Perso/Arrosage1.png" style="width:30px;height:30px;">
</span> Arrosage
</a>
<a href="index.php?v=d&p=plan&plan_id=61" class="menu-item">
<span class="menu-icon">🚪</span> Ouvrants
</a>
<a href="index.php?v=d&p=plan&plan_id=62" class="menu-item">
<span class="menu-icon">
<img src="montheme/images/LUMIERE_MINI.png" style="width:30px;height:30px;">
</span> Eclairages
</a>
<a href="index.php?v=d&p=plan&plan_id=63" class="menu-item">
<span class="menu-icon">
<img src="data/img/Perso/Prise2.png
" style="width:40px;height:40px;">
</span> Prises
</a>
<a href="index.php?v=d&p=plan&plan_id=64" class="menu-item">
<span class="menu-icon">
<img src="data/img/Perso/Alarme1.png" style="width:30px;height:30px;">
</span> Sécurités
</a>
</div>
<!--A partir d'ici réglage des styles-->
<style>
/* Menu jeedom, style textes et icônes */
#menu-jeedom {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap; /* Autorise l'alignement sur une seule ou plusieurs ligne automatiquement */
gap: 17px; /* Espace entre bouton */
background-color: rgba(25, 25, 25, 0.45); /* Couleur et transparence douce */
padding: 5px 5px; /* Espace bord haut; bas */
border-radius: 90px; /* coins arrondis de la barre */
box-shadow: 0 2px 2px rgba(0,0,0,0.4); /* Ombre barre */
font-family: "Segoe UI", sans-serif;
backdrop-filter: blur(5px); /* effet de flou ombre de la couleur sur la zone derrière l'élément */
}
/* aspect bouton et du survol des boutons */
#menu-jeedom .menu-item {
color: rgba(255, 255, 255, 3) !important; /* Couleur du text forcé */
text-shadow: 0 0 4px rgba(0, 0, 0, 0.6) !important; /* halo forcé pour lisibilité */
text-decoration: none !important;
padding: 2px 4px; /* Espace bord gauche, bord droit */
border-radius: 30px; /* Coin arrondi bouton */
background: rgba(255, 255, 255, 0.12); /* arriere plan bouton possible de mettre un image */
transition: all 0.3s ease; /* durée retomber du survol des boutons */
font-weight: 500;
font-size: 18px; /* tailles des boutons */
box-shadow: 0 0 5px rgba(255,255,255,0.05) inset;
display: flex;
align-items: center;
}
#menu-jeedom .menu-item:hover {
background: rgba(255, 255, 255, 0.45); /* Couleur survol plus ou moins prononcé */
transform: scale(1.18); /* Zoom survol bouton */
box-shadow: 0 0 15px rgba(0, 170, 255, 0.6), 0 0 20px rgba(0, 170, 255, 0.4) inset; /* Ombre suvol */
}
/* Pour le comportement des boutons quand actif ici avec fond doux et effet halo*/
@keyframes pulseActive {
0% {
transform: scale(1.1);
box-shadow: 0 0 8px rgba(0,0,0,0.2), 0 0 12px rgba(240, 240, 240, 0.5) inset;
}
50% {
transform: scale(1.12);
box-shadow: 0 0 20px rgba(0,0,0,0.3), 0 0 25px rgba(240, 240, 240, 0.8) inset;
}
100% {
transform: scale(1.1);
box-shadow: 0 0 8px rgba(0,0,0,0.2), 0 0 12px rgba(240, 240, 240, 0.5) inset;
}
}
#menu-jeedom .menu-item.active {
background: rgba(0, 30, 255, 0.3) !important; /* Fond clair et doux pour mieux faire ressortir le texte */
color: rgba(255, 255, 255, 0.9) !important; /* Texte pour un bon contraste */
font-weight: 600;
text-shadow: none;
animation: pulseActive 0.8s infinite ease-in-out; /* vitesse pulsation bouton actif */
box-shadow: 0 0 10px rgba(0,0,0,0.2), 0 0 20px rgba(240,240,240,0.5); /* Halo doux */
}
/* Taille des icones ou image*/
#menu-jeedom .menu-icon {
font-size: 22px;
vertical-align: middle;
margin-right: 8px; /* Plus d'espace entre l'icône et le texte */
padding: 0px;
}
</style>
<script>
// Script pour gérer la classe "active" en fonction de l'URL
(function(){
const menuItems = document.querySelectorAll('#menu-jeedom .menu-item');
const currentUrl = window.location.href;
menuItems.forEach(item => {
if(currentUrl.includes(item.getAttribute('href'))) {
item.classList.add('active');
} else {
item.classList.remove('active');
}
});
})();
</script>
Et ici le même (petit menu) pour un petit écran style mobile.
<!-- MENU JEEDOM 4.4 (petit menu) avec que les icônes apparents
juste respecter la syntaxe du href et ne pas oublier de changer l'id de votre page:
<a href="index.php?v=d&p=plan&plan_id=33" class="menu-item" data-tooltip="Accueil">
<span class="menu-icon">🏠</span>
</a>-->
<div id="menu-jeedom">
<a href="index.php?v=d&p=plan&plan_id=33" class="menu-item">
<span class="menu-icon"><i class='icon fas fa-laptop-house icon_yellow'></i></span>
</a>
<a href="index.php?v=d&p=plan&plan_id=51" class="menu-item">
<span class="menu-icon"><i class='icon fas fa-first-aid icon_yellow'></i></span>
</a>
<a href="index.php?v=d&p=plan&plan_id=27" class="menu-item">
<span class="menu-icon"><i class='icon fas fa-solar-panel icon_green'></i></span>
</a>
<a href="index.php?v=d&p=plan&plan_id=53" class="menu-item">
<span class="menu-icon"><i class='icon fas fa-temperature-low icon_yellow'></i></span>
</a>
<a href="index.php?v=d&p=plan&plan_id=31" class="menu-item">
<span class="menu-icon"><i class='icon kiko-pool icon_blue'></i></span>
</a>
<a href="index.php?v=d&p=plan&plan_id=45" class="menu-item">
<span class="menu-icon"><i class='icon kiko-water-supply icon_green'></i></span>
</a>
<a href="index.php?v=d&p=plan&plan_id=36" class="menu-item">
<span class="menu-icon"><i class='icon mdi-window-shutter-alert icon_green'></i></span>
</a>
<a href="index.php?v=d&p=plan&plan_id=35" class="menu-item">
<span class="menu-icon">
<img class='img-responsive' src='data/img/lampe/la_ampoule2_on.png'></span>
</a>
<a href="index.php?v=d&p=plan&plan_id=37" class="menu-item">
<span class="menu-icon"><i class='icon fas fa-plug icon_yellow'></i></span>
</a>
<a href="index.php?v=d&p=plan&plan_id=30" class="menu-item">
<span class="menu-icon"><i class='icon nature-fire14 icon_red'></i></span>
</a>
</div>
<style>
/* Taille et style de la barre menu */
#menu-jeedom {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 2px;
background-color: rgba(25, 25, 25, 0.45); /* transparence douce */
padding: 7px 7px;
border-radius: 40px !important; /* coins arrondis de la barre */
box-shadow: 0 2px 10px rgba(0,0,0,0.4);
font-family: "Segoe UI", sans-serif;
backdrop-filter: blur(5px);
}
#menu-jeedom .menu-item {
color: rgba(255, 255, 255, 0.9) !important; /* texte blanc forcé */
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5) !important; /* halo pour lisibilité */
text-decoration: none !important;
padding: 3px 6px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.12);
transition: all 0.3s ease;
font-weight: 500;
font-size: 10px;
box-shadow: 0 0 5px rgba(255,255,255,0.05) inset;
display: flex;
align-items: center;
}
#menu-jeedom .menu-item:hover {
background: rgba(255, 255, 255, 0.45); /* survol plus prononcé */
transform: scale(1.18);
box-shadow: 0 0 15px rgba(0, 170, 255, 0.6), 0 0 20px rgba(0, 170, 255, 0.4) inset;
}
/* pour le styles apparission des boutons effe halo etc... */
@keyframes pulseActive {
0% {
transform: scale(1.1);
box-shadow: 0 0 8px rgba(0,0,0,0.2), 0 0 12px rgba(240, 240, 240, 0.5) inset;
}
50% {
transform: scale(1.12);
box-shadow: 0 0 20px rgba(0,0,0,0.3), 0 0 25px rgba(240, 240, 240, 0.8) inset;
}
100% {
transform: scale(1.1);
box-shadow: 0 0 8px rgba(0,0,0,0.2), 0 0 12px rgba(240, 240, 240, 0.5) inset;
}
}
#menu-jeedom .menu-item.active {
background: rgba(255, 255, 255, 0.5); /* Fond légèrement plus clair pour un contraste subtil */
color: #222222; /* Texte en gris foncé pour une meilleure lisibilité */
font-weight: 600;
font-size: 12px; /* Ajuste la taille du texte actif */
text-shadow: 0 0 3px rgba(0, 0, 0, 0.6); /* Un ombrage subtil autour du texte actif */
animation: pulseActive 1s infinite ease-in-out;
box-shadow: 0 0 10px rgba(0,0,0,0.2), 0 0 20px rgba(240,240,240,0.5); /* Halo doux */
}
/* Pour la tailles des icônes*/
#menu-jeedom .menu-icon {
font-size: 22px;
vertical-align: middle;
margin-right: 3px; /* Plus d'espace entre l'icône et le texte */
padding: 0px;
}
</style>
<script>
// Script pour gérer la classe "active" en fonction de l'URL
(function(){
const menuItems = document.querySelectorAll('#menu-jeedom .menu-item');
const currentUrl = window.location.href;
menuItems.forEach(item => {
if(currentUrl.includes(item.getAttribute('href'))) {
item.classList.add('active');
} else {
item.classList.remove('active');
}
});
})();
</script>
A votre imagination 