Avant toute chose merci de (re)prendre connaissance de la charte et de la respecter.
Pour résumer :
- Avant de poser une question, je cherche si la réponse existe
- Je suis poli, courtois et je respecte tout un chacun sur le forum
- Si un post m'agace : je m'en éloigne plutôt que de répondre d'une façon qui pourrait être mal interprétée


Il n'est jamais du luxe que de rappeler des choses simples :
Courtoisie, amabilité, politesse et bonne humeur sont les maîtres mots pour un forum sympathique, bienveillant et accueillant :)

Toute la communauté vous remercie

[tuto] Design - menu slide - corps scroll

Cette partie est réservée à l'utilisation de l'interface web pour smartphone et tablettes
winhex
Actif
Messages : 3152
Inscription : 23 janv. 2015, 01:41

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

Message par winhex » 24 déc. 2018, 12:01

je regarderai

Micramaniac
Timide
Messages : 176
Inscription : 17 oct. 2017, 11:22

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

Message par Micramaniac » 24 déc. 2018, 13:09

Merci
Je continue à chercher de mon côté

JBLSteeve
Timide
Messages : 82
Inscription : 30 juin 2014, 22:07

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

Message par JBLSteeve » 25 déc. 2018, 19:17

Bonjour,
Je commence mes designs pour une tablette et je me pose la question de faire une page (plus petite que la taille totale pour laisser la place au menu) pour chaque partie ou si il faut plutôt faire avec des sections.
Je pensais faire un design avec le menu et après un design pour chaque éléments de menu.

Quels est votre avis ? Si vous avez des conseils?
Je vois plusieurs écoles mais j'ai pas bien cerner les avantages de chaque solution
Jeedom stable sur Odroid C2
Z-Wave + Xiaomi Hub + Harmony hub + Cartes I2C

winhex
Actif
Messages : 3152
Inscription : 23 janv. 2015, 01:41

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

Message par winhex » 26 déc. 2018, 01:39

@Micramaniac j aurai du temps demain
mais donne moi plus de détail sur se que tu veux
car la je comprend un truc de 600px et ne gardé que 300 no swipe ?

@JBLSteeve
bonjour comme tu l'as vu il y a plusieurs école, elle ont
1 apparu avec le temps,
2 évolué avec les contraintes de la précédente.

1 la plus simple un html menu "reproduit" dans chaque design contenant les équipements
avantage : la plus simple.
inconvénient : plusieurs design, temps de chargement de chaque design, à dupliquer chaque équipements "virtuel" si on souhaite l'info sur plusieurs design.

2 celui la
fait à l'origine pour un tel afin d'éviter les 3 inconvénients précédents à base l'iframe (fenêtre sur autre design)
un avantage : le chargement étant progressif (parent/enfant/..) il permet en mobilité de créé des paliers de chargement
inconvénient code ++, design menu en plus, chaque iframe et un temps d'accès supplémentaire (si on souhaites avoir cette info rapidement )

3 celui de pascal
afin d'avoir encore un design en moin
inconvenient : code +++ pour la personnalisation d'un menu

2 autres

4 à base de flickity (a tous créé)
5 à base de tasker (création d'apk) en se servant de l'api

Micramaniac
Timide
Messages : 176
Inscription : 17 oct. 2017, 11:22

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

Message par Micramaniac » 26 déc. 2018, 10:10

Bonjour Wihnex,
avec tes explications, tout fonctionne comme je veux.
Il ne me reste plus qu'à trouver comment supprimer le scroll vertical pour naviguer uniquement avec les bouton pour que tout soit parfait.
Mais la je bloque encore. JE ne suis pas contre un coup de main si tu as 5min

winhex
Actif
Messages : 3152
Inscription : 23 janv. 2015, 01:41

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

Message par winhex » 26 déc. 2018, 17:16

je pense que si tu joues avec ca tu pourras trouvé
ça empêche le zoom
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
La propriété width contrôle la taille du viewport. Elle peut être réglée à une valeur précise de pixels, comme width=600
https://developer.mozilla.org/fr/docs/M ... a_viewport
édit : ne marche pas avec tablette (chrome) si tu ne désactive pas le zoom dans accessibilité des paramètre chrome

Micramaniac
Timide
Messages : 176
Inscription : 17 oct. 2017, 11:22

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

Message par Micramaniac » 26 déc. 2018, 21:40

Merci winhex. Je teste ça dès que je rentre

JBLSteeve
Timide
Messages : 82
Inscription : 30 juin 2014, 22:07

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

Message par JBLSteeve » 27 déc. 2018, 00:00

Merci winhex, il me reste a tester pour trouver la solution la plus optimisé ;-)
Jeedom stable sur Odroid C2
Z-Wave + Xiaomi Hub + Harmony hub + Cartes I2C

