Bonjour à tous,
Voilà, j’ai créé un menu avec HTML Display dont les bouton activent des pages sur une iframe.
Lorsque je clique sur le bouton de mon menu « Pièces », j’ai un sous-menu avec toutes mes pièces et une iframe qui affiche toutes mes pièces.
Salut,
Tu peux t’inspirer de ce sujet :
Si tu as besoin de plus d’aide il faudra partager le code de ton menu 
Merci Salviaf,
voici le code du menu HTML Display :
<link rel="stylesheet" type="text/css" href="mytheme/Dashboard/menu.css">
<div class="page-wrapper chiller-theme toggled">
<nav id="sidebar" class="sidebar-wrapper">
<div class="sidebar-content">
<div class="sidebar-brand">
<img class="img-jeedom" src="mytheme/Dashboard/img/logo-jeedom.png"/>
</div>
<!-- -->
<div class="sidebar-menu">
<ul>
<!-- Accueil -->
<li class="active sidebar-dropdown">
<a href="#" onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=73&fullscreen=1#section1'">
<i><img class="Acceuil" src="/mytheme/Dashboard/img/Acceuil.png" height=33 width=35 alt=""></i>
<span class="nav-text">ACCEUIL</span>
</a>
</li>
<!-- Accueil -->
<!-- Pièces -->
<ul>
<li class="sidebar-dropdown">
<a href="#" onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=87&fullscreen=1#section1'">
<i><img class="Pieces" src="/mytheme/Dashboard/img/Pieces.png" height=33 width=35 alt=""></i>
<span class="nav-text">PIECES</span>
</a>
<div class="sidebar-submenu">
<ul>
<li>
<a href="#" onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=87&fullscreen=1#section2'">
<span class="jeedomapp-circlevalidation"></span>
<img class="Salon" src="/mytheme/Dashboard/img/Salon.png" height=33 width=35 alt=""/>
<span id="nav-text-Salon" class="nav-text">Salon</span>
</a>
</li>
<li>
<a href="#" onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=87&fullscreen=1#section3'">
<span class="jeedomapp-circlevalidation"></span>
<img class="SAM" src="/mytheme/Dashboard/img/SAM.png" height=33 width=35 alt=""/>
<span class="nav-text">Salle à Manger</span>
</a>
</li>
<li>
<a href="#" onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=87&fullscreen=1#section4'">
<span class="jeedomapp-circlevalidation"></span>
<img class="Cuisine" src="/mytheme/Dashboard/img/Cuisine.png" height=33 width=35 alt=""/>
<span class="nav-text">Cuisine</span>
</a>
</li>
<li>
<a href="#" onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=87&fullscreen=1#section5'">
<span class="jeedomapp-circlevalidation"></span>
<img class="Entree" src="/mytheme/Dashboard/img/Entree.png" height=33 width=35 alt=""/>
<span class="nav-text">Entrée</span>
</a>
</li>
<li>
<a href="#" onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=87&fullscreen=1#section5'">
<span class="jeedomapp-circlevalidation"></span>
<img class="Couloir" src="/mytheme/Dashboard/img/Couloir.png" height=33 width=35 alt=""/>
<span class="nav-text">Couloir</span>
</a>
</li>
<li>
<a href="#" onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=87&fullscreen=1#section6'">
<span class="jeedomapp-circlevalidation"></span>
<img class="ChambreParents" src="/mytheme/Dashboard/img/Chambre1.png" height=33 width=35 alt=""/>
<span class="nav-text">Chambre Parents</span>
</a>
</li>
<li>
<a href="#" onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=87&fullscreen=1#section9'">
<span class="jeedomapp-circlevalidation"></span>
<img class="Bureau" src="/mytheme/Dashboard/img/Bureau.png" height=33 width=35 alt=""/>
<span class="nav-text">Bureau</span>
</a>
</li>
<li>
<a href="#" onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=87&fullscreen=1#section10'">
<span class="jeedomapp-circlevalidation"></span>
<img class="SDB" src="/mytheme/Dashboard/img/SDB.png" height=33 width=35 alt=""/>
<span class="nav-text">Salle de bain</span>
</a>
</li>
<li>
<a href="#" onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=87&fullscreen=1#section11'">
<span class="jeedomapp-circlevalidation"></span>
<img class="Buanderie" src="/mytheme/Dashboard/img/Buanderie.png" height=33 width=35 alt=""/>
<span class="nav-text">Buanderie</span>
</a>
</li>
<li>
<a href="#" onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=87&fullscreen=1#section12'">
<span class="jeedomapp-circlevalidation"></span>
<img class="Garage" src="/mytheme/Dashboard/img/Garage.png" height=33 width=35 alt=""/>
<span class="nav-text">Garage</span>
</a>
</li>
</ul>
</div>
</li>
<!-- Pièces -->
<!-- LUMIERES -->
<div id="light" class="cmd">
<li class="sidebar-dropdown">
<a href="#" onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=73&fullscreen=1#section3'">
<i><img class="Lumieres" src="/mytheme/Dashboard/img/light100.png" height=33 width=35 alt=""></i>
<span class="nav-text">LUMIERES</span>
<span class="NbLumieres badge yellow"></span>
</a>
</li>
</div>
<script>
var NbLumieres=5286;
$('#light')[0].setAttribute('data-cmd_id', NbLumieres);
jeedom.cmd.update[NbLumieres] = function(_options){
jeedom.cmd.execute({ id: NbLumieres, success: function(valeur_courante) {
$('.NbLumieres').empty();
if (valeur_courante == 0 ) { $('.NbLumieres').css('color', '');
$('.yellow').hide();} // Cache le badge si 0
else { $('.NbLumieres').css('color', '#00008B').append(valeur_courante);
$('.yellow').show()
}
}})
};
jeedom.cmd.update[NbLumieres]();
</script>
<!-- LUMIERES -->
<!-- VOLETS -->
<div id="curtain" class="cmd">
<li class="sidebar-dropdown">
<a href="#" onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=73&fullscreen=1#section4'">
<i><img class="Volets" src="/mytheme/Dashboard/img/Icon_Volets.png" height=33 width=35 alt=""></i>
<span class="nav-text">VOLETS</span>
<span class="NbVolets badge jaune"></span>
</a>
</li>
</div>
<script>
var NbVolets=5300;
$('#curtain')[0].setAttribute('data-cmd_id', NbVolets);
jeedom.cmd.update[NbVolets] = function(_options){
jeedom.cmd.execute({ id: NbVolets, success: function(valeur_courante) {
$('.NbVolets').empty();
if (valeur_courante == 0 ) { $('.NbVolets').css('color', '');
$('.jaune').hide();} // Cache le badge si 0
else { $('.NbVolets').css('color', '#00008B').append(valeur_courante);
$('.jaune').show()
}
}})
};
jeedom.cmd.update[NbVolets]();
</script>
<!-- VOLETS -->
<ul>
<!-- Température -->
<li class="sidebar-dropdown">
<a href="#" onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=73&fullscreen=1#section5'">
<i><img class="Temperature" src="/mytheme/Dashboard/img/Icon_Temp2.png" height=33 width=35 alt=""></i>
<span class="nav-text">TEMPERATURES</span>
</a>
</li>
<!-- Température -->
<!-- Chauffage Clim -->
<li class="sidebar-dropdown">
<a href="#" onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=73&fullscreen=1#section6'">
<i><img class="Chauffage" src="/mytheme/Dashboard/img/Icon_Chauffage.png" height=33 width=35 alt=""></i>
<span class="nav-text">CHAUFFAGE CLIM</span>
</a>
<div class="sidebar-submenu">
<ul>
<li>
<a href="#" onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=39&fullscreen=1#section6'">
<span class="jeedomapp-circlevalidation"></span>
<img class="SALON" src="/mytheme/Dashboard/img/Icon_Chauffage.png" height=33 width=35 alt=""/>
<span class="nav-text">Salon</span>
</a>
</li>
<li>
<a href="#" onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=39&fullscreen=1#section6'">
<span class="jeedomapp-circlevalidation"></span>
<img class="SDB" src="/mytheme/Dashboard/img/confort.png" height=33 width=35 alt=""/>
<span class="nav-text">Salle de bain</span>
</a>
</li>
</ul>
</div>
</li>
<!-- Chauffage Clim -->
<!-- Extérieur -->
<li class="sidebar-dropdown">
<a href="#" onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=39&fullscreen=1#section10'">
<i><img class="Exterieur" src="/mytheme/Dashboard/img/Icon_Jardin2.png" height=33 width=35 alt=""></i>
<span class="nav-text">EXTERIEUR</span>
</a>
<div class="sidebar-submenu">
<ul>
<li>
<a href="#" onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=39&fullscreen=1#section11'">
<span class="jeedomapp-circlevalidation"></span>
<img class="JARDIN" src="/mytheme/Dashboard/img/Icon_Jardin2.png" height=33 width=35 alt=""/>
<span class="nav-text">Jardin</span>
</a>
</li>
<li>
<a href="#" onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=39&fullscreen=1#section12'">
<span class="jeedomapp-circlevalidation"></span>
<img class="PISCINE" src="/mytheme/Dashboard/img/Icon_Piscine.png" height=33 width=35 alt=""/>
<span class="nav-text">PISCINE</span>
</a>
</li>
</ul>
</div>
</li>
<!-- Extérieur -->
<script src="mytheme/Dashboard/menu.js"></script>
Merci de ton aide…
OK à priori tu peux t’en sortir sans trop de difficultés avec l’exemple du lien que j’ai partagé plus haut.
Comment tu passes la classe active aux différents menus dropdown actuellement ? C’est le même principe pour le sous-menu
Bonjour,
Sympa ton menu, ça change
Voici le code JS pour la classe active des menus et sous-menu :
$(".sidebar-dropdown > a").click(function() {
$(".sidebar-submenu").slideUp(200);
if (
$(this)
.parent()
.hasClass("active")
) {
$(".sidebar-dropdown").removeClass("active");
$(".sidebar-submenu li").removeClass("active");
$(this)
.parent()
.removeClass("active");
} else {
$(".sidebar-dropdown").removeClass("active");
$(".sidebar-submenu li").removeClass("active");
$(this)
.next(".sidebar-submenu")
.slideDown(200);
$(this)
.parent()
.addClass("active");
}
});
$(".sidebar-submenu li").click(function() {
if (
$(this)
.hasClass("active")
) {
$(".sidebar-submenu li").removeClass("active");
$(this)
.removeClass("active");
} else {
$(".sidebar-submenu li").removeClass("active");
$(this)
.addClass("active");
}
});
Pour ce qui est de ton exemple, il ne correspond pas tout à fait à ce que je veuxréaliser.
J’arrive déjà à activer les boutons menu et sous-menus de HTML Display.
Ce qui me manque, c’est de pouvoir cliquez sur le bouton d’une iframe qui me renvoi à la page souhaitée et active de ce fait le bouton du menu HTML Display pour que l’on sache sur quelle page l’on se trouve.
Merci de ton aide.
Merci, sympa.
Bonjour,
Aucune petites nouvelles pour m’orienter?
Merci.