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>