Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Menu vertical flottant

25 réponses
Avatar
Guy Gruais
Bonjour,

On m'a demandé de préparer un menu flottant sur les pages du site en
signature.
J'ai trouvé sur le web un script qui donnerait ceci :

http://paysderetz.free.fr/test/menuflotvert.html
(ne pas tenir compte des couleurs qui seront sans doute changées)

Mon problème est que cette solution nécessite un écran d'au moins 970 px de
large pénalisant ainsi très fortement les 5% d'internautes qui ne disposent
pas mieux qu'un écran 800 x 600.
Le script JS pompé *ajoute* à la largeur de la page (minimum de 760 px ==>
largeur du bandeau) la largeur de la colonne "menu".

N'y a-t-il pas moyen d'*inclure* cette largeur au lieu de l'ajouter pour
pouvoir rester en-deçà des 800 px ?

Merci.

P.S. : Il y a la possibilité de diminuer la largeur du bandeau mais je ne
m'y résoudrais que si je ne trouve pas d'autre solution.

--
Cordialement

guy.siaurg@free.invalid (inverser siaurg pour retrouver gruais)
http://paysderetz.free.fr/

10 réponses

1 2 3
Avatar
Pascale
"Guy Gruais" écrivait
news:go3o8u$25hb$:

Le script JS pompé *ajoute* à la largeur de la page (minimum de 760 px
==> largeur du bandeau) la largeur de la colonne "menu".



Il me paraît comme qui dirait légèrement superflu, le Javascript en
question...

--
Pascale
Avatar
Pierre Goiffon
Guy Gruais wrote:
On m'a demandé de préparer un menu flottant sur les pages du site en
signature.
J'ai trouvé sur le web un script qui donnerait ceci :

http://paysderetz.free.fr/test/menuflotvert.html
(ne pas tenir compte des couleurs qui seront sans doute changées)



Ce type de fonctionnement existe en CSS, il s'agit de position:fixed.
C'est supporté par IE7 je crois me rappeler (et ça semble confirmé par
une recherche rapide). Pour IE6 il existe de nombreux hacks, vous aurez
assez de facilité à en trouver ! Il y avait par exemple dans le temps le
Dean Edward's IE7 (http://dean.edwards.name/IE7/ - la solution pour le
position:fixed pouvait être utilisée de manière modulaire, sans charger
tout le reste) mais la librairie a subit plusieurs changements
d'importance que je n'ai pas suivi (?)
Avatar
Guy Gruais
Bonjour,

Vous allez être infiniment heureux d'apprendre que Pascale vient d'écrire :


Il me paraît comme qui dirait légèrement superflu, le Javascript en
question...



Possible :-?
Mais comment y remédier ?
En CSS ? Pas évident pour moi d'obtenir un tel menu flottant

--
Cordialement

(inverser siaurg pour retrouver gruais)
http://paysderetz.free.fr/
Avatar
Guy Gruais
Bonjour,

Vous allez être infiniment heureux d'apprendre que Pierre Goiffon vient
d'écrire :


Ce type de fonctionnement existe en CSS, il s'agit de position:fixed.
C'est supporté par IE7 je crois me rappeler



J'avais effectivement trouvé sur le web cette solution.
Mais il était indiqué que cela ne fonctionnait pas avec IE7.
J'ai vérifié. Effectivement IE7 n'en veut pas alors que Firefox et Opera
s'en accommodent très bien.

--
Cordialement

(inverser siaurg pour retrouver gruais)
http://paysderetz.free.fr/
Avatar
SAM
Le 2/25/09 4:31 PM, Guy Gruais a écrit :
Bonjour,

On m'a demandé de préparer un menu flottant sur les pages du site en
signature.



Pour Firefox et autres c'est très facile :
il suffit qu'il soit en position fixed
et que le contenu après le bandeau lui laisse la place à gauche
(marge gauche)

Pour IE (au moins <7) il devra être en absolute
et un JS devra le glisser lors du scroll vertical

