wojc
Juin 7, 2020, 3:40
1
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.
J’aimerais que lorsque je clique sur la pièce « Salon » de mon iframe, le bouton Salon de mon sous-menu s’active comme sur la photo suivante:
Est-ce possible.
Merci pour votre aide.
Salut,
Tu peux t’inspirer de ce sujet :
Salut,
Suite à plusieurs demandes pour intégrer la sélection de la page en cours sur les designs avec le plugin HtmlDisplay, je me suis penché sur le sujet.
J’ai adapté le menu de f$b33 avec une fonction javascript pour ajouter la classe selected (éventuellement à remplacer par le nom de la classe concernée).
Le numéro d’id de chaque élément du menu correspond au numéro d’id de la page du design concerné et est donc à renseigner.
Menu f$b33 modifié:
<LINK href="montheme/perso.css" rel="st…
Si tu as besoin de plus d’aide il faudra partager le code de ton menu
wojc
Juin 7, 2020, 4:10
3
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
iPapy
Juin 8, 2020, 5:20
5
Bonjour,
Sympa ton menu, ça change
wojc
Juin 8, 2020, 9:32
6
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.
wojc
Juin 16, 2020, 6:00
8
Bonjour,
Aucune petites nouvelles pour m’orienter?
Merci.