JBLSteeve
Timide
Messages : 82
Inscription : 30 juin 2014, 22:07

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

Message par JBLSteeve » 27 déc. 2018, 15:27

Ma tablette Huawei fait un zoom automatique je pense et j'aimerai rester sur la résolution maximale de l'écran. Je ne sais pas comment faire.
Jeedom stable sur Odroid C2
Z-Wave + Xiaomi Hub + Harmony hub + Cartes I2C

winhex
Actif
Messages : 3152
Inscription : 23 janv. 2015, 01:41

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

Message par winhex » 27 déc. 2018, 17:07

il y a d'autre méthode pour bloquer le zoom
qu'on peut avoir sur certains site
ensuite ta plus qu'à :D analyse du site en question

JBLSteeve
Timide
Messages : 82
Inscription : 30 juin 2014, 22:07

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

Message par JBLSteeve » 28 déc. 2018, 23:01

Finalement, j'ai une première base :D .
Maintenant avec ce menu dupliqué je ne me vois pas mettre les widgets de présence sur chaque page. Je tente de faire une intégration dans le code html. J'ai réussi à mettre mon mode "présence" id=890.
Je pense pas que c'est parfais au niveau code mais le langage web je connais pas...

Code : Tout sélectionner

<meta  id="jeedomViewport" name="viewport" content="user-scalable=0;" /> 
<script>  
    if (screen.width >= 1920) {
      	// la tablette
        var mvp = document.getElementById('jeedomViewport');
        mvp.setAttribute('content','width=1920; height=1200; initial-scale=1.0; user-scalable=0;');
    } 
   else {    	
    var scaleX = screen.width / 1920;
    var scaleY = screen.height / 1200;
    var scale = scaleX < scaleY ? scaleX : scaleY; 
    var mvp = document.getElementById('jeedomViewport'); 
    mvp.setAttribute('content','initial-scale='+scale+';');
     document.body.style.transform: scale(scale);
     document.body.style['-o-transform'] = scale;
     document.body.style['-webkit-transform'] = scale;
     document.body.style['-moz-transform'] = scale;
  }  
    
</script>
<!-- pour la tablette permet de ne pas avoir de scroll 
<meta name="viewport" content=" width=device-width; initial-scale=1.0; user-scalable=0;" />  -->
<style>

/*
  le plan total fait 21210x1200
  pour un ecran de 1920x1200
*/  
.div_backgroundPlan {
  background: url("montheme/background.jpg") repeat-x;
}
div.menu_top{
	height:100px;
	background-color:rgba(0,0,0,0.6);
	border-bottom:2px solid rgba(0,0,0,1);
	
}

ul.monmenu ul.monmenu_sep{
	list-style-type:none;
	color:rgba(255,255,255,0.8);
	font-family:Roboto;
	font-size: 16px;
	font-weight: normal;
}

li.monmenu{
	display:inline-block;
	width: 120px;
	margin-left: -5px;
	text-align: center;
	height: 100px;
	padding-top: 10px;
	border-left: 1px solid rgba(255,255,255,0.3);
	border-right: 1px solid rgba(255,255,255,0.3);
	background-color: rgba(0,0,0,0.2);
}

li.monmenu1{
	display:inline-block;
	width: 120px;
	margin-left: -5px;
	text-align: center;
	height: 100px;
	padding-top: 10px;
	background-color: rgba(0,0,0,0.2);
}

li.monmenupres {
    display: inline-block;
    width: 250px;
    height: 100px;
    margin: 0;
    margin-left: -5px;
	padding-top: 10px;
    text-align: center;
    color: #FFFFFF;
    background-color: rgba(0,0,0,0.2);
}

