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

Recherche code ou exemple menu slide

4 réponses
Avatar
stefen76
Bonjour,
Voila, j'ai une page compos=E9e de 2 colonnes, la colonne de gauche
propose le menu de navigation vertical, la centrale les contenus.

Je voudrais que la colonne de gauche disparaisse =E0 95% lorsque la
souris n'est pas dessus et que la colonne centrale se redimensionne
automatiquement.

Auriez-vous un code pour faire cela ou un exemple ?

Merci =E0 tous pour l'aide.

St=E9fen

4 réponses

Avatar
Olivier Miakinen

Voila, j'ai une page composée de 2 colonnes, la colonne de gauche
propose le menu de navigation vertical, la centrale les contenus.

Je voudrais que la colonne de gauche disparaisse à 95% lorsque la
souris n'est pas dessus et que la colonne centrale se redimensionne
automatiquement.

Auriez-vous un code pour faire cela ou un exemple ?


À priori ça doit pouvoir se faire avec :hover en CSS, avec une petite
aide JavaScript pour les versions < 7 d'Internet Explorer. Après ce
n'est plus qu'une question de CSS pour les deux versions (menu visible
ou menu presque entièrement caché).

Cela dit, et avant de te lancer là-dedans, je préfère te prévenir que
c'est drôlement casse-g... ce que tu veux faire. Parce que si la colonne
centrale contient du texte, celui-ci se formatera différemment en
fonction de l'espace disponible, et donc le visiteur va hurler lorsqu'il
aura le malheur de bouger sa souris en dehors du menu et que le texte
qu'il était en train de lire se retrouvera plusieurs lignes au dessus !

Tu fais ce que tu veux, hein, c'est ton site, mais fais attention quand
même à ce que tu fais.

Avatar
stefen76

Cela dit, et avant de te lancer là-dedans, je préfère te prévenir que
c'est drôlement casse-g... ce que tu veux faire. Parce que si la colonne
centrale contient du texte, celui-ci se formatera différemment en
fonction de l'espace disponible, et donc le visiteur va hurler lorsqu'il
aura le malheur de bouger sa souris en dehors du menu et que le texte
qu'il était en train de lire se retrouvera plusieurs lignes au dessus !

Tu fais ce que tu veux, hein, c'est ton site, mais fais attention quand
même à ce que tu fais.


Oui je suis d'accord avec toi, j'ai pris en compte ce désagrément, je
voudrai le tester justement pour bien montrer à mon client que ce
qu'il souhaite n'est pas obligatoirement ergonomique et conviviale
pour les utilisateurs.

Stéfen

Avatar
Olivier Miakinen

Oui je suis d'accord avec toi, j'ai pris en compte ce désagrément, je
voudrai le tester justement pour bien montrer à mon client que ce
qu'il souhaite n'est pas obligatoirement ergonomique et conviviale
pour les utilisateurs.


Alors si tu ce que tu veux c'est une maquette pour montrer à quel point
c'est anti-ergonomique, tu n'as pas besoin de JavaScript : tu peux le
faire avec juste des CSS, simplement il faudra utiliser un navigateur
assez récent pour la démo (par exemple Firefox, ou Opera, ou Internet
Explorer 7, mais *pas IE6*).

Je suppose que ta colonne de gauche s'appelle 'navigation' (c.-à-d.
qu'il y a « id='navigation' » dans le code HTML pour ce bloc).

Alors tu mets ça dans les CSS :

#navigation { width: /* ici la largeur fermée */ }
#navigation:hover { width: /* ici la largeur ouverte */ }

Et c'est tout.

Pour plus de détails, cf. fciw.auteurs plutôt que fcl.javascript.

Avatar
ASM

Je suppose que ta colonne de gauche s'appelle 'navigation' (c.-à-d.
qu'il y a « id='navigation' » dans le code HTML pour ce bloc).

Alors tu mets ça dans les CSS :

#navigation { width: /* ici la largeur fermée */ }
#navigation:hover { width: /* ici la largeur ouverte */ }

Et c'est tout.


Bouhouhou ! snif !
même pô un petit glissement progressif ?
ni même un p'tit fadding ?

Pour plus de détails, cf. fciw.auteurs plutôt que fcl.javascript.


J'eussions :
- posé la col de gauche en absolute et donné une largeur et un left
ce left en négatif d'environ 85% de la largeur du menu
- posé la col de droite en relative et donné un margin-left
un peut supérieur à l'emprise du menu semi caché
Pour cacher/montrer le menu de gauche
il faudra glisser le menu jusqu'en position 0
tout en margeant à gauche d'autant la col de droite

On peut aussi laisser la col de droite réglée avec marge gauche mini, et
se contenter d'un recouvrement par le menu.

Sans effet de slide :
http://www.cssplay.co.uk/menus/hidden.html
et le suivant
puis :
http://www.cssplay.co.uk/menus/side_tabs.html
http://www.cssplay.co.uk/menus/fly_definition.html

Çui-ci est rigolo :
http://www.cssplay.co.uk/menus/mini_tabbed_pages.html
(faut aimer)
http://www.cssplay.co.uk/menus/enlarge.html
http://www.cssplay.co.uk/menus/magnifier.html

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé