Comme annoncé, ce forum est passé en lecture seule au 1er janvier 2020. Désormais nous vous invitons à vous rendre sur notre nouvelle page communauté :
Image

A très bientôt !

[tuto] Design - menu slide - corps scroll

Cette partie est réservée à l'utilisation de l'interface web pour smartphone et tablettes
Répondre
GGR72700
Timide
Messages : 59
Inscription : 24 sept. 2018, 10:55

Re: [tuto] Design - menu slide - corps scroll

Message par GGR72700 » 16 sept. 2019, 18:04

Wouhhhaaa,

C est mignon tout ça ! Je vais tester le menu fixe ce soir et voir ce que ça donne, ça ouvre des possibilités !
Et maintenant que j ai vu les virtuels glissants çà me donne pleins d idées aussi.

Bref, avec le cumul des deux je ne sais plus du tout dans quelle direction partir pour que cela reste simple et facile à mettre à jour !

Franchement, trop fort:)

Merci
Haut
winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: [tuto] Design - menu slide - corps scroll

Message par winhex » 17 sept. 2019, 22:58

un autre exemple rapidement adaptatation
https://designdrastic.com/snippet/hambu ... enu-in-css
va falloir que je decide mais j'en ai d'autre à tester avant de me fixer :D
Pièces jointes
Screenshot_20190917-225730_Chrome.jpg
Screenshot_20190917-225730_Chrome.jpg (465.24 Kio) Consulté 1758 fois
Screenshot_20190917-225738_Chrome.jpg
Screenshot_20190917-225738_Chrome.jpg (391.26 Kio) Consulté 1758 fois
Haut
GGR72700
Timide
Messages : 59
Inscription : 24 sept. 2018, 10:55

Re: [tuto] Design - menu slide - corps scroll

Message par GGR72700 » 17 sept. 2019, 23:27

Salut Winhex,

Trop beau mais certainement hyper complexe à faire vivre par la suite à moins d'y passer toutes ses nuits :)

Pour ma part, après avoir regarder les éléments dont tu parlais hier, j'ai revu ma copie (tu m'as donné pleins d'idée d'un seul coup).
Je compte faire un design relativement simpliste avec

en haut:
un menu simple horizontal qu'on peux glisser comme la première version sur base de "DESIGN MENU"

au milieu:
le corps venant du "DESIGN corps ARLEQUIN" mais légérement moins haut

en bas:
un "ruban" d'acces rapide un peu comme les widgets déroulants mais appelant un autre design (un genre de ruban avec plusieurs sections)
l'idée c'est de baser celle ci sur un Iframe appelant un design très large plutot qu'un widget et de reprendre la trame de l'arlequin.
du coup en selectionnant le menu, ça appelle directement les bonnes section dans les deux corps mais surtout ça a l'avantage de permettre une mise en forme plus rapide que sur un widget. et tu peux facilement les ré-ordonner... bref, pour moi ce sera un design glissant plutot que le widget glissant.

Donc, j'ai repris un peu le code pour générer deux Iframe et pointer vers les bonnes section et celà fonctionne bien.
Maintenant il me reste quelques points ou je galère mais je sais qu'a force d'acharnement et tests empiriques j'y arriverai
-virer ces ****** de scroll bar sur mon ruban d'accès rapide en l'autoriser uniquement en swipe et pas scroll
-trouver un moyen pour que la résolution s'adapte vraiment correctement en fonction des def des differents tel et tablette

Ce n'est que le début de la phase design de Jeedom a mon avis, moi qui trouvait que mon système se stabilisait....
@+
Haut
TIKETAC
Timide
Messages : 205
Inscription : 26 août 2015, 17:07

Re: [tuto] Design - menu slide - corps scroll

Message par TIKETAC » 23 sept. 2019, 12:11

Bonjour,

J'utilise tes 2 fichiers DESIGN MENU et DESIGN ARLEQUIN, tout fonctionne très bien sauf au démarrage, il faut en effet cliquer 2 fois sur un menu pour le voir apparaître. Cela ne se passe qu'au premier lancement. Une fois ce deuxième click je peux naviguer correctement sur tous le autres menus.

Design Menu

