[tuto] Design - menu slide - corps scroll (Suite de l'ancien Forum)

Hello, après pas mal de recherche et de test, j’ai réussi à faire fonctionner le principe du Design Menu et Design Coprs de winhex dans mon jeedom V4.
J’ai mixer ça avec un peu de « Ma-maison-intelligente » pour arriver à quelque chose qui me convient en fonctionnement. Mes Design ne sont pas encore terminés.

Je propose de vous partager mes fichiers, par contre, c’est beaucoup de tatonnemen, n’étant pas un codeur dans l’âme.

Le fichier du menu à mettre dans /montheme/menu_light_fix2
menu.css.txt (2,3 Ko)
(supprimer .txt et copier le fichier)

Dans le Design MENU (à créer si pas déjà fait) :
ajouter Texte/HTml pour le menu et copier le contenu du fichier suivant :
menu-design.txt (2,7 Ko)

ajouter Texte/Html pour l’iframe, qui affichera le contenu des Design :
iframe-menu-Design.txt (218 Octets)

Ensuite, créer un Design CORPS, qui comportera une zone Texte/HTML avec le contenu du fichier suivant :
Design-corps.txt (1,3 Ko)

Attention, il faut adapter les paramètres des Design Menu et Corps à votre affichage.
Dans mon cas, pour ce Design exemple, il s’agit d’un écran RPI officiel 7’’.

Là s’arrête ma modeste contribution.

1 J'aime

merci beaucoup pour ta ténacité et le partage

je vais pas de laisser à rien faire :grinning:

pour ton info, inspiration.

mettant donné 2,3 mois avant migration v4. avec pour but du full html (sans certitude d’y arrivé mais ça permet de s’ouvrir et toujours apprendre)
j’en connais guère mieux mais maintenant c’est le côté designer très peu abordé que je regarde (outils,…)

donc outils
d’abord le logiciel en ligne « figma »
regarde les vidéos
ex

j’aimerai voir le design de jeedom évolué comme figma. c’est gratuit de rêver. non pas que se soit impossible mais j’imagine même pas la somme d’heures pour y arriver donc je rêve.

ensuite tu as des plug, des videos pour reprendre le html, css

ensuites certains themes actuel
ex Neumorphic

le dernier me plais bien

ensuite un carnet un stylo de se que tu veux.

1 J'aime

Effectivement, le Neumorphic, ça donne des idées !!!
Mais j’ai peur d’y passer tout mon temps libre.
Déjà que là, j’ai dépassé mon quota WAF !!

1 J'aime

rien ne presse, surtout lorsqu’il fait beau.
laisse la graine germer ou pas.

si ta domotique est fonctionnel c’est pas vitale. mais quand même :grinning:
le waouh

Rien ne presse.
Mon Design est plutôt Flat et ça me va.
Capture d’écran 2020-05-28 à 17.12.38

Même sans l’effet whaou !
On ne sais jamais pour une prochaine évoluton.

Quelqu’un aurait-il le code pour avoir les cadres avec les bandeaux. Le lien dans les messages ne fonctionne plus.

Merci

https://forum.jeedom.com/viewtopic.php?t=40889

avant qu’il disparaisse (prévu le 29 déc. 2020) si les règles de l’ancien forum n’ont pas changé ?
1an aprés le dernier message

Neumorphism Smarthome Mobile UI

image

<div class="Air_Conditioner">
 <div class="Snowflake_Icon">
<svg width="27" height="29" viewBox="0 0 27 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.545 20.2742V22.856C16.545 23.8066 15.7744 24.5772 14.8238 24.5772H11.3814C10.4308 24.5772 9.66016 23.8066 9.66016 22.856V20.2742" stroke="#050505" stroke-width="1.7212" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13.1025 1.34099V3.06219" stroke="#050505" stroke-width="1.7212" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1.05408 13.3894H2.77528" stroke="#050505" stroke-width="1.7212" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3.63599 4.7834L4.8982 5.99627" stroke="#050505" stroke-width="1.7212" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M25.1509 13.3894H23.4297" stroke="#050505" stroke-width="1.7212" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22.5691 4.7834L21.3069 5.99627" stroke="#050505" stroke-width="1.7212" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.56266 20.2742H16.6425C19.2518 18.9791 20.8869 16.3021 20.848 13.3894C20.7727 9.14333 17.3487 5.71933 13.1026 5.644C8.85477 5.7194 5.43008 9.14613 5.35719 13.394C5.32003 16.3051 6.95491 18.9798 9.56266 20.2742V20.2742Z" stroke="#050505" stroke-width="1.7212" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13.1025 24.5772V27.159" stroke="#050505" stroke-width="1.7212" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13.1025 15.9712V20.2742" stroke="#050505" stroke-width="1.7212" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.5208 13.3894L13.1026 15.9712L15.6844 13.3894" stroke="#050505" stroke-width="1.7212" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
 </div>
 <div class="Information">
     <div class="_80F">80ºF</div>
  <div class="Luminaire">Luminaire</div>

 </div>
 <div class="Toggle">
  <p class="Background"></p>
  <div class="Indicator_Dot">
   <svg>...</svg></div>
 </div>

  <style>
    .Air_Conditioner {
line-height: 20px;
      width: 100%;
      height: 100%;
      background: #ebecf0;
      border: 1px solid rgba(255, 255, 255, 0.4);
      border-radius: 20px;
      box-shadow: 5px 5px 10px rgba(166, 170, 188, 1),-5px -5px 10px rgba(249, 250, 255, 1);
         }
svg {
            margin-left:10px;
  margin-top: 10px;
  height: 30px;

}
    .Information {
          font-family: Helvetica;
            margin-left:10px;
     }
    .Luminaire {
      color: #798794;
      font-size: 14px;
      font-weight: normal;
    }
   ._80F {
      color: #050505;
      font-size: 16px;
      font-weight: 700;
    }
  </style>
</div>

Merci beaucoup pour ces codes !

sans iframe
un long design (360x12600)
qu’on séparé de section


on peut bloquer le scroll,…
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,300,700,100' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Raleway:300,700,900,500' rel='stylesheet' type='text/css'>
<style>
  /*! Pushy - v0.9.2 - 2014-9-13
* Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions.
* https://github.com/christophery/pushy/
* by Christopher Yee */

/* Menu Appearance */
:root {
  --url: url("https://community.jeedom.com/uploads/default/original/3X/4/e/4e0fb5e99103d17065294a87f4d3999c55ae9d3f.jpeg");
  
}
#section {
       color: #fff;
 /*   background: var(--url);
  background-size: 530px 360px;
 */ } 
   h3     {
       color: red;
  }
  #section2  {
   background: var(--url);
    background-position: right 35% bottom 45%;
    }
#section1, #section2, #section3, #section4, #section5, #section6, #section7, #section8, #section9, #section10,
#section11, #section12, #section13, #section14, #section15, #section16, #section17, #section18, #section19, #section20 
  {padding-top:0px;height:630px;}

  .pushy{
  /* (origine)
      background: #333332;
      font-weight: bold;
  */
    position: fixed;
    width: 200px;
    height: 100%;
    top: 0;
  z-index:1050;
    background: #1e1f26; /* 333332 */
      font-size: 1.6rem;
      font-weight: 700;
    -webkit-box-shadow: inset -10px 0 6px -9px rgba(0, 0, 0, .7);
    -moz-box-shadow: inset -10px 0 6px -9px rgba(0, 0, 0, .7);
    box-shadow: inset -10px 0 6px -9px rgba(0, 0, 0, .7);
      overflow: auto;
      text-overflow: ellipsis;
    -webkit-overflow-scrolling: touch; /* enables momentum scrolling in iOS overflow elements */
}
.pushy::-webkit-scrollbar {
   display: none; 
    }
  
.pushy a{
  /* de base
   color: #b3b3b1; 
      border-bottom: 1px solid rgba(0, 0, 0, .1);
    border-top: 1px solid rgba(255, 255, 255, .1);
  
  */
    display: block;
    color: #e0e0e0; 
      padding: 10px 30px;
    text-decoration: none;

    color: #fff;
    width: 100%;

    white-space: nowrap;
    text-align: left;

    transition: .2s ease;
    line-height: 1;
    cursor: pointer;
}

.pushy a:hover{
    background: #000;
    color: #FFF;
}

/* Menu Movement */