li.monmenu:hover{
	background-color: rgba(255,255,255,0.2);
}

li.selected{
	display:inline-block;
	width: 120px;
	margin-left: -5px;
	text-align: center;
	height: 100px;
	padding-top: 10px;
	border-left: 1px solid rgba(255,255,255,0.3);
	border-right: 1px solid rgba(255,255,255,0.3);
	background-color: rgba(255,255,255,0.2);
}

li.monmenu_sep{
	display:inline-block;
	width: 120px;
	margin-left: -5px;
	text-align: center;
	height: 100px;
	padding-top: 10px;
	border-right: 1px solid rgba(0,0,0,0.3);
}

li.monmenudate {
    display: inline-block;
    width: 330px;
    height: 100px;
    margin: 0;
    margin-left: -5px;
	padding-top: 6px;
    text-align: center;
    background-color: rgba(0,0,0,0.2);
}


div.bouton{
	opacity: 1;
}

div.bouton:hover{
	opacity: 0.5;
} 

div.imagette{
	text-align: center;
	margin-bottom: 5px;
	opacity: 0.8;
}
  
body {
position:fixed;
}
  
</style>


<div id="allTopMenus">
  <!-- ici on va copier le div id=menuPage plusieur fois -->
<div id="menuPage" class="menu_top">
<ul class="monmenu">


	<a onClick="scrollToPage(1);"><li class="monmenu"><div class="imagette"><img src="montheme/images/menu-accueil.png" height=75px width=75px></div></br></li></a>
	<a onClick="scrollToPage(2);"><li class="monmenu"><div class="imagette"><img src="montheme/images/menu-chauffage.png" height=75px width=75px></div></br></li></a>
	<a onClick="scrollToPage(3);"><li class="monmenu"><div class="imagette"><img src="montheme/images/menu-camera.png" height=75px width=75px></div></br></li></a>
	<a onClick="scrollToPage(4);"><li class="monmenu"><div class="imagette"><img src="montheme/images/menu-music.png" height=75px width=75px></div></br></li></a>
	<a onClick="scrollToPage(5);"><li class="monmenu" ><div class="imagette"><img src="montheme/images/menu-video.png" height=75px width=75px></div></br></li></a>
    <a onClick="scrollToPage(6);"><li class="monmenu" ><div class="imagette"><img src="montheme/images/menu-conso.png" height=75px width=75px></div></br></li></a>
    <a onClick="scrollToPage(7);"><li class="monmenu" ><div class="imagette"><img src="montheme/images/menu-server.png" height=75px width=75px></div></br></li></a>
    
    <a onClick=""><li class="monmenu1"><div class="imagette"><img src="montheme/images/icon_blank.png" height=75px width=75px></div></br></li></a>
    <a onClick=""><li class="monmenu1"><div class="imagette"><img src="montheme/images/icon_blank.png" height=75px width=75px></div></br></li></a>
    <a onClick=""><li class="monmenu1"><div class="imagette"><img src="montheme/images/icon_blank.png" height=75px width=75px></div></br></li></a>
    <a onClick=""><li class="monmenu1"><div class="imagette"><img src="montheme/images/icon_blank.png" height=75px width=75px></div></br></li></a>

	<a onClick=""><li class="monmenupres">
	<div class="cmd #history# tooltips cmd-widget" data-type="info" data-cmd_id="890" >
	<span style="font-size: 3em;font-weight: bold; color: #FFFFFF;" class="state"></span>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
			$('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value);
		}
		jeedom.cmd.update['#id#']({display_value:'#state#'});
	</script>
	</div>
	</br></li></a>	
    
    <a><li class="monmenudate"><iframe src="montheme/clock.html" height=100px width=330px style="border-style: none ;"></iframe></li></a>


</ul>
</div>
</div>



<script>
var nbOfPage=11;
var pageSizeX=1920;
var pageSizeY=1200;
 
$('#allTopMenus').parent("div").css({ 
      "position":"absolute",
      "left":"0px",
      "top":"0px",
	  "width":(nbOfPage*pageSizeX)+"px"
    });

$(".div_backgroundPlan").eq(0).css({ "width": nbOfPage*pageSizeX, "height": pageSizeY });
  