Code : Tout sélectionner

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
::-webkit-scrollbar {
    display: none; 
}

div.scrollmenu {
         height: 48px; 
    background-color: #232A31;
      white-space: nowrap;
  overflow: auto;

}
  div.scrollmenu a {
    color: white;
    text-align: center;
    padding: 18px;
 border-bottom: none;
        text-decoration: none;
  opacity: 1;
      padding-top: 15px;
}
div.scrollmenu a:hover {
 border-bottom: none;
        text-decoration: none;
  opacity: 1;
}
  la {
display: inline-block;
  list-style: none;
  opacity: 0.33;
  font-size: 13.5px;
  color: #FFFFFF;
        }
la>a {
  display: block;
  margin-right: 0px;  
    color: #FFFFFF;
    }
    la.active,
la.active:hover {
  height: calc(100% - 1px); 
  border-bottom: 2px solid #F87620;
 opacity: 1;
}
la:hover {
  border-bottom: 2px solid #F5F5F5;
 height: calc(100% - 1px);
  cursor: pointer;
}
iframe {
width: 1px;
min-width: 100%;
overflow:hidden!important;
              }
</style>
</head>

<div>
  <!-- enlever navbar-fixed-top pour redemissionage -->
 <div class="scrollmenu navbar-fixed-top">

<la><a onClick="planHeader_id=3; displayPlan();"><span class="fa maison-home63 fa-lg"></span></a></la>

<la class="active"><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=11&fullscreen=1#section1'">Salon</a></la>
<la><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=11&fullscreen=1#section2'">Chambre 1</a></la>
<la><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=11&fullscreen=1#section3'">Chambre 2</a></la>
<la><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=11&fullscreen=1#section4'">Chambre 3</a></la>
<la><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=11&fullscreen=1#section5'">Studio</a></la>
<la><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=11&fullscreen=1#section6'">Garage</a></la>

<la><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=11&fullscreen=1#section7'">Jardin</a></la>
<la><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=11&fullscreen=1#section8'">Météo</a></la>


                </div> 
      <div id="menu-div" style="height: 660px; min-width: 100%; background-color: transparant;">
			<div style="height: 100%; width: 0px; min-width: 100%; background-color: transparant;">
			  <iframe id="iframe_a" height="100%" width="105%" frameBorder="0" scrolling="yes" src="index.php?v=d&p=plan&plan_id=11"&fullscreen=1">
			  </iframe>
				  <script type="text/javascript">
				  if (/iPad|iPhone|iPod/.test(window.navigator.userAgent)) { document.getElementById('iframe_a').setAttribute('scrolling', 'yes') }
				  if (/iPad|iPhone|iPod/.test(window.navigator.userAgent)) { document.getElementById('menu-div').style.height = "100%" }
  $('.scrollmenu la').on('click', function() {
  $(this).addClass('active').siblings().removeClass('active'); 

});
              </script>
          </div>
		</div>
	</div>
Design ARLEQUIN

Code : Tout sélectionner

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <style>
/* 1E88E5 */
  #section1 {padding-top:50px;height:616px;color: #fff;} /* background-color: black;} /* bleue */
  #section2 {padding-top:40px;height:616px;color: #fff;} /* background-color: black;} */
  #section3 {padding-top:40px;height:616px;color: #fff;} /* background-color: black;} /* violet */
  #section4 {padding-top:40px;height:616px;color: #fff;} /* background-color: black;} /* orange */
  #section5 {padding-top:40px;height:616px;color: #fff;} /* background-color: black;} /* turquoise */
  #section6 {padding-top:40px;height:616px;color: #fff;} /* background-color: black;} /* bleue canard */
  #section7 {padding-top:40px;height:616px;color: #fff;} /* background-color: black;} /* gris */
  #section8 {padding-top:40px;height:616px;color: #fff;} /* background-color: #795548;} /* brun bleue indigo 3F51B5 */ 
  #section9 {padding-top:40px;height:616px;color: #fff;} /* background-color: #CDDC39;} /* citron */
  #section10 {padding-top:40px;height:616px;color: #fff;} /* background-color: #FFC107;} /* ambre */
  </style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<!-- navbar-fixed-top -->
<div id="section1" class="container-fluid">
  <h3>Salon</h3>
