[résolu] Mise en page avec un menu de gauche "masquable"

Bonjour à tous,

J'ai besoin de faire un site qui comporte un menu de gauche que l'on peut masquer ou afficher, en cliquant sur un lien.

J'aimerais que lorsque l'on masque le menu de gauche, le contenu de la page prenne toute la place nouvellement disponible (moins ses marges bien sur).

Je pensais que ce serait simple à faire avec des div, étant donné qu'un div occupe toute la place de son parent si aucune largeur n'a été définie, mais malheureusement non, cela ne fonctionne pas.

Voici ce que je voudrais faire :

Lorsque le menu est affiché :


Lorsque le menu est masqué :


Pour le moment je ne m'occupe que du menu de gauche, je verrai pour l'autre div (recherche) après.

Voici ce que j'ai réussi à faire, mais je suis tout sauf satisfait du code

Ca fonctionne sous firefox, mais pas IE, donc c'est déjà pas acceptable.

Je suis également passé par une fonction javascript pour définir la taille du div contenu, à chaque fois qu'on cache/affiche le menu de gauche.

N'est-il pas possible que tout soit automatique, que le contenu prenne toute la place lorsque le menu de gauche disparait, grâce au css ?

je trouve ma solution de javascript pas propre du tout, et lorsque je voudrai que ça fonctionne avec IE, je vais devoir adapter les tailles, selon que je suis avec IE ou les autres navigateurs...

Je ne sais plus trop où chercher maintenant, quelqu'un aurait-il une piste à me donner svp ?

Modifié par donnie (18 Jul 2006 - 23:56)

Hello,

N'ayant aucune réponse, j'en déduis que :

1°) Mon sujet n'intéresse pas grand monde
2°) Personne n'a la réponse à ce problème

Au vu du niveau de certaines personnes sur ce forum, je pense malheureusement qu'on est ici dans le point 1°) !

Je retravaille dessus ce soir, et j'essaierai de présenter mon problème de façon plus claire

Il n'y a pas que le côté fonctionnel qui m'intéresse sur ce problème, j'aimerais que la sémantique suive en fait. (sinon j'aurais déjà terminé, mais tout serait en js avec des conditions du style "if (IE)"...)
Modifié par donnie (18 Jul 2006 - 11:06)

Bonjour,

3e réponse, beau gosse, et la plus pertinente: les gens susceptibles d'y répondre ne l'ont tout simplement pas vu, le sujet. On est en juillet et la vie normale reprend parfois ses droits.

cela dit :
- refaire d'abord la css pour avoir une combinaison float/flux solide dans tous les navigateurs pour menu/contenu, histoire de virer ce calcul de largeur de contenu (un truc bien: les contextes de formatages évitant aussi les margin-left de contenu, cf blog-and-blues). Bref, avoir un contenu en flux qui prend dans tous les cas toute la largeur disponible, tout seul comme un grand, sans se glisser sous l'éventuel menu et sans qu'on aie rien à lui dire. Et avoir déjà une CSS indifférente à la présence et à l'état du js.
- enlever le lien +- de #menu, où il n'a rien à faire puisqu'il doit rester quand #menu est en display:none. Rien n'empêche qu'il ait l'air d'être dans #menu à l'écran, via CSS.
- enlever aussi ce lien +- du code HTML, et le générer uniquement en javascript, histoire de ne pas avoir un lien idiot quand js est désactivé ou inexistant.
- simplifier le js actuel en enlevant ce qui est devenu inutile.

<edit>Le souci sémantique est louable, mais rassure-toi: il n'y a aucun enjeu sémantique là-dedans.
Par contre, il y a un problème potentiel d'accessibilité, si cette fonctionnalité de masquage du menu est nécessaire pour accéder correctement à une information du contenu.</>
Modifié par Laurent Denis (18 Jul 2006 - 11:41)

Bonjour,

Effectivement j'avais pas pensé à l'option "vacances".

Merci beaucoup pour la réponse, je vais essayer d'appliquer tes conseils ce soir.

Voilà, j'ai essayé de suivre au mieux tes conseils, et ça fonctionne super bien !

Voilà ce que ça donne.

Laurent Denis a écrit :
Bonjour,
1°) refaire d'abord la css pour avoir une combinaison float/flux solide dans tous les navigateurs pour menu/contenu, histoire de virer ce calcul de largeur de contenu (un truc bien: les contextes de formatages évitant aussi les margin-left de contenu, cf blog-and-blues). Bref, avoir un contenu en flux qui prend dans tous les cas toute la largeur disponible, tout seul comme un grand, sans se glisser sous l'éventuel menu et sans qu'on aie rien à lui dire. Et avoir déjà une CSS indifférente à la présence et à l'état du js.
2°) enlever le lien +- de #menu, où il n'a rien à faire puisqu'il doit rester quand #menu est en display:none. Rien n'empêche qu'il ait l'air d'être dans #menu à l'écran, via CSS.
3°) enlever aussi ce lien +- du code HTML, et le générer uniquement en javascript, histoire de ne pas avoir un lien idiot quand js est désactivé ou inexistant.
4°) simplifier le js actuel en enlevant ce qui est devenu inutile.

1°) Je suis allé lire l'article de blog-and-blues sur les contextes de formatages, et j'ai appris quelque chose, c'est super intéressant !
J'ai donc utilisé la propriété overflow: auto sur mon div contenu, au lieu de lui appliquer un float: left. J'ai fait une feuille de style spéciale IE, avec la propriété "zoom: 1;" à la place de overflow.
Le résultat est exactement celui que j'escomptais, à un détail près, la marge de gauche du div contenu n'est pas égale à 10px sur IE. J'ai contourné ce problème en redéfinissant le style du div menu et en lui mettant une marge à droite. C'est bizarre, mais bon ça fonctionne.

2°) J'ai déplacé le lien servant à masquer le menu du div menu. Je l'ai mis provisoirement dans le header, et à vrai dire je ne sais pas encore ou il sera au final, je verrai ça plus tard.

3°) J'ai créé un div vide, dans lequel je crée via javascript le lien qui sert à masquer le div menu. Si javascript est désactivé, alors rien ne s'affiche (mais j'ai quand même mon div vide dans le code html).

4°) Le js est tout propre.

Merci beaucoup Laurent, tu m'as fait faire un pas de géant, car ça faisait déjà quelques temps que je butais sur ce problème, et je ne voulais pas avancer tant que je ne jugeais pas ça propre.
Modifié par donnie (18 Jul 2006 - 23:56)

Re-bonjour,

Une petite amélioration, encore ?

Utiliser les méthodes DOM plutôt que innerHTML : tu pourras supprimr le <div> vide du lien +-, une fois que tu auras déterminé où il prendra finalement place. Voir http://gilles.chagnon.free.fr/cours/dhtml/modifs.html
Modifié par Laurent Denis (19 Jul 2006 - 06:49)

Bonjour,

C'est implémenté, et ça marche niquel

Je ne connaissais pas ces méthodes.

Merci encore !