.pushy-left{
    -webkit-transform: translate3d(-600px,0,0);
    -moz-transform: translate3d(-600px,0,0);
    -ms-transform: translate3d(-600px,0,0);
    -o-transform: translate3d(-600px,0,0);
    transform: translate3d(-600px,0,0);
}

.pushy-open{
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.container-push, .push-push{
    -webkit-transform: translate3d(200px,0,0);
    -moz-transform: translate3d(200px,0,0);
    -ms-transform: translate3d(200px,0,0);
    -o-transform: translate3d(200px,0,0);
    transform: translate3d(200px,0,0);
}

/* Menu Transitions */

.pushy, #container, .push{
    -webkit-transition: -webkit-transform .2s cubic-bezier(.16, .68, .43, .99);
    -moz-transition: -moz-transform .2s cubic-bezier(.16, .68, .43, .99);
    -o-transition: -o-transform .2s cubic-bezier(.16, .68, .43, .99);
    transition: transform .2s cubic-bezier(.16, .68, .43, .99);
}

/* Site Overlay */

.site-overlay{
    display: none;
}

.pushy-active .site-overlay{
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    background-color: rgba(0,0,0,0.5);
    -webkit-animation: fade 500ms; 
    -moz-animation: fade 500ms; 
    -o-animation: fade 500ms;
    animation: fade 500ms;
}