</div>
<div id="section2" class="container-fluid">
  <h3>Chambre 1</h3>
</div>
<div id="section3" class="container-fluid">
  <h3>Chambre 2</h3>
</div>
<div id="section4" class="container-fluid">
  <h3>Chambre 3</h3>
</div>
<div id="section5" class="container-fluid">
  <h3>Studio</h3>
  </div>
<div id="section6" class="container-fluid">
  <h3>Garage</h3>
  </div>
<div id="section7" class="container-fluid">
  <h3>Jardin</h3>
</div>
<div id="section8" class="container-fluid">
  <h3>Météo</h3>
</div>
<div id="section9" class="container-fluid">
    <h3 style="color:black;">section9</h3>
</div>
<div id="section10" class="container-fluid">
    <h3 style="color:black;">section10</h3>
</div>
</body>
Lorsque je lance le navigateur j'arrive bien sur mon premier menu ID 11 Section 1 , je clique alors sur mon second menu, mais le premier celui ci affiche encore id 11 section 1., je reclique sur le second menu et là il affiche bien ID 11 section 2.

Un fois cela fait je peux naviguer normalement de menus en menus.

On dirait qu'il y a un cache ou quelque chose comme ça.

Me suis je bien fais comprendre ?
Haut
winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: [tuto] Design - menu slide - corps scroll

Message par winhex » 23 sept. 2019, 20:11

regarde le lien dans ton iframe
j'y vois un " de trop après 11

Code : Tout sélectionner

<iframe id="iframe_a" height="100%" width="105%" frameBorder="0" scrolling="yes" src="index.php?v=d&p=plan&plan_id=11"&fullscreen=1">
			  </iframe>
@GGR72700
certainement hyper complexe à faire vivre par la suite à moins d'y passer toutes ses nuits :)
c'est du css donc aucune dépendance

un autre exemple
j'étais partis sur ça mais me plait pas
clic + clic donc 2 clic pour chaque section
Screenshot_20190923-163106_Chrome.jpg
Screenshot_20190923-163106_Chrome.jpg (193.23 Kio) Consulté 1661 fois
le petit icône + comme l'autre lien
déplace le bloc menu (css)
active le fondu (css)
pour qu'il soit au dessus/dessous des équipement
z-index (css)
...

ton truc scroll page j'ai réussis "vertical" via
https://alvarotrigo.com/fullPage/
une version modif jquery.fullPage.js par contre la tu es dépendant.
Haut
GGR72700
Timide
Messages : 59
Inscription : 24 sept. 2018, 10:55

Re: [tuto] Design - menu slide - corps scroll

Message par GGR72700 » 23 sept. 2019, 21:27

Salut Winhex,

Effectivement en ce moment j'y passe une bonne partie de mes nuits mais ce n'est encore pas suffisant.
J'ai l'impression de tourner en rond à essayer différentes formes de design. Plus j'y réfléchi, plus je me dis que

1- un seul design c'est l'ideal car facile à entretenir (une vingtaines de pages)

2 - le mode vertical est privilégié ici car du coup on doit pouvoir a peu de chose près avoir le même design pour la tablette et les mobiles; y'a juste à re-dimensionner le tout après avoir un design correct. bref, bcp moins de boulot.

