28172 sujets

CSS et mise en forme, CSS3

[Résolu] Comment réaliseriez-vous ce menu en CSS ?

Bonjour,

Je travaille sur un site en ce moment, et mon graphiste a réalisé une maquette qui plait à mon client.
Cette maquette comporte un menu en apparence tout simple, mais qui techniquement me donne du fil à retordre !

Je vous laisse jeter un oeil :
http://img.spheerys.fr/images/frtrans.jpg

La spécificité du menu est que l'on voit en fond de l'élément actif, la continuité de l'image du header.
Je souhaite de plus que ce menu soit généré dynamiquement, ce qui exclu l'utilisation des portes coulissantes.

Donc pensez-vous qu'un tel menu se soit réalisable sans la technique des portes coulissantes, et si oui, comment ?
Modifié par Spheerys (22 Feb 2011 - 16:49)
Bonjour,

comment est crée ton menu ? Une liste, j'imagine..?

A mon avis, l'idéal pour ton "challenge" serait de scinder ce header en trois éléments :
- ton image de fond,
- le fond de ton menu,
- les liens du menu.

Mon idée, un peu biscornue mais idée quand même, serait d'avoir ton image de fond découpée en png transparent, de sorte qu'elle ait la forme du bandeau + de tes liens.

Cette image serait placée au-dessus du fond du menu (avec z-index si besoin est), puis tes liens, dans un élément distinct, seraient encore au-dessus de cette image.

Il suffirait ensuite de mettre en fond de tes liens le fond du menu afin qu'ils se superposent parfaitement avec celui-ci, et de laisser le lien actif avec un fond transparent.

On obtiendrait ainsi l'effet désiré, et un petit travail supplémentaire en terme de compatibilité dès IE7 je pense Smiley biggol



Une autre idée m'est venu également, plus propre mais peut-être plus lourde aussi :
attribuer à ton lien actif l'image du bandeau, en background. Avec background-position tu pourrais obtenir l'effet désiré.

Un sprite css géant, mais qui n'utiliserait qu'une seule image (déjà chargée de toute façon). Cela implique par contre que l'image de ton bandeau soit déjà taillée à la bonne hauteur, et que ton menu soit effectivement par-dessus ton bandeau.

Qu'en dis-tu, cela pourrait-il fonctionner pour toi..?

Bon courage en tout cas!
Modifié par Ten (22 Feb 2011 - 13:55)
Merci pour tes 2 idées Smiley smile

En te lisant j'ai aussi pensé à une chose :
- je positionne le menu ul au dessus du header avec un margin négatif
- je colle le fond noir du menu en fond répété sur les li

Maintenant, je me disais que le plus simple serait d'utiliser jQuery pour passer à none le background-image du li parent au a actif
J'suis clair ? Smiley lol
Grosso modo, ça donnerai :
    $("#menu a").click(function(){
      $("#menu a.here").parent().css("background-image","images/fond.jpg");
			$(this).parent().css("background-image","none");
    
    });


Mais je me disais aussi (je m'en dit bcp, des choses ^^) qu'il y avait peut-être moyen de passer par un sélecteur CSS... vous savez, ceux qu'on utilise jamais parce que pas encore bien répandus et parce qu'au fonctionnement encore obscur (du type "ul li > a" et consort...)

S'il y a un aficionados du sélecteur CSS parmi nous, je serai intéressé de connaître l'astuce qui permet d'agir sur un parent Smiley smile
jb_gfx a écrit :
Lien sélectionné => fond transparent pour faire apparaître le fond du header.

Ou j'ai loupé un épisode ?

C'est un peu plus technique car les "li" n'occupent pas l'intégralité de la largeur de la page...
Salut,

jb_gfx a écrit :
Lien sélectionné => fond transparent pour faire apparaître le fond du
header.

Ou j'ai loupé un épisode ?


Spheerys a écrit :

C'est un peu plus technique car les "li" n'occupent pas l'intégralité de la largeur de la page...

Qu'est-ce que tu veux faire de plus technique ?
L'idée de jb_gfx est bonne et relativement simple à mettre en place.

Une des clés de la réussite en intégration est la recherche de la simplicité.
Inutile de chercher à créer une usine à gaz là où ça n'est pas nécessaire Smiley biggrin
jb_gfx & Ericf, si j'ai bien suivi, le problème vient du fait que le fond du menu est sur le <ul>. Donc mettre un fond transparent sur le <li>, en l'état, ne sert juste à rien. Ajouter un <li> avec un :last-child est une bonne idée mais (outre le déchet sémantique que ça cré, e et le problème de compatibilité), ça pourrait sérieusement gêner la génération du menu, non?

Spheerys : rien de mieux qu'une classe. Aucun sélecteur (même css3) ne permet de remonter à "contre-flux" (et donc de cibler un élément ayant un enfant particulier). On ne peut sélectionner les éléments qu'en suivant le flux. (ça tourne en parabole biblique, cette histoire).
Modifié par Ten (22 Feb 2011 - 16:40)
jb_gfx a écrit :



Humm...

http://www.pixemedia.com/temp/spheerys/


OK, autant pour moi, et désolé d'avoir pu paraître condescendant dans mes propos.
Ce n'était absolument pas mon intention.
A regarder en détail comment tu t'y es pris jb_gfx, je constate que tu as qd même usé d'astuces relativement ingénieuses pour réaliser l'illusion (la partie gauche du menu "intégré" à l'image de fond).
Et le code CSS est aussi très instructif.

Donc merci à toi, d'avoir relevé avec succès ce qui pour moi été loin d'être évident Smiley smile
Sujet clos
Aller à