Menu fixed et overflow: auto;

Bonjour,

Quand on met un menu vertical en "fixed" et si ce menu est long, une partie n'apparaît pas sur la page. Il existe une commande "overflow: auto;", qui permet de "scroller" aussi le menu, mais cette commande ajoute une vilaine barre verticale à côté du menu. Cette barre est trop longue, elle dépasse le menu de part et d'autre, et impossible de la faire disparaître, de changer sa couleur ou de la diminuer.

Quelqu'un a une idée ?

Merci.
Modifié par Bongota (13 Dec 2017 - 19:48)

Bonjour,

et merci pour la réponse.

Comme c'est le navigateur qui fixe les barres de défilement, je comprends qu'il n'y a pas grand chose à faire pour enlever cette barre disgracieuse et trop longue. J'ai lu l'article de ton lien. C'est intéressant, mais si je fais disparaître la barre de défilement, le visiteur ne saura plus qu'il y a un défilement possible sur le menu, et à priori ne s'en servira pas. Et pas question de compter sur un module complémentaire comme "Hide Scrollbars". C'est une décision du visiteur, donc une contrainte pour lui. De plus, qu'en serait-il sur des tablettes ?
Je vais laisser en l'état pour le moment. Ça fonctionne très bien en mode résolution portable, avec un menu déroulant, qui se "promène" avec le texte.

A propos, quand on applique le overflow:auto; sur le li d'un menu déroulant, celui-ci ne se déroule plus, il prend une barre de défilement horizontale et verticale, et les liens du menu défilent à l'intérieur de la div, c'est à dire dans une petite fenêtre. J'ai trouvé ça par hasard, en testant différentes options, mais ça pourrait être exploité dans d'autres situations. Je ne peux pas mettre un exemple en ligne, je donne juste le css ici.

@media all and (max-width: 480px){

.monmenu{
	position:fixed;
	top:2%;
	left:.8em;
	z-index:100;	
	display:block;
	width:22%;	
}

*{
    font-family:'PolicePerso', serif;
    font-size:14px;
}

li{    
    position:relative;overflow:auto; /* C'est ici...*/
    top:110px;
    display:block;    
    margin:0;
    width:130%;    
    -webkit-transition:1000ms;
    -o-transition:1000ms;
    transition:1000ms;
    background:rgba(255,255,0,0);    
}

li a{
    background-image:-moz-repeating-radial-gradient(gray, #fafad2);
    -webkit-repeating-radial-gradient(gray, #fafad2);
    repeating-radial-gradient(gray, #fafad2);
    display:block;
    padding:4px 12px;
    font-size:1.2em;
    text-decoration: none;
}
li:hover > a{
    background:#333;
    -webkit-transition: all 5s;
    -o-transition: all 5s;
    transition: all 5s;
}
li ul{
    position:relative;
    top:35px;
    left:0;
    display:none;
    padding:0;
    -webkit-transition: all 2.2s;
    -o-transition: all 2.2s;
    transition: all 2.2s;
}
li:hover > ul{
    position:absolute;
    top:-6em;
    display:inline;
}
li ul li{
   display:block;
   width:200px;
   background-color: grey;
   border-right:0;
   border-top:1px solid #fff;
}
}
.nav{

	color:black;font-size:1.2em;}