@keyframes fade{
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@-moz-keyframes fade{
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@-webkit-keyframes fade{
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@-o-keyframes fade{
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* Example Media Query */


  
  /* Example Media Query */
  
         .menu-flottant {
    width:11.5em; /* Largeur des items du menu*/
    float: right; /* Je veux que le menu soit à droite*/
    position:fixed; /* Le menu est fixe à l'écran*/
    z-index:1000; /* Il sera au dessus de tous les éléments*/
    top: 90%; /* Il sera à 40% du bord supérieur de l'écran*/
    font-size: 1em; /* Taille de la police*/
    line-height: 2px; /* Hauteur de ligne du menu*/
    color: #000; /* Couleur de la police*/
    font-weight:700; /* Mettre le texte en gras*/
    text-transform:uppercase; /* Mettre le texte en majuscule*/
    right: -8em; /* Décalage du menu sur la droite pour masquer le texte et ne laisser que les icônes de visibles*/
}
.menu-flottant ul {
    list-style: none; /* Le menu est une liste, mais je ne veux pas afficher les puces*/
    margin: 0; /* Choix des marges internes et externes*/
    padding: 0;
}
.menu-flottant ul li {
    display:block; /* Définition des items en tant que bloc*/
    background-color: white; /* Couleur de fond*/
    height: 3.5em; /* Hauteur des items du menu*/
    padding: 1em 1em; /* Marges internes des items du menu*/
    position: relative; /* On leur attribut une position relative*/
}
/*Couleurs de fond des items du menu*/
.menu-flottant ul li { 
	color: red; /* 4e item du menu*/
}   


/* Mise en forme des liens du menu*/

  
/* Mise en forme des icônes du menu*/
  .menu-flottant ul li span {
    float: left;  /* On les cale à gauche */
    line-height: 1.5em; /* Hauteur de ligne */
    height:2em;
    padding-bottom: 0.8em;
  }  
.main-menu {
    color: #b8bbc8;
    position: relative;
    margin-bottom: 1rem;
    margin-top: 0; 
    } 
.main-menu:after {
    position: absolute;
    bottom: -.5rem;
    left: 1.375rem;
    content: "";
    height: 3px;
    width: calc(100% - 2.75rem);
    border-radius: 10px;
    background: linear-gradient(70deg,#0ebeff,#ffdd40,#ae63e4,#47cf73);
    } 
  h2 {
    font-weight: 400;
    font-size: .8rem;
    padding: 0 1.35rem;
    margin: 1.5rem 0 .35rem;
    transition: color .3s ease;
    text-transform: uppercase;
    color: #9ca0b1;
    font-family: Lato,Lucida Grande,Lucida Sans Unicode,Tahoma,Sans-Serif;
    display: block;
      }
  .logo  {

    height: 50;
    width: 150px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 0;
    padding: 0.8em 1em;
}
      </style>
    </head>
    <body class="">
        
        <script src="https://res.cloudinary.com/depmtifn8/raw/upload/v1465376256/assets/js/pushy.min.js"></script>
        <script src="https://res.cloudinary.com/depmtifn8/raw/upload/v1465376257/assets/js/scripts.js"></script>
<script>

screen.orientation.lock('portrait');
// force le mode paysage sur mobile
  
// pour cacher la scroll bar
// $("body").css("overflow", "hidden");
var $log = $( ".div_displayObject" ),
  str2 =
    '                                                           \
      <nav class="menu-flottant">								\
		<ul>																								\
<li><div class="menu-btn"><i class="fas fa-plus"></i></div></li>					\
</ul>													\
</nav>									\
      <nav class="pushy pushy-left"> \
        <ul class="list-unstyled">\
          <img class="logo" src="core/img/logo-jeedom-grand-nom-couleur.svg" > \
<h2 class="main-menu">Menu</h2>\
<li><a href="#">Home</a></li> \
            <li><a href="#section1">Résumés</a></li> \
            <li><a href="#section2">Presences</a></li> \
            <li><a href="#section3">Accés & Ouvrant</a></li> \
            <li><a href="#section4">Luminaires</a></li> \
            <li><a href="#section5">On/Off</a></li> \
            <li><a href="#section6">Volets</a></li> \
            <li><a href="#section7">Météo</a></li> \
            <li><a href="#">item9</a></li> \
            <li><a href="#">item10</a></li> \
            <li><a href="#">item11</a></li> \
            <li><a href="#">item12</a></li> \
            <li><a href="#">item13</a></li> \
            <li><a href="#">item14</a></li> \
            <li><a href="#">item15</a></li> \
            <li><a href="#">item16</a></li> \
            <li><a href="#">item17</a></li> \
            <li><a href="#">item18</a></li> \
            <li><a href="#">item19</a></li> \
            <li><a href="#">item20</a></li> \
        </ul> \
      </nav> \
      <div class="site-overlay"></div> \
    '
    html = $.parseHTML( str2 ),
 $log.append( html );
  

</script>
        <div id="section">
<div id="section1" class="container-fluid"><h3>Résumés</h3></div>
<div id="section2" class="container-fluid"><h3>Présence</h3></div>
<div id="section3" class="container-fluid"><h3>Accés & Ouvrant</h3></div>
<div id="section4" class="container-fluid"><h3>Luminaires</h3></div>
<div id="section5" class="container-fluid"><h3>On/Off</h3></div>
<div id="section6" class="container-fluid"><h3>Volets</h3></div>
<div id="section7" class="container-fluid"><h3>Météo</h3></div>
<div id="section8" class="container-fluid"><h3>Consommation</h3></div>
<div id="section9" class="container-fluid"><h3>Températures</h3></div>
<div id="section10" class="container-fluid"><h3 style="color:black;">Radiateur</h3></div>
<div id="section11" class="container-fluid"><h3>section11</h3></div>
<div id="section12" class="container-fluid"><h3>section12</h3></div>
<div id="section13" class="tab-pane container-fluid"><h3>section13</h3></div>
<div id="section14" class="container-fluid"><h3>section14</h3></div>
<div id="section15" class="container-fluid"><h3>section15</h3></div>
<div id="section16" class="container-fluid"><h3>section16</h3></div>
<div id="section17" class="container-fluid"><h3>section18</h3></div>
<div id="section18" class="tab-pane container-fluid"><h3>Scénarios</h3></div>
<div id="section19" class="container-fluid"><h3>section19</h3></div>
<div id="section20" class="tab-pane container-fluid"><h3>le bas</h3></div>
  </div>
    </body>
</html>


C’est super cela.
J’utilise depuis peu le menu suivant http://ma-maison-intelligente.fr/2020/03/ameliorer-son-design-jeedom-avec-un-menu-bubble/

J’aimerai ajouter les sections mais je ne comprends rien au code.

Saurais-tu me donner la partie à conserver pour n’avoir qu’un seul menu du coup ?

1 J'aime

trop de partie (css,html,script)
à toi de t’en inspiré pour la suite

Screenshot_20200729-015233_Chrome

<!-- source : http://ma-maison-intelligente.fr/2020/03/ameliorer-son-design-jeedom-avec-un-menu-bubble/
pour @dsigmoun
lien : https://community.jeedom.com/t/tuto-design-menu-slide-corps-scroll-suite-de-lancien-forum/5922/26?u=ajja17orange
-->
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:root {
  --icon-color:white;
  --background-color-plus:#333333;
  --background-color-btn:#4e4e4e;
  --btn-size:2.5em;
	--url: url("https://community.jeedom.com/uploads/default/original/3X/4/e/4e0fb5e99103d17065294a87f4d3999c55ae9d3f.jpeg");
}
#section {
       color: #fff;
 /*   background: var(--url);
  background-size: 530px 360px;
 */ } 
  
   h3     {
       color: red;
  }
  #section2  {
   background: var(--url);
    background-position: right 35% bottom 45%;
    }
    #section18  {
   background: var(--url);
    background-position: right 65% bottom 45%;
    }
#section18 h3 {
       color: white;
  }
#section1, #section2, #section3, #section4, #section5, #section6, #section7, #section8, #section9, #section10,
#section11, #section12, #section13, #section14, #section15, #section16, #section17, #section18, #section19, #section20 
  {padding-top:0px;height:630px;}



  .menu-toggle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: var(--background-color-plus);
  box-shadow: 4px 4px 2px 1px rgba(0, 0, 0, 0.2);
  bottom: 0.5em;
  right: 0.5em;
  display: table;
  text-align: center;
        float: right; /* Je veux que le menu soit à droite*/
    position:fixed; /* Le menu est fixe à l'écran*/
    z-index:1000; /* Il sera au dessus de tous les éléments*/
}
.menu-toggle ul {
    list-style: none; /* Le menu est une liste, mais je ne veux pas afficher les puces*/
    margin: 0; /* Choix des marges internes et externes*/
    padding: 0;
}
  
  
.menu-toggle .fa, .menu-toggle .fas, .menu-toggle .fab  {
  color: var(--icon-color);
  font-size: 2em;
  display: table-cell;
  vertical-align: middle;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.menu-toggle.open .fa {
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}
.btn-app {
  width: var(--btn-size);
  height: var(--btn-size);
  border-radius: 50%;
  border-color: #ffffff;
position: fixed;
     display:block;
  /*  position: absolute;

    position: relative; */
 /* On leur attribut une position relative*/
  background-color: var(--background-color-btn);
  text-align: center;
  font-size: 25px;
}

.btn-app a {
	position: relative;
	display: inline-block;
	text-decoration: none;  
  color: var(--icon-color);
}

.btn-app .fa, .btn-app .fas, .btn-app .fab {
  line-height: 2.5em;
  color: var(--icon-color);
}

.open .btn-app {
       display:block;
   z-index:1000;
  box-shadow: 4px 4px 2px 1px rgba(0, 0, 0, 0.2);
}


.menu-round {
  bottom: 3px;
  right: 3px;
 /*     position: relative; 
 z-index: 3; */
  }
.menu-round .btn-app {
  bottom: 0.3em;
  right: 0.3em;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.menu-round.open .btn-app:nth-of-type(1) {
  right: 0.25em;
  bottom: 3.5em;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.menu-round.open .btn-app:nth-of-type(2) {
  right: 2.7em;
  bottom: 2.5em;
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.menu-round.open .btn-app:nth-of-type(3) {
  right: 4em;
  bottom: 0.3em;
}
.menu-round.open .btn-app:nth-of-type(4) {
  right: 6.6em;
  bottom: 0.3em;
}
  .menu-round.open .btn-app:nth-of-type(5) {
  right: 9.2em;
  bottom: 0.3em;
}
.menu-line {

  bottom: 3px;
  right: 0.25em;
/* z-index: 2; 
    position: absolute;
  */
}
.menu-line .btn-app {
  bottom: 0.3em;
  right: 0.3em;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.menu-line.open .btn-app:nth-of-type(1) {
  bottom: 3.45em;
}
.menu-line.open .btn-app:nth-of-type(1) {
  bottom: 6.45em;
}
.menu-line.open .btn-app:nth-of-type(2) {
  bottom: 9.45em;
}
.menu-line.open .btn-app:nth-of-type(3) {
  bottom: 12.45em;
}
.menu-line.open .btn-app:nth-of-type(4) {
  bottom: 15.45em;
}
.menu-line.open .btn-app:nth-of-type(5) {
  bottom: 18.45em;
}
.menu-line.open .btn-app:nth-of-type(6) {
  bottom: 21.45em;
}
.menu-line.open .btn-app:nth-of-type(7) {
  bottom: 24.45em;
}
.menu-line.open .btn-app:nth-of-type(8) {
  bottom: 27.45em;
}
      </style>
    </head>
    <body class="">

<script>
// pour cacher la scroll bar
// $("body").css("overflow", "hidden");
var $log = $( ".div_displayObject" ),
  str2 =
    '                                       \
<div class="">								\
	<div class="menu-toggle"><span class="fa fa-plus"></span></div>	\
	<ul class="menu-round">				\
		<li class="btn-app">				\
			<a href="#section5"><span class="fas fa-power-off"></span></a>	\
		</li>								\
		<li class="btn-app">				\
			<a href="#section4"><span class="fas jeedom2-light-bulb7"></span></a>		\
		</li>								\
		<li class="btn-app">				\
			<a href="#section3"><span class="fas jeedomapp-ouvrants"></span></a>		\
		</li>								\
		<li class="btn-app">				\
			<a href="#section2"><span class="fas fa-users"></span></a>	\
		</li>								\
		<li class="btn-app">				\
			<a href="#section1"><span class="fa fa-home"></span></a>		\
		</li>								\
	</ul>									\
   \
	<ul class="menu-line">					\
		<li class="btn-app">				\
			<a href="#section6"><span class="fas jeedomapp-volet-ferme"></span></a>	\
		</li>								\
		<li class="btn-app">				\
			<a href="#section7"><span class="fas meteo-nuage-soleil-pluie"></span></a>	\
		</li>								\
		<li class="btn-app">				\
			<a href="#section8"><span class="fas techno-courbes2"></span></a>	\
		</li>								\
		<li class="btn-app">				\
			<a href="#section9"><span class="fas jeedomapp-temperature"></span></a>	\
		</li>								\
		<li class="btn-app">				\
			<a href="#section18"><span class="fas jeedomapp-scenario-jeedom"></span></a>	\
		</li>								\
	</ul>									\
</div>										\
    '
    html = $.parseHTML( str2 ),
 $log.append( html );
  

</script>
        <div id="section">
<div id="section1" class="container-fluid"><h3>Résumés</h3></div>
<div id="section2" class="container-fluid"><h3>Présence</h3></div>
<div id="section3" class="container-fluid"><h3>Accés & Ouvrant</h3></div>
<div id="section4" class="container-fluid"><h3>Luminaires</h3></div>
<div id="section5" class="container-fluid"><h3>On/Off</h3></div>
<div id="section6" class="container-fluid"><h3>Volets</h3></div>
<div id="section7" class="container-fluid"><h3>Météo</h3></div>
<div id="section8" class="container-fluid"><h3>Consommation</h3></div>
<div id="section9" class="container-fluid"><h3>Températures</h3></div>
<div id="section10" class="container-fluid"><h3 style="color:black;">Radiateur</h3></div>
<div id="section11" class="container-fluid"><h3>section11</h3></div>
<div id="section12" class="container-fluid"><h3>section12</h3></div>
<div id="section13" class="container-fluid"><h3>section13</h3></div>
<div id="section14" class="container-fluid"><h3>section14</h3></div>
<div id="section15" class="container-fluid"><h3>section15</h3></div>
<div id="section16" class="container-fluid"><h3>section16</h3></div>
<div id="section17" class="container-fluid"><h3>section17</h3></div>
<div id="section18" class="container-fluid"><h3>Scénarios</h3></div>
<div id="section19" class="container-fluid"><h3>section19</h3></div>
<div id="section20" class="container-fluid"><h3>le bas</h3></div>
  </div>
    </body>
<script>
$( ".menu-toggle" ).click(function() {
	$(".menu-toggle,.menu-round,.menu-line").toggleClass('open');
 });
  
  /*======================*/
/*=== Cacher au clic ===*/
/*======================*/
  /*  
  $(".menu-round .btn-app a").click(function() {
          $( ".menu-toggle,.menu-round,.menu-line" ).removeClass( "open" );
});   
  */
</script>

</html>


là ou j’en ai plus bavé

.btn-app a {
	position: relative;
	display: inline-block;
	text-decoration: none;  
  color: var(--icon-color);
}

car sans ça les liens ne fonctionner pas en mobile

Merci ajja17orange. Cela fonctionne.
J’ai juste un petit soucis lorsque je clique sur l’icône correspondant à la section1, cela ne remonte pas tout en haut, mais à ce qui correspond à mon deuxième écran. En fait, tout est décalé d’un ecran et je n’arrive pas à remonter tout en haut avec le menu.

J’ai trouvé mon problème. Le champs avec le nom de la section était en bas de mon design. En le mettant en haut, c’est OK !

1 J'aime

Hello :wave:
Merci pour ton code.
J’aimerais l’adapter pour afficher (ou non) une simple image, en passant par un code tout simple (img src), en fonction de l’état d’un virtuel.
Cependant, j’ai du mal à comprendre ton code, et je n’arrive pas à « remplacer » tout le code ‹ background › pour l’adapter à un code ‹ img src ›. Pouvez-vous me donner quelques pistes ?

Merci :slightly_smiling_face:

les sections 2 et 18
dans le css
font appel à une variable --url.
et tu peux changé l’URL de cette variable
exemple

ou tu procèdes de la même manière
hors menu

1 J'aime

bonjour,

tout d’abord merci pour ton code,
j’essaie de le mettre en place chez moi car tres réactif mais j’ai un probleme.
sur ta video qd tu clic sur ton item pour afficher l historique cela s affiche normalement. chez moi aussi.
le probleme est lorsque que je change de section ou que je scrolle et que je clic sur un autre equipement pour avoir l historique; j’ai la fenêtre qui souvre mais n’affiche pas le graphique comme si la fenetre ne suivait pas le scroll .
aurait tu une idee merci .

si je comprends un soucis de position ?
si oui
selon qu’on positionne un équipement dans sa hauteur , le modal historique se positionne d’une maniere fixe (hauteur)
il y a pour moi moyen dans le css voir script (avec la recalcul de la taille d’écran)
j’y ai déjà joué
le modal historique à un ID

faut que je trouve le temps (et c’était prévu) en se moment les journées et nuits sont trop courte.

oui c est bien ça soucis de position .ok merci pour la reponse je v creuser par la .pas de soucis on a tous une vie a coté de jeedom on va prendre le temps de vivre il fera jour demain :grin:

Salut, merci pour ton retour !
Au final j’avais oublié de précisé, mais je faisais référence à un code que tu avais publié dans un autre sujet : Image sur design en fonction de l'état de plusieurs équipements

Du coup j’ai repris ce code, il fonctionne parfaitement. J’ai bien une image d’arrière-plan qui change suivant l’état d’un de mes virtuels.

Cependant, je souhaiterais modifier le CSS histoire d’avoir une image qui ne serait pas en arrière plan. Actuellement, les deux images sont déclarées en mode « background » dans le CSS, je voudrais qu’elles s’affichent en image « standard », afin de pouvoir les mettre en premier plan et les placer facilement à la souris via l’interface du design. J’ai essayé beaucoup de choses mais en vain. Je maitrise un tout petit peu le CSS, mais là avec le code de script et les variables, j’avouerai que je m’y perds :confused:.

Que dois-je modifier pour y arriver ?

Voici le code que j’utilise actuellement :

<div class="cmd image_background">
	<script>
		var ton_virtuel=450;
		$('.image_background')[0].setAttribute('data-cmd_id', 808);
		jeedom.cmd.update[808] = function(_options){
			jeedom.cmd.execute(
				{ // Récupération de la valeur  
					id: 808,
					success: function(valeur_courante) {
						$(".retour").empty().text(valeur_courante);                      

						if (valeur_courante == 1){ 
							$(":root").css("--url", "url(montheme/images/icon_home.png)");
						}else{
							$(":root").css("--url", "");
						}
					}
				}
			)
		};    
		jeedom.cmd.update[808]();
	</script>
	<style>
		:root {
		  --url: url(montheme/images/icon_camera.png);
		}
		.div_displayObject  {
			background-image: var(--url);
			background-repeat: no-repeat;
			background-size: 10%;
		}
	</style>
</div>

Merci d’avance pour votre aide :slightly_smiling_face: