vidéo : https://youtu.be/35D8rl3guM0
bonjour voici un tuto (de bidouilleur) pour avoir un menu (ilimité) qu'on déplace de droite à gauche
et plusieurs écran,chapitre (ancres) d'un design qu'on peut faire défilé de haut en bas
le menu peut pointé sur différent design ou liens
j'y glisse les sources d'inspiration "en remerciement", celle-ci pourrait vous être utile.
il faut au préalable savoir la dimension de son navigateur de téléphone ou de tablette
http://fr.screenresolution.org/
chez moi 360x640
- DESIGN MENU -
configurer en 360x550
ajouter 1 texte/html
celui ci contient :
- DESIGN corps ARLEQUIN-
-- le menu --
source (https://www.w3schools.com/howto/howto_c ... scroll.asp)
j'ai hôte la barre de défilement et je me suis inspiré de se code pour le rendu visuel
(https://codepen.io/brody/pen/KzqObZ)
-- Iframe --
l'inspiration viens de se code
https://codepen.io/amrosenfeld/pen/XaEw ... enu+iframe
configurer en 361x6205 (pour 10 chapitres)
ajouter 3 texte/html (debut / corps / fleche haut de page )
celui ci contient :
-- Début --
il a pour but :
enlevé la barre de scroll
liens direct à l'ancre lors d'un raccourci d'un autre lien/design
fixer une id de debut pour la fleche haut de page (Scroll to Top)
-- Corps --
permet d'avoir plusieurs écran de différente couleurs afin d'y mettre ses equipements,...
https://www.w3schools.com/bootstrap/try ... &stacked=h -- Scroll to Top --Code : Tout sélectionner
<div> <a href="javascript:" id="top"><i class="glyphicon glyphicon-arrow-up"></i></a> <script> // ===== Scroll to Top ==== $(window).scroll(function() { if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px $('#top').fadeIn("fast"); // Fade in the arrow } else { $('#top').fadeOut("fast"); // Else fade out the arrow } }); $('#top').click(function() { // When arrow is clicked document.getElementById("debut").scrollIntoView(); }); </script> <style> #top{ position: fixed; bottom: 20px; right: 20px; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.7); width: 50px; height: 50px; display: block; text-decoration: none; -webkit-border-radius: 35px; -moz-border-radius: 35px; border-radius: 35px; display: none; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } #top i{ color: #fff; margin: 0; position: relative; left: 16px; top: 13px; font-size: 19px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } #top:hover{ background: rgba(0, 0, 0, 0.9); } #top:hover i{ color: #fff; top: 5px; } </style> </div>