J'ai trouvé sur le web un script qui donnerait ceci :

http://paysderetz.free.fr/test/menuflotvert.html



Je trouve qu'il y a beaucoup de scripts sur cette page.
De plus ils sont un peu éparpillés partout.

Et comment se fait-ce qu'on ait un div dans le head ?

(ne pas tenir compte des couleurs qui seront sans doute changées)



C'est à mon idée un peu compliqué, puisqu'on n'a besoin que du scroll
vertical.

Mon problème est que cette solution nécessite un écran d'au moins 970 px
de large pénalisant ainsi très fortement les 5% d'internautes qui ne
disposent pas mieux qu'un écran 800 x 600.
Le script JS pompé *ajoute* à la largeur de la page (minimum de 760 px
==> largeur du bandeau) la largeur de la colonne "menu".



Il doit suffire d'intégrer le menu au div conteneur principal après le
bandeau

Ha! pas d'bol ...
y a ni conteneur pour le bandeau,
ni, surtout, de conteneur pour le contenu.

N'y a-t-il pas moyen d'*inclure* cette largeur au lieu de l'ajouter pour
pouvoir rester en-deçà des 800 px ?



body { margin-left: 120px; }
h1 { margin-left: -120px; }

et régler le positionnement du menu

Par exemple ?

--
sm
Avatar
Pierre Goiffon
Guy Gruais wrote:
Ce type de fonctionnement existe en CSS, il s'agit de position:fixed.
C'est supporté par IE7 je crois me rappeler



J'avais effectivement trouvé sur le web cette solution.
Mais il était indiqué que cela ne fonctionnait pas avec IE7.
J'ai vérifié. Effectivement IE7 n'en veut pas alors que Firefox et Opera
s'en accommodent très bien.



Est-ce que vous auriez votre essai en ligne ?

Sur le blog officiel ça indique bien être supporté :
http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx
on lit : "Fixed positioning support"
Avatar
Patrick 'Zener' Brunet
Bonjour.

"Guy Gruais" a écrit dans le message
de news go3o8u$25hb$
Bonjour,

On m'a demandé de préparer un menu flottant sur les pages du site en
signature.
J'ai trouvé sur le web un script qui donnerait ceci :

http://paysderetz.free.fr/test/menuflotvert.html
(ne pas tenir compte des couleurs qui seront sans doute changées)




Il sautille pas mal... Comme c'est sur mon Firefox, ça doit être dû au
Javascript.
Dommage parce que sur Firefox le position:fixed; fonctionne bien tout seul.

Sur IE 6 (toujours très répandu donc a priori incontournable) il faut monter
un composant HTC pour avoir l'équivalent. Il y a aussi un hack dans la CSS
(le background) pour éviter le sautillement.

Mon problème est que cette solution nécessite un écran d'au moins
970 px de large pénalisant ainsi très fortement les 5%
d'internautes qui ne disposent pas mieux qu'un écran 800 x 600.
Le script JS pompé *ajoute* à la largeur de la page (minimum de 760
px ==> largeur du bandeau) la largeur de la colonne "menu".

N'y a-t-il pas moyen d'*inclure* cette largeur au lieu de l'ajouter
pour pouvoir rester en-deçà des 800 px ?




J'ai travaillé la question sur mes sites et j'ai trouvé une solution: rendre
le menu escamotable.

Evidemment ça implique sur IE un autre HTC pour gérer le :hover sur un DIV.
Il faut prévoir une solution dégradée pour le cas sans Javascript (et même
une autre pour le cas avec mais sur un vieux navigateur, pas vrai SAM?).

Bref c'est un peu complexe mais c'est très possible, sous une forme
compatible avec la plupart des navigateurs et qui valide à 100%.

Merci.

P.S. : Il y a la possibilité de diminuer la largeur du bandeau mais
je ne m'y résoudrais que si je ne trouve pas d'autre solution.



