bonjour,
il existe plein de possibilités pour un navigateur mais vu ta demande spécifique,
ne sachant pas ton soucis « barre d’adresse de silk »
je t’envoie sur un lien forum
Ou pour le plein écran
Dans la miniature clic sur l’icône
Codeopen a côté de result (haut droite) pour essai
pour essai
sinon tu crées une section dans ton design
crée un design « test »
tu ajjoutes un texte/html
tu colles
<body>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
</head>
<style>
#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;}
.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: 20%; /* 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*/
-webkit-transition: -webkit-transform 0.5s; /* Effet de déplacement au passage de la souris*/
-moz-transition: -webkit-transform 0.5s; /* On le définit plusieurs fois pour assurer la compatibilité entre les navigateurs*/
transition: transform .5s;
}
/*Couleurs de fond des items du menu*/
.menu-flottant ul li:nth-child(1) {
color: #232a31; /* Couleur du texte*/
}
.menu-flottant ul li:nth-child(2) {
color: #90094c; /* 2e item du menu*/
}
.menu-flottant ul li:nth-child(3) {
color: #283593; /* 3e item du menu*/
}
.menu-flottant ul li:nth-child(4) {
color: #2d3436; /* 4e item du menu*/
}
/* Si vous en avez plus de 3, ajouteZ ici les mêmes lignes en remplaçant les chiffres et couleurs*/
/* Création de la transformation CSS qui permet d'afficher le menu au passage de la souris*/
.menu-flottant ul li:hover {
-webkit-transform: translateX(-8em);
transform: translateX(-8em);
}
/* Mise en forme des liens du menu*/
.menu-flottant ul li a {
display:block; /* On les définit en tant que bloc*/
color: #000; /* Couleur du texte*/
text-decoration: none; /* On ne veut pas qu'ils soient soulignés par exemple*/
position: absolute; /* On leur attribut une position absolue*/
font-size:1em; /* Taille de la police*/
line-height: 1.5em; /* Hauteur de ligne*/
height:2em; /* Hauteur*/
top:0; /* Positionnement*/
bottom:0;
right: 0.5em;
margin:0 auto;
padding:1em 1.5em;
}
/* 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;
}
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>
/*
screen.orientation.lock('portrait');
// force le mode
// pour cacher la scroll bar
// $("body").css("overflow", "hidden");
var $log = $( ".div_displayObject" ),
str2 =
' \
<div class="menu-flottant"> \
<ul> \
<li><span><i style="position: relative;right:3px;bottom:5px;"class="fa maison-home63 fa-2x"></i></span><a href="#section1" style="color:#232a31;">Résumés</a></li> \
<li><span><i style="position: relative;right:3px;bottom:5px;"class="fa personne-toilet1 fa-2x"></i></span><a href="#section2" style="color:#90094c;">Presences</a></li> \
<li><span><i style="position: relative;right:3px;bottom:5px;"class="fa meteo-brouillard fa-2x"></i></span><a href="#section7" style="color:#283593;">Météo</a></li> \
<li><span><i class="fas fa-question"></i></span><a href="#section20">Question</a></li> \
</ul> \
</div> \
'
// html = $.parseHTML( str2 ),
// $log.append( html );
*/
window.location.href="#section2";
</script>
</body>
en désactivant le mode Edition
au rafraichissement de ton design tu arrives directement
à la section 2 « présence » soit 630px plus bas
que la section 1 « résumé »