3 - du coup pour ne pas trop manger sur la largeur, je pense toujours partir sur le meme style de menu horizontal qui se place en haut, ce sera plus lisible. (j'ai trouvé en repartant de ta fleche le moyen de faire un smooth scrool entre les sections quand on clique sur le menu et franchement , ça rends le truc plus vivant)

4 - des widgets deroulants comme tu le proposais , c'est top ! et merci pour ton widget Sonde de temp au passage , il est trop beau :D.

5 - Mon idée est aussi d'avoir plus de section que nécéssaire dans le design. en gros 20 sections dont 10 sont appelées par le menu général et une dizaine de plus vers lesquels je pointe en manuel en cliquant sur un bouton dans le même design (genre tu es dans la vue "piscine" et il y a un petit bouton "roue crantée" qui te balance à une section ou se trouvent tous les paramètres que tu ne regardes pas trop souvent.

Donc en gros, j'ai a l'heure actuelle tout ça qui tourne correctement mais sur deux design (MENU + Coprs Arlequin) et il faut que j'arrive à la passer en un seul pour eviter les Iframes et tu m'as mis sur une piste avec ton menu flottant. Mon idée serai de refaire le Menu de base horizontal et le caler en haut à gauche en flottant. tout ceci agrémenté par des petits effets smooth pour le scrolling.

si tu veux tester l'effet smooth du scrolling, voici un bout de monde code:

@ plus

Code : Tout sélectionner

<div>
  <!-- enlever navbar-fixed-top pour redemissionage -->
 <div class="scrollmenu navbar-fixed-top">
    <la><a onClick="planHeader_id=37; displayPlan();"><img style="position: relative;left:1px;top:1px;" src="/plugins/widget/core/images/refresh.png" height=30 width=30 /></a></la>
    <la class="active"><a onclick="loaddesign1()"><img style="position: relative;left:1px;top:1px;" src="/plugins/widget/core/images/home.png" height=70 width=70 /></a></la>
    <la><a onclick="loaddesign2()"><img style="position: relative;left:1px;top:1px;" src="/plugins/widget/core/images/pool.png" height=70 width=70 /></a></la>
    <la><a onclick="loaddesign3()"><img style="position: relative;left:1px;top:1px;" src="/plugins/widget/core/images/volets.png" height=70 width=70 /></a></la>
    <la><a onclick="loaddesign4()"><img style="position: relative;left:1px;top:1px;" src="/plugins/widget/core/images/lights.png" height=70 width=70 /></a></la>
    <la><a onclick="loaddesign5()"><img style="position: relative;left:1px;top:1px;" src="/plugins/widget/core/images/temp.png" height=70 width=70 /></a></la>
    <la><a onclick="loaddesign6()"><img style="position: relative;left:1px;top:1px;" src="/plugins/widget/core/images/trends.png" height=70 width=70 /></a></la>
    <la><a onclick="loaddesign7()"><img style="position: relative;left:1px;top:1px;" src="/plugins/widget/core/images/alarm.png" height=70 width=70 /></a></la>
    <la><a onclick="loaddesign8()"><img style="position: relative;left:1px;top:1px;" src="/plugins/widget/core/images/weather.png" height=70 width=70 /></a></la>
    <la><a onclick="loaddesign9()"><img style="position: relative;left:1px;top:1px;" src="/plugins/widget/core/images/settings.png" height=70 width=70 /></a></la>
    <la><a onclick="loaddesign10()"><img style="position: relative;left:1px;top:1px;" src="/plugins/widget/core/images/settings.png" height=70 width=70 /></a></la>
    <la><a onclick="document.getElementById('iframe_a').src ='https://www.jeedom.com/forum/index.php'">Forum</a></la>
  </div> 
  <script>
function loaddesign1() {
 document.getElementById('iframe_a').contentWindow.document.getElementById('section1').scrollIntoView({
		block: 'start',
		behavior: 'smooth',
		inline: 'nearest'
	});
}
function loaddesign2() {
 document.getElementById('iframe_a').contentWindow.document.getElementById('section2').scrollIntoView({
		block: 'start',
		behavior: 'smooth',
		inline: 'nearest'
	});
}
function loaddesign3() {
 document.getElementById('iframe_a').contentWindow.document.getElementById('section3').scrollIntoView({
		block: 'start',
		behavior: 'smooth',
		inline: 'nearest'
	});
}
function loaddesign4() {
 document.getElementById('iframe_a').contentWindow.document.getElementById('section4').scrollIntoView({
		block: 'start',
		behavior: 'smooth',
		inline: 'nearest'
	});
}
function loaddesign5() {
 document.getElementById('iframe_a').contentWindow.document.getElementById('section5').scrollIntoView({
		block: 'start',
		behavior: 'smooth',
		inline: 'nearest'
	});
}
function loaddesign6() {
 document.getElementById('iframe_a').contentWindow.document.getElementById('section6').scrollIntoView({
		block: 'start',
		behavior: 'smooth',
		inline: 'nearest'
	});
}
function loaddesign7() {
 document.getElementById('iframe_a').contentWindow.document.getElementById('section7').scrollIntoView({
		block: 'start',
		behavior: 'smooth',
		inline: 'nearest'
	});
}
function loaddesign8() {
 document.getElementById('iframe_a').contentWindow.document.getElementById('section8').scrollIntoView({
		block: 'start',
		behavior: 'smooth',
		inline: 'nearest'
	});
}
function loaddesign9() {
 document.getElementById('iframe_a').contentWindow.document.getElementById('section9').scrollIntoView({
		block: 'start',
		behavior: 'smooth',
		inline: 'nearest'
	});
}
function loaddesign10() {
 document.getElementById('iframe_a').contentWindow.document.getElementById('section10').scrollIntoView({
		block: 'start',
		behavior: 'smooth',
		inline: 'nearest'
	});
}
Haut
winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: [tuto] Design - menu slide - corps scroll

Message par winhex » 24 sept. 2019, 01:26

j'essaierai merci

en faite tu as raison avant de refaire un menu
je vais refaire mes anciens (partagé)
utilisable rapidement
la mise en place sera rapide (design menu disparait)
redim de la page
replacement des équipements
et zou

avant de passé à un autre menu
vu que ce n'est qu'un html ça ira bien plus vite si je veux en changé.
Haut
GGR72700
Timide
Messages : 59
Inscription : 24 sept. 2018, 10:55

Re: [tuto] Design - menu slide - corps scroll

Message par GGR72700 » 24 sept. 2019, 07:20

Salut

Si jamais tu arrives à faire le menu horizontal en version flottante histoire qu il soit toujours en haut de la page je suis preneur. Je n ai pas encore réussi.

Et je n ai pas non plus réussi à faire des smooth scroll en partant du menu z. Il n y a que le Href qui fonctionne....

Oui l idée d un seul design est la bonne en terme de gestion, car tu fais le fond avec tout tes widget et tu ne travaille que sur le menu sans remettre en cause tout le travail fait. Bref, ça reste évolutif je pense.

À plus et bonne journée


Envoyé de mon iPhone en utilisant Tapatalk
Haut
TIKETAC
Timide
Messages : 205
Inscription : 26 août 2015, 17:07

Re: [tuto] Design - menu slide - corps scroll

Message par TIKETAC » 24 sept. 2019, 15:07

Merci winhex il y avait bien un " en trop
Haut
GGR72700
Timide
Messages : 59
Inscription : 24 sept. 2018, 10:55

Re: [tuto] Design - menu slide - corps scroll

Message par GGR72700 » 24 sept. 2019, 21:20

Salut Winhex,

Si tu passes par là, saurais tu comment supprimer un design quand on a plus accès (le clic droit ne marche plus après changement de code... Désolé je débute )

@ plus
Haut
winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: [tuto] Design - menu slide - corps scroll

Message par winhex » 24 sept. 2019, 21:29

tu actualises et stop avant la fin du chargement
parfois le clic droit reviens
rarement du 1er coup

via f12 recherche de l'élément
supprime suffit parfois à revoir le clic droit

sinon il y a un sujet pour le faire à partir de là bdd

avant chaque moment sur mon design je créé un backup (même si c'est trop tard pour toi là )
Haut
GGR72700
Timide
Messages : 59
Inscription : 24 sept. 2018, 10:55

Re: [tuto] Design - menu slide - corps scroll

Message par GGR72700 » 24 sept. 2019, 22:30

Bon je vais essayer ça de suite.
Bah si je faisais un backup avant chaque test sur le design, je n en finirai pas.... maintenant c est clair que je cherche un peu à mettre le bazar avec mes tests empiriques.

Je n arrive pas à rendre ce **** de menu flottant ! Je vais l avoir !


Envoyé de mon iPhone en utilisant Tapatalk
Haut
winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: [tuto] Design - menu slide - corps scroll

Message par winhex » 25 sept. 2019, 00:23

tiens en voila v1 pour écran vertical en haut
Screenshot_20190925-003705_Chrome.jpg
Screenshot_20190925-003705_Chrome.jpg (21.51 Kio) Consulté 1547 fois


https://github.com/ajja17/Design/blob/master/v1.html
Haut
GGR72700
Timide
Messages : 59
Inscription : 24 sept. 2018, 10:55

Re: [tuto] Design - menu slide - corps scroll

Message par GGR72700 » 25 sept. 2019, 09:23

ahhhhh tu es trop fort !!!!!

ça fonctionne parfaitement :D

il me reste deux choses à faire pour que ce soit au top du top:
- Mettre de belles icones à la place de textes (ça doit le faire en regardant comment était fait le premier menu flottant)
- Trouver comment faire un smooth scroll quand on click au lieu de déplacer directement à la bonne section (je tiens à mettre cet effet car ça rends le truc un peu plus sexy) :?

je suppose qu'il faut jouer avec le parseHTML à la fin. je ferai de essais ce soir

Merci milles fois
Haut
GGR72700
Timide
Messages : 59
Inscription : 24 sept. 2018, 10:55

Re: [tuto] Design - menu slide - corps scroll

Message par GGR72700 » 25 sept. 2019, 10:18

Enfin !!!!! j'ai tout ce que je voulais et la petite fonction scroll rends vraiment bien !!!! surtout avec le fond dégradé! :D

j'ai modifié légèrement ta version pour:
- avoir des Png a la place du texte (ça fonctionne nikel, reste à mettre à la bonne taille et jouer un peu sur la mise en forme)
- ajout de la fonction Smooth scroll (il doit y avoir plus simple de faire cette fonction car dans mon cas je la repète X fois alors qu'avec une variable on doit pouvoir le faire une seule fois. bref, ça laisse place à l'optimisation)

Encore merci poour ton aide précieuse Winhex, je n'y serai jamais arrivé seul :(

Voici le code si certains veulent tester

Code : Tout sélectionner

<body>
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, shrink-to-fit=no">
  
  <!-- BARRE DE NAVIGATION -->
  <!-- Chrome -->
  <meta name="theme-color" content="#00865f"> 
  <!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#00865f"> 
  <!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> 
  

  </head>
  

     <style>
       
	:root{
--background-menu-v1: #00865f; /* couleur menu*/
	} 
       
	#section {
color: #fff;
background-image: linear-gradient(135deg, #232a31, #90094c, #42275a, #ff9800, #00bcd4, #009688, #283593, #795548, #485563, #FFC107, #1e88e5, #000000, #673ab7, #ff9800, #00bcd4, #7ED6DF, #FAFAFA, #795548, #CDDC39);
       } 
       
#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;} 
       
       /*je cache la barre de scroll du menu*/
	div.menu-flottant::-webkit-scrollbar {
display: none; 
    }
  
              /*je place le menu au centre couleur vert pour Portable */
@media only screen and (min-width: 300px) {
	div.menu-flottant {
width:100%;  /* ou 360px */
background-color: var(--background-menu-v1);
right: 0em;
       }
  /*j'interdit de pouvoir scroller en portable */
  body {
    overflow: hidden;
      }
  }
       
	     /*je place le menu à droite, couleur bleu pour PC */
@media only screen and (min-width: 992px) {
  /* Large devices (laptops/desktops, 992px and up) */
		div.menu-flottant {
width:500px;  /* ou 360px */
background-color:#33b5e5;
right: -8em;
       }   
  }
       
      		div.menu-flottant {
height: 45px; 
position:fixed;  /*Le menu est fixe à l'écran*/
z-index:1000; /* Il sera au dessus de tous les éléments*/
top: 0%; /* Il sera à 0% du bord supérieur de l'écran*/
white-space: nowrap;
overflow: auto;
       }  
       
       
        div.menu-flottant a {
display:block; /* On les définit en tant que bloc*/
color: #fff;  /* Couleur du texte*/
text-align: center;
padding: 10px 15px 15px 15px;
border-bottom: none;
opacity: 1;
text-decoration: none; /* On ne veut pas qu'ils soient soulignés par exemple*/
	}
	     
	div.menu-flottant a:hover {
color: #fff;
border-bottom: none;
text-decoration: none;
opacity: 1;
	}   
       
	div.menu-flottant li {
display: inline-block;
list-style: none;
opacity: 0.85;
font-size: 15.5px;
color: #FFFFFF;
	}
       
	li>a {
display: block;
margin-right: 0px;  
color: #fff;
	}
       
    li.active,
li.active:hover {
height:calc(100% - 1px); 
border-bottom: 3px solid #FFF;
opacity: 1;
	}
       
	li:hover  {
border-bottom: 3px solid #FFF;
height: calc(100% - 1px);
cursor: pointer;
	} 
 
	h3 {
margin-left: 35px;
        }     
  </style>
	
  <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>
	
<script>
var $log = $( ".div_displayObject" ),
  str2 =
    '\
      <div class="menu-flottant">	\
   <li><a href="/index.php?v=d&p=dashboard"> \
  <img style="" src="/core/img/logo-jeedom-sans-nom-blanc.svg" height=25  /> \
  </a></li> \
<li><a onclick="loaddesign1()"><img style="position: relative;left:1px;top:1px;" src="/plugins/widget/core/images/weather.png" height=30 width=30 /></a></li>	\
<li><a onclick="loaddesign2()"><img style="position: relative;left:1px;top:1px;" src="/plugins/widget/core/images/pool.png" height=30 width=30 /></a></li>	\
<li><a onclick="loaddesign3()"><img style="position: relative;left:1px;top:1px;" src="/plugins/widget/core/images/trends.png" height=30 width=30 /></a></li>	\
<li><a onclick="loaddesign4()"><img style="position: relative;left:1px;top:1px;" src="/plugins/widget/core/images/alarm.png" height=30 width=30 /></a></li>	\
<li><a onclick="loaddesign5()"><img style="position: relative;left:1px;top:1px;" src="/plugins/widget/core/images/pool.png" height=30 width=30 /></a></li>	\
<li><a onclick="loaddesign6()"><img style="position: relative;left:1px;top:1px;" src="/plugins/widget/core/images/pool.png" height=30 width=30 /></a></li>	\
<li><a onclick="loaddesign7()"><img style="position: relative;left:1px;top:1px;" src="/plugins/widget/core/images/pool.png" height=30 width=30 /></a></li>	\
<li><a onclick="loaddesign8()"><img style="position: relative;left:1px;top:1px;" src="/plugins/widget/core/images/pool.png" height=30 width=30 /></a></li>	\
<li><a onclick="loaddesign9()"><img style="position: relative;left:1px;top:1px;" src="/plugins/widget/core/images/pool.png" height=30 width=30 /></a></li>	\
<li><a onclick="loaddesign10()"><span>Settings</span></a></li>	\
</div>	\
    '
	html = $.parseHTML( str2 ),
	$log.append( html );
	
		function loaddesign1() {
document.getElementById("section1").scrollIntoView({
		block: 'start',
		behavior: 'smooth',
		inline: 'nearest'
	});
}
	function loaddesign2() {
document.getElementById("section2").scrollIntoView({
		block: 'start',
		behavior: 'smooth',
		inline: 'nearest'
	});
}
	function loaddesign3() {
document.getElementById("section3").scrollIntoView({
		block: 'start',
		behavior: 'smooth',
		inline: 'nearest'
	});
}
	function loaddesign4() {
document.getElementById("section4").scrollIntoView({
		block: 'start',
		behavior: 'smooth',
		inline: 'nearest'
	});
}
	function loaddesign5() {
document.getElementById("section5").scrollIntoView({
		block: 'start',
		behavior: 'smooth',
		inline: 'nearest'
	});
}
	function loaddesign6() {
document.getElementById("section6").scrollIntoView({
		block: 'start',
		behavior: 'smooth',
		inline: 'nearest'
	});
}
	function loaddesign7() {
document.getElementById("section7").scrollIntoView({
		block: 'start',
		behavior: 'smooth',
		inline: 'nearest'
	});
}
	function loaddesign8() {
document.getElementById("section8").scrollIntoView({
		block: 'start',
		behavior: 'smooth',
		inline: 'nearest'
	});
}
	function loaddesign9() {
document.getElementById("section9").scrollIntoView({
		block: 'start',
		behavior: 'smooth',
		inline: 'nearest'
	});
}
	function loaddesign10() {
document.getElementById("section10").scrollIntoView({
		block: 'start',
		behavior: 'smooth',
		inline: 'nearest'
	});
}
</script>


</body>
Haut
winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: [tuto] Design - menu slide - corps scroll

Message par winhex » 25 sept. 2019, 17:04

thk j'essaierai se soir
Haut
winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: [tuto] Design - menu slide - corps scroll

Message par winhex » 30 sept. 2019, 19:48

c'est sympas
je ne l'utilise pas sinon mon 2eme menu (un simple html) défilera avec

le 1er des 2eme menu

Code : Tout sélectionner

<html>
  <style>

	div.scrollmenu {
height: 50px; 
background-color: var(--background-menu-v1); /* 232A31 */
white-space: nowrap;
    overflow: hidden;
text-align: center;
box-shadow: 0 3px 4px 0 rgba(0,0,0,0.14), 0 3px 3px -2px rgba(0,0,0,0.12), 0 1px 8px 0 rgba(0,0,0,0.2);
	}

  div.scrollmenu a {
   line-height: 20px;
color: #6d6d6d;
text-align: center;
padding: 8px;
border-bottom: none;
text-decoration: none;
opacity: 1;
padding-top: 5px;
font-size: 15.5px;    
	}
	la>a>span  {
color:#6d6d6d;    
font-size: 15.5px;    
font-family: 'Roboto-Regular';
	}   
    la.active>a, la.active>a>span {     
color:#0ebefd;  
    }
</style>

<body>
<div>
 <div class="scrollmenu">

  <la class="active"><a href="#section1" class="fa divers-table29 fa-lg">
   <br><span>Résum.<span></a></la>
 
    <la><a href="#section4" class="fa icomoon-switch fa-lg">
  <br><span>On/Off</span></a></la>

<la><a href="#section9" class="fa divers-thermometer31 fa-lg">
  <br><span>Temp.</span></a></la>

   <la><a href="#section2" class="fa personne-toilet1 fa-lg">
     <br><span>Présences<span></a></la>

   </div></div></body></html>
les suivant j'enlève la partie style
et balise active devant la concerné
Screenshot_20190930-194158_Chrome.jpg
Screenshot_20190930-194158_Chrome.jpg (226.38 Kio) Consulté 1288 fois
pour coloré l'icône jeedom (svg) fonction css filter
Pièces jointes
Screenshot_20190930-194639_Chrome.jpg
Screenshot_20190930-194639_Chrome.jpg (184.56 Kio) Consulté 1288 fois
Haut
GGR72700
Timide
Messages : 59
Inscription : 24 sept. 2018, 10:55

Re: [tuto] Design - menu slide - corps scroll

Message par GGR72700 » 30 sept. 2019, 21:17

Ah c est pas mal du tout ! Ça donne de nouvelles idées le petit menu simple en bas !

Après je ne pense pas me lancer la dedans car j aime bien le petit effet scroll, ça en jette sur la tablette:)

Ou sinon mettre le petit menu en position fixe en bas de page ? Ou bien une iframe et on recommence l histoire depuis le début...

Bon plus sérieusement je vais me focaliser sur le contenu du design avant la mise en forme car j ai pris un Max de retard. Ça fait trois ans que ça tourne sans interface donc c est vraiment le bordel et il est temps de mettre au propre. Au passage merci pour tes nombreux widgets que je trouve un peu partout dans ces pages.

Je ferai un petit retour une fois que j aurai quelque chose de présentable.

Bonne soirée


Envoyé de mon iPhone en utilisant Tapatalk
Haut
GGR72700
Timide
Messages : 59
Inscription : 24 sept. 2018, 10:55

Re: [tuto] Design - menu slide - corps scroll

Message par GGR72700 » 30 sept. 2019, 21:19

Oh et franchement les petites feuilles juste sous les sondes pour savoir dans quel mode on est c est trop choux !!!! Je sens que je vais encore dévier de mon objectif initial !!!


Envoyé de mon iPhone en utilisant Tapatalk
Haut
GGR72700
Timide
Messages : 59
Inscription : 24 sept. 2018, 10:55

Re: [tuto] Design - menu slide - corps scroll

Message par GGR72700 » 30 sept. 2019, 21:25

Image


Envoyé de mon iPhone en utilisant Tapatalk
Haut
Répondre

Revenir vers « Portail web smartphone & tablettes »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 3 invités