C'est un gros dilemme:
* Déjà dans le principe, réserver une cheminée bien large parce que le menu
va en occuper une partie en hauteur, c'est un peu dommage,
* Et ensuite, les items de menu multilignes c'est pas forcément terrible non
plus, et ça peut conduire à déborder par le bas, rendant les derniers
inaccessibles (notamment si le visiteur grossit le texte).
Si ça vous intéresse, ce point est un peu discuté sur la page des réglages
d'accessibilité...

Cordialement.

--
Cordialement.

* Patrick BRUNET www.ipzb.fr www.ipzb-pro.com
* E-mail: lien sur http://zener131.eu/ContactMe
Avatar
Guy Gruais
Bonjour,

Vous allez être infiniment heureux d'apprendre que SAM vient d'écrire :


Je trouve qu'il y a beaucoup de scripts sur cette page.
De plus ils sont un peu éparpillés partout.



Eeeeeeeeeuuuuuuuhhhhhhhhhhhhhh, pas tout compris, là !
A ma connaissance, seuls 3 scripts apparaissent :
1 - le script du menu flottant qui se trouve dans le fichier smbar.js
2 - le script de Xiti
3 - les boutons du menu
4 - l'ancien menu qui va donc disparaître

Et comment se fait-ce qu'on ait un div dans le head ?



Effectivement, j'ai été très surpris de ceci.
Mais ne connaissant rien au JS, je me suis bien gardé de déplacer ce
<div>...</div>
La preuve de ce que je dis :

http://files.codes-sources.com/fichier.aspx?id2399&f=exemple.htm

depuis, je l'ai déplacé pour le mettre dans le <body> et cela fonctionne
très bien.

Ha! pas d'bol ...
y a ni conteneur pour le bandeau,
ni, surtout, de conteneur pour le contenu.



J'ai donc créé un <div> pour y placer bandeau et coordonnées de la société

body { margin-left: 120px; }
h1 { margin-left: -120px; }



Effectivement en jouant sur ces paramètres, on obtient quelque chose de
satisfaisant en mettant <div id= conteneur du bandeau+coordonnées> à la
place de <h1>
Il me reste à diminuer la hauteur du menu si je veux rester dans les 640px
de hauteur d'un écran 800 x 600.

Merci Sam

--
Cordialement

(inverser siaurg pour retrouver gruais)
http://paysderetz.free.fr/
Avatar
Guy Gruais
Bonjour,

Vous allez être infiniment heureux d'apprendre que Pierre Goiffon vient
d'écrire :


Est-ce que vous auriez votre essai en ligne ?



Je viens de le reconstituer :

http://paysderetz.free.fr/test/menuflotvert2.html

Parfait sous Firefox et Opera (pas le moindre sautillement) mais non
opérationnel sous IE5 et IE7

--
Cordialement

(inverser siaurg pour retrouver gruais)
http://paysderetz.free.fr/
Avatar
Guy Gruais
Bonjour,

Vous allez être infiniment heureux d'apprendre que Patrick 'Zener' Brunet
vient d'écrire :


Il sautille pas mal... Comme c'est sur mon Firefox, ça doit être dû au
Javascript.



sans doute

J'ai travaillé la question sur mes sites et j'ai trouvé une solution:
rendre le menu escamotable.

Evidemment ça implique sur IE un autre HTC pour gérer le :hover sur
un DIV. Il faut prévoir une solution dégradée pour le cas sans
Javascript (et même une autre pour le cas avec mais sur un vieux
navigateur, pas vrai SAM?).



Pffffffffiiiiiiiiiiiiiiiiiiiiiiiiioooooooooouuuuuuuu, sûrement pas dans mes
compétences

Si ça vous intéresse, ce point est un peu discuté sur la page des
réglages d'accessibilité...



Et où trouve-t-on cette page ?

Merci

--
Cordialement

(inverser siaurg pour retrouver gruais)
http://paysderetz.free.fr/
1 2 3