var cptPage;
for (cptPage = 0; cptPage < nbOfPage; cptPage++) {
  var newid = "menuPage";
  if (cptPage!=0){
    var menuPage = document.getElementById('menuPage');
    var clone = menuPage.cloneNode(true); // true means clone all childNodes and all event handlers
    newid = "menuPage"+cptPage; 
    clone.id = newid;
    var allTopMenus=document.getElementById('allTopMenus');
    allTopMenus.appendChild(clone);
    $("#"+newid+" li").eq(cptPage).addClass("selected");
  }
  $("#"+newid).eq(0).css({ 
 		"position":"absolute",
      	"left":(cptPage*pageSizeX)+"px",
      	"top":"0px",
	  	"width":pageSizeX+"px"                                        
   });
}
// la pager 0 je l'a fait en dernier sinon sa selection est cloné sur toute les autres
$("#menuPage li").eq(0).addClass("selected");

var currentPage=0;
function scrollToPage(page){
currentPage=page;
$("body").css("left", (page-1)*pageSizeX*(-1) + "px");
}
  
// pour cacher la scroll bar
//$("body").css("overflow", "hidden");
/*$(document).ready(function() {

  	$(document).bind("touchmove",function(event){       
        event.preventDefault();
      	scrollToPage(currentPage);
    });

});*/

 
function GetURLParameter(sParam) {
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++)  {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) {
            return sParameterName[1];
        }
    }
  return null;
}
  
var page = GetURLParameter('page'); 
if (page != null){
  scrollToPage(page);
}
</script>
Pièces jointes
menu.jpg
menu.jpg (29.47 Kio) Consulté 328 fois
Jeedom stable sur Odroid C2
Z-Wave + Xiaomi Hub + Harmony hub + Cartes I2C

winhex
Actif
Messages : 3152
Inscription : 23 janv. 2015, 01:41

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

Message par winhex » 29 déc. 2018, 00:18

regarde comment je fait pour intégré la présence/ lumière,.. au menu

tu as le code du menu parent

c'est le même principe même si pour mon cas c'est sur le parent

il te faut mettre sur ta page l'info
et dans son code "design"
un appel à ton id/class créé dans le menu
voici le code du widget présence de mon design
1er image à gauche (bleu)

viewtopic.php?f=25&t=35100&start=60#p678047

Code : Tout sélectionner

<div class="cmd #history# container-fluid tooltips cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
<a href="#section2" style="text-decoration : none;">
   <span class="iconCmd#id#" style="font-size: 25px;"></span>
     <span class="state#id#" style="font-family: 'Roboto-Regular';font-size: 15px;vertical-align: top;margin-left: 5px"></span> #unite#
<span style="text-align: left;font-weight: bold;font-size : 10px;#hideCmdName#">#name_display#</span></a>
  <script>

jeedom.cmd.update['#id#'] = function(_options){
$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
//
// $('.cmd[data-cmd_id=#id#] .state#id#').empty().append(_options.display_value);
 $('.cmd[data-cmd_id=#id#] .state#id#').empty().append(_options.display_value);

//  $(".state#id#").css('color', ''); 
  if (_options.display_value == 0 ) {
$(".state#id#").css('color', '#e6e6e6'); 
  $(".iconCmd#id#") .empty().append('<i class="fa personne-toilet1 fa-2x" style="color:#e6e6e6;"</i>');  
 $('.PrezIcon', window.parent.document).empty().append('<i class="fa personne-toilet1 fa-2x" style="color:#e6e6e6;"</i>');;
   $('.PrezNumb', window.parent.document).text('#state#').css('color','#e6e6e6');

    
}else if (_options.display_value >= 1 ) { 
  $(".state#id#").css('color', '#64cfe8');
   $(".iconCmd#id#") .empty().append('<i class="fa personne-toilet1" style="color:#64cfe8;"</i>');  
 $('.PrezIcon', window.parent.document).empty().append('<i class="fa personne-toilet1 fa-2x" style="color:#64cfe8;"</i>');;
   $('.PrezNumb', window.parent.document).text('#state#').css('color','#64cfe8');
}  

  //

}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
tu peux voir pour > 0
$('.PrezIcon', window.parent.document).empty().append('<i class="fa personne-toilet1 fa-2x" style="color:#e6e6e6;"</i>');;
$('.PrezNumb', window.parent.document).text('#state#').css('color','#e6e6e6');

