je suis dessus (hier) pour ma tablette en gardant le vertical (mode recopie du code html menu pour plusieurs design)
j aurai un soucis à régler pointer sur le menu dépassant la page du scroll (exemple icône 11 pour design 11 actif et visible) baste (un soucis après l'autre)
mais l'horizontale la méthode diffère car c'est un swipe qui differe d'un scroll
je regarderai
le code du html simple (brut)
Code : Tout sélectionner
<!--
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_vertical_menu_scroll
https://www.w3schools.com/howto/howto_js_vertical_tabs.asp
https://tympanus.net/codrops/2013/03/05/vertical-icon-menu/
https://codepen.io/pablop76/pen/bBRmQz?limit=all&page=7&q=menu+vertical
-->
<head>
<style>
::-webkit-scrollbar {
display: none;
}
.cbp-vimenu {
/* width: 90px;
height: 30px;
*/
position: fixed;
overflow: hidden;
top: 0;
left: 0;
height: 100%;
margin: 0;
padding: 0;
/* background-color: rgba(0,0,0,0.5); 232a31 */
background-color: transparent;
overflow-y: auto;
list-style-type: none;
}
/*
*/
.cbp-vimenu li a {
position: relative;
display: block;
height: 6em;
width: 6em;
text-align: center;
line-height: 5em;
text-decoration: none;
top:35px;
padding:.75em 1.5em;
border-radius:.75em;
margin-top: .1em;
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: rgba(0,0,0,0.5); */
background: #47a3da; /* 47a3da 232c2a*/
color: #999;
}
.cbp-vimenu li a:hover,
.cbp-vimenu li.active a{
background: rgba(0,0,0,0.3);
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%;
}
/* Example for media query (depends on total height of menu)
@media screen and (max-height: 34.9375em) {
.cbp-vimenu {
font-size: 70%;
}
}*/
/* pour badge menu */
.Badge {
font-family: 'Roboto-Regular';
position:absolute;
font-size: 15px;
top:-15px;
left: 50px;
/*
https://codepen.io/dodozhang21/pen/CHfip?limit=all&page=2&q=badge
https://codepen.io/tutsplus/pen/JdLzRv?limit=all&page=3&q=badge
https://codepen.io/nikazawila/pen/IycfH?limit=all&page=2&q=badge
top: -1px;
right: 1px;
min-width: 8px;
height: 20px;
line-height: 20px;
margin-top: -11px;
padding: 0 6px;
font-weight: normal;
color: white;
text-align: center;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
background: #e23442;
border: 1px solid #911f28;
border-radius: 11px;
background-image: -webkit-linear-gradient(top, #e8616c, #dd202f);
background-image: -moz-linear-gradient(top, #e8616c, #dd202f);
background-image: -o-linear-gradient(top, #e8616c, #dd202f);
background-image: linear-gradient(to bottom, #e8616c, #dd202f);
-webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(0, 0, 0, 0.12);
box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(0, 0, 0, 0.12);
*/
}
.pos {
position: relative;
top:5px;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
</head>
<ul class="cbp-vimenu">
<!-- <li><a href="index.php?v=d&p=plan&plan_id=18"><span class="fa maison-home63 fa-2x"></span></a></li>
-->
<li><a ondblclick='window.location.reload(false)' onclick="planHeader_id=10; displayPlan();"><span class="pos fa maison-home63 fa-3x"></span></a></li>
<!-- Résumés
<li class="active"><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section1'"><span class="fa fa-table fa-2x"></span></a></li>
-->
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section7'">
<span class="pos fa fa-table fa-3x"></span>
</a></li>
<!-- presence -->
<li class="active"><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section2'">
<span class="PrezIcon"><i class="pos fa personne-toilet1 fa-3x"></i></span>
<span class="PrezNumb Badge"></span>
</a></li>
<!-- Extérieures -->
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section3'">
<span style="position: relative;right:5px;top:0px;" class="pos fa jeedom-portail_ferme fa-2x"></span>
</a></li>
<!-- luminaires -->
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section4'">
<span class="LumIcon"><i style="position: relative;top:5px;" class="fa jeedom2-bulb14 fa-3x"></i></span>
<span class="LumNumb Badge"></span>
</a></li>
<!-- On / Off -->
<!-- la><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section5'"><span class="fa icomoon-fan_1 fa-lg" style="position: relative;top: -3px;"></span></a></la -->
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section5'">
<span class="OnOffIcon"><i style="position: relative;top:5px;" class="fa fa-power-off fa-3x"></i></span>
<span class="OnOffNumb Badge"></span>
</a></li>
<!-- Chauffages nature-fire14 jeedom-thermometre -->
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section20'">
<span class="fa fa-thermometer-three-quarters fa-3x"></span>
</a></li>
<!-- Volet Roulant -->
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section6'">
<span class="fa jeedom-volet-ferme fa-2x"></span>
</a></li>
<!-- 8 Consommation
techno-courbes2
jeedom2-bitcoin
-->
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section19'">
<span class="fa jeedom2-money2 fa-2x"></span>
</a></li>
<!-- 9 surveillance -->
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=34&fullscreen=1'">
<span class="fa jeedom-surveillance1 fa-2x"></span>
</a></li>
<!-- 10 scénarios -->
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=3&fullscreen=1#section18'">
<span class="fa fa-cogs fa-2x"></span>
</a></li>
<!-- bas -->
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=1&fullscreen=1'"><span class="icon circle-icon glyphicon glyphicon-chevron-down"></span></a></li>
<!-- modal -->
<li><a onclick="document.getElementById('iframe_a').src ='/index.php?v=d&p=plan&plan_id=1&fullscreen=1'">
<img style="position: relative;left:14px;top:-12px;" src="/core/img/logo-jeedom-sans-nom-blanc.svg" height=32 width=32 />
</a></li>
</ul>
<script>
$('.cbp-vimenu li').on('click', function() {
$(this).addClass('active').siblings().removeClass('active');
});
$(function() {
$('#myModal').someDialogPlug({ some: options });
})
</script>
mais je pense qu'il ne faut pas rever quand même. 
