11540 sujets

JavaScript, DOM et API Web HTML5

Menu fixé a gauche

Bonjour, je suis en train de me construire un site, et j'aimerais faire un menu sur le coté qui reste toujours au même endroit quand on scrolldown.

En CSS, j'ai mis position fixed sur ma div, mais le problème c'est que quand on scroll left, par exemple en zoomant dans la page avec un smartphone, le menu se décale aussi. J'aimerais donc fixer mon menu a gauche. 

#menu { 
position:fixed;
background-color: rgba(155, 155, 155, 0);
left: 40px;
top:20px;
height:100%;
font-weight:bold;
}

j'ai trouvé plusieurs discutions a propos de ca, mais je n'ai rien compris, étant donné que je ne connais rien au javascript.

Pouvez vous m'aider ? Je pense que ce n'est pas très compliqué

Je vous joint un lien vers une page qui parle à peu près du même sujet. sauf que la c'est fixe vers le coté et pas vers le bas.

http://stackoverflow.com/questions/2049845/css-fixed-position-on-x-axis-but-not-y

Le résultat est comme celui la :
http://www.editeurjavascript.com/scripts/scripts_navigation_1_122.php

Merci beaucoup.

Paul
Modifié par Paultub (25 May 2014 - 19:13)
Modérateur
Bonjour,

Tous les smartphones ne font pas la même chose. Certains scrollent (plus ou moins) les éléments ayant en css "position:fixed" en cas de zoom+scroll de l'utilisateur, d'autres pas.

Si l'on s'inspire de http://stackoverflow.com/questions/2049845/css-fixed-position-on-x-axis-but-not-y, on peut par exemple (au lieu de JQuery qui est une sur-couche de javascript) tenter en javascript+css les codes ci-dessous.

Css :
#menu
{
position:absolute;
left:40px;
top:20px;
}


Javascript :
xmenu=40;
ymenu=20;

function pseudoFixed()
{
	document.getElementById("menu").style.left=(window.pageXOffset+xmenu)+"px";
	document.getElementById("menu").style.top=(window.pageYOffset+ymenu)+"px";
}

window.onscroll=pseudoFixed;


Mais je déconseille de faire quoique ce soit car le rendu est forcément moins fluide qu'un css "position:fixed" sur les machines qui le font comme attendu, et ne pourra que dérouter ou agacer les utilisateurs des machines qui font différemment.
Bonjour,

A noter que le zoom est désactivable sur les mobiles en paramétrant le viewport avec la valeur user-scalable=no, à titre d'exemple :
<meta name="viewport" content=" width=device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable=no">

Cela règlerait probablement ton problème de menu fixe.
Modifié par ohweb (27 May 2014 - 11:22)
ohweb a écrit :
Cela règlerait probablement ton problème de menu fixe.


Oui mais sa risque de poser des problèmes si le site n'est pas responsive, ce qui semble être le cas puisque l'utilisateur à besoin de scroller... dans le cas contraire il peut être judicieux d'appliquer la propriété "overflow-x: hidden;" sur <body>.

Sinon il faudrait essayer sans la propriété "height", normalement elle ne s'exprime pas en %, c'est peut être ce qui perturbe la navigateur.
Modérateur
Bonjour,

En effet, on peut désactiver le zoom, mais c'est le mal absolu. Sur mobile, qui est la cible ici, on a un écran petit, et si on a du mal à voir (pas forcément qu'on soit mal-voyant, mais tout simplement si on n'a pas ses lunettes sur soi quand on est en mobilité ce qui est courant), c'est la cata.

De fait, on ne devrait jamais employer (vraiment jamais) "maximum-scale=1.0,user-scalable=no", mais plutôt un "maximum-scale=4.0,user-scalable=yes" par exemple.
Bonjour,

C'est un point de vue et un parti pris, de mon côté je pense que un site bien pensé et donc bien conçu pour les mobiles a une taille de caractères adapté au mobile et ne nécessite par conséquent aucune fonctionnalité supplémentaire de lecture...

La plupart des mobiles permettent également de paramétrer la taille d'affichage des caractères nativement, dans le cas où l'utilisateur a des problèmes de lunettes comme tu dis...

Je comprends ce point de vue, mais pour ma part je trouve le zoom intempestif et trop sensible sur certains mobiles, il gêne la navigation en se déclenchant sans réelle intention de l'utilisateur, au simple clic d'un lien notamment ou dans une tentative de scroll rapide, je trouve cela problématique d'un point de vue ergonomique ainsi je le désactive spontanément lors de mes développements responsive; mais encore une fois c'est un parti pris.
Sujet clos
Aller à