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 ?
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire
Veuillez sélectionner un problème
Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
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.
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.
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.
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
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.
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
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.
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.
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.
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.
-- Stephane Moriaux et son (moins) vieux Mac déjà dépassé
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é
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.