PrezIcon et PrezNumb sont 2 class misent dans le menu "vieux code de la 1er page du sujet simplement pour te les faire voir)

Code : Tout sélectionner

<!-- presence  -->
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section2'">
  <span class="PrezIcon"><i class="fa personne-toilet1 fa-2x"></i></span>
  <span class="PrezNumb Badge"></span>
  </a></li>
pour toi enlevé window.parent.document
$('.PrezNumb').text('#state#').css('color','#e6e6e6');
Après tu peux caché l'info (la rendre non visible) du design pour n'avoir que le menu

cette méthode permet une actualisation(1)
peut aidé à comprendre le principe d'une ligne de script
viewtopic.php?f=30&t=41418&p=675918&hil ... is#p675918


sinon tu as la méthode en html (identique au sujet graphique en camembert) mais tu n'auras pas (1)
peut être une autre méthode existe api js mais je ne l'a connais pas et encore (1) ?

sinon tu fait comme l'heure mais là je ne peux pas t'en dire plus

JBLSteeve
Timide
Messages : 82
Inscription : 30 juin 2014, 22:07

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

Message par JBLSteeve » 29 déc. 2018, 11:52

Merci, je vais 'jouer' avec ca.
Jeedom stable sur Odroid C2
Z-Wave + Xiaomi Hub + Harmony hub + Cartes I2C

Micramaniac
Timide
Messages : 176
Inscription : 17 oct. 2017, 11:22

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

Message par Micramaniac » 02 janv. 2019, 12:05

Je commence à mieux comprendre le code html.
A force de tester, j'ai réussi à bloquer le scroll.
En fait c'est tout simple, j'ai modifié le paramètre scrolling en le passant de yes à no
dans ton code :
<iframe id="iframe_a" height="100%" width="100%" frameBorder="0" scrolling="no" src="index.php?v=d&p=plan&plan_id=21&fullscreen=1"></iframe>

et tout fonctionne.
Merci pour ton aide Winhex.
Je continue à avancer mon design, c'est vraiment sympa les possibilités.

winhex
Actif
Messages : 3152
Inscription : 23 janv. 2015, 01:41

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

Message par winhex » 02 janv. 2019, 23:24

avec jeedom ça va très loin

HS
je me suis amusé avec des bougie de préchauffage (+800°C en 12v) avec une vieille alim de pc. simplement pour tester
c'est jeedom qui m'a mis à la bidouille elec aussi

tien un code que je jete la pour changer le format d'un collecdate ou valuedate
c'est brut (modif class test avec i#d# ou devant
[data-cmd_id=#id#] pour eviter les meli melo si on l'utilise sur plusieurs widget)

Code : Tout sélectionner

<div style="width:90px;min-height:62px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
  <center>
    <div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
    <span style="font-size: 2.5em;font-weight: bold;margin-top:-5px;position:relative;top:-6px" class="iconCmd"></span><br/>
  <span class="test timeCmd"></span>
      </center>
  <script>

    jeedom.cmd.update['#id#'] = function(_options){
     jeedom.cmd.displayDuration(_options.valueDate,  $('.cmd[data-cmd_id=#id#] .timeCmd'));
           var date = new Date("#valueDate#");
//    var format = $.datepicker.formatDate('dd/mm D', date); // mer.
        var format = $.datepicker.formatDate('dd/mm DD', date); // mercredi

      var time = date.getHours()+"h"+date.getMinutes(); 

       $('.test').text(time+' '+format);
 
     $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
     if (_options.display_value == '1') {
       $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="icon jeedom-fenetre-ferme"></i>');
     }else {
      $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="icon jeedom-fenetre-ouverte"></i>');
    }
  }
  jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>

Pièces jointes
Screenshot_20190102-231754_Chrome.jpg
Screenshot_20190102-231754_Chrome.jpg (12.42 Kio) Consulté 232 fois

coulox
Timide
Messages : 300
Inscription : 15 sept. 2014, 12:37
Localisation : Paris

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

Message par coulox » 04 janv. 2019, 14:08

merci winhex
DIY : PC ATOM X86 (DEBIAN) (Jeedom) + razpberry
RPI 2 (Jeedom) + GCE teleinfo + TTS
Tablette nexus 7 mural (IHM avec design jeedom de F$B33)
Zwave modules : 1 Greenwave multiprise, 5 FGMS-001, 3 FGK-101, 3 FGRM-222

Fulgore
Timide
Messages : 1
Inscription : 03 sept. 2018, 23:37

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

Message par Fulgore » 20 janv. 2019, 22:15

Bonjour à tous,

J'ai besoin d'aide, je m'arrache les cheveux depuis plusieurs soir...

Je dois avoir une erreur dans le code de mon menu Iphone. Je n'arrive pas à faire de clics sur les équipements insérer sur les pages autres que la première.
J'ai tester les modifications de scotty92fr mais rien de plus.
Quelqu'un peut m'aider??
Merci d'avance.

Code : Tout sélectionner

  <head>
  <style>
::-webkit-scrollbar {
    display: none; 
}

.cbp-vimenu {
    width: 75px;
    height: 550px;
  
 	position: fixed;
	overflow: hidden;
	top: 0;
	left: 0;
	height: 100%;
  	margin: 0;
	padding: 0;
background-color: rgba(0,0,0,0.5);
    overflow-y: auto;
  	list-style-type: none;
}
/* 

    */
.cbp-vimenu li a {
  	position: relative;
    	display: block;
	height: 5em;
	width: 5em;
  	text-align: center;
	color: #999;
     	line-height: 4em;
      text-decoration: none;



  padding:.75em 1em;
  border-radius:.75em;

  background-color:rgba(250,250,255,.05);
  color:rgba(255,255,255,.75);
    box-shadow:
    inset 0 1px 0 0 rgba(250,250,255,.3),
    inset 0 -.5em 0 0 rgba(0,0,5,.05),
    inset 0 .25em 1em 0 rgba(250,250,255,.1),
    inset 0 -.25em 1em 0 rgba(0,0,5,.5),
    inset 0 -1px 0 0 rgba(0,0,5,.1),
    0 0 .25em 0 rgba(0,0,5,.5);
  
}

.cbp-vimenu li a:hover {
	background: #47a3da;
  	color: #fff;
}
.cbp-vimenu li a:hover,
.cbp-vimenu li.active a{
	background: #47a3da;
  	color: #fff;
}

.cbp-vimenu li a:before {
	speak: none;
	font-style: normal;
	font-weight: normal;

	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

}

  </style>
  </head>
<iframe id="iframe_a" height="550px" width="100%" frameBorder="0" scrolling="no" src="index.php?v=d&p=plan&plan_id=6&fullscreen=1"></iframe>
<ul class="cbp-vimenu">

<li class="active"><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=6&fullscreen=1#section1'"><span class="fa maison-house110 fa-3x"></span></a></li>
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=6&fullscreen=1#section2'"><span class="fa jeedom2-bulb14 fa-3x"></span></a></li>
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=6&fullscreen=1#section3'"><span class="fa techno-heating3 fa-3x"></span></a></li>
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=6&fullscreen=1#section4'"><img src="/montheme/Images/icon_camera.png" height=40px width=40px></img></a></li>
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=6&fullscreen=1#section5'"><span class="fa techno-ventilation fa-3x"></span></a></li>
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=6&fullscreen=1#section6'"><span class="fa jeedom-clap_cinema fa-3x"></span></a></li>
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=6&fullscreen=1#section7'"><img src="/montheme/Images/icon_mini_reseau.png" height=40px width=40px></img></a></li>
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=6&fullscreen=1#section8'">8</a></li>
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=6&fullscreen=1#section9'">9</a></li>
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=6&fullscreen=1#section10'"><span class="icon circle-icon glyphicon glyphicon-chevron-down"></span></a></li>

</ul>
 <script>
      $('.cbp-vimenu li').on('click', function() {
  $(this).addClass('active').siblings().removeClass('active'); 
});
  </script>

Répondre

Revenir vers « Portail web smartphone & tablettes »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité