28173 sujets

CSS et mise en forme, CSS3

Menu composé d'éléments triangulaires

Hello,

Une copine graphiste m'a demandé de réaliser son site web. Son menu est composé de formes triangulaires, avec une image différente en cas de :hover (comme le montre l'image ci-dessous).
upload/45961-menu.jpg

Aujourd'hui ce menu est en place, mais le :hover me pose quelques problèmes car les triangles sont placés dans des carrés transparents, et cette zone est prise en compte.
De plus, lorsqu'un triangle A est sélectionné, il empêche le :hover sur le bord sur un triangle B car sa zone est au dessus du triangle A.

Du coup, quelles pourraient être les possibilités envisageables pour palier à ce problème ?
Je pense qu'une couche JavaScript pourrait être suffisante. J'ai également pensé à un map area, mais réaliser un menu avec une image est relativement immonde à mon sens. Peut-être qu'une propriété CSS3 que je ne connais pas permet de faire ça très bien ?

Voilà le code HTML actuel :

<nav>
  <ul>
    <li class="triangleGauche">Page 1</li>
    <li class="triangleDroite">Page 2</li>
    <li class="triangleGauche">Page 3</li>
    etc.
  </ul>
</nav>


Et voilà le code CSS :

nav ul { margin: 0; padding: 0;}
nav li { list-style: none; }
nav li.triangleGauche,
nav li.triangleDroite {
    position: relative;
    width: 50px;
    height: 65px;
    text-indent: -9999px;
    margin: 0 0 -22px 26px;
    z-index: 1;
}
nav li.triangleGauche { background: transparent url('../img/menuSprite.png') 0 0 no-repeat; }
nav li.triangleDroite { background: transparent url('../img/menuSprite.png') -50px 0 no-repeat; }
nav li.triangleGauche:hover { background: transparent url('../img/menuSprite.png') 0 -65px no-repeat; }
nav li.triangleDroite:hover { background: transparent url('../img/menuSprite.png') -50px -65px no-repeat; }
nav li.triangleGauche:hover,
nav li.triangleDroite:hover {
    z-index: 2;
}


Le z-index est utilisé pour que la zone :hover du triangle sélectionnée soit complète sur mon triangle. Sans lui, chaque sélection en coin de triangle enclenche le :hover sur le triangle suivant. Avec le z-index, le problème est que le triangle sélectionné déborde sur les triangles adjacents, empêchant la sélection en coin.

Enfin, car un schéma vaut mieux qu'un long discours, en voila un, qui récapitule ces zones.
upload/45961-schema.jpg

Il y a donc une zone commune aux deux triangles problématique pour le :hover, et une zone transparente (pour les triangles au bord du menu).

En espérant trouver mon bonheur ici, je vous remercie d'avance Smiley smile
Modifié par SauceHuitre (25 Aug 2012 - 11:06)
Modérateur
Salut,

Ton souci est simple en fait (plusieurs solutions). Au hasard :

solution 1 :
créer un grand sprite
déplacer le sprite suivant les item au hover

http://img803.imageshack.us/img803/3953/sprmenu.png

solution 2 :
chaque élément de ton menu à sa propre image
au hover changer l'attribut source de ton image
ex :

<img id="logo" alt="une image" src="mon-img.jpg">



<img id="logo" alt="une image" src="mon-img_hover.jpg">

Modifié par niuxe (25 Aug 2012 - 14:42)
Salut,

Merci pour ta réponse. Smiley smile
Réaliser le changement de l'image pour mon triangle lorsque la souris est dessus n'est pas le problème. Je l'ai d'ailleurs réalisé avec un sprite composé de 4 triangles : gauche, droite, gauche:hover, droite:hover.

Le souci, et il sera le même avec les deux solutions que tu me proposes est qu'il existera encore une zone commune à deux triangles adjacents créant des conflits sur le :hover du simple fait que mes triangles sont en réalité des rectangles avec une zone de transparence.

Smiley biggrin
Salut,

J'y ai pensé en effet, mais c'est surtout pour l'ajout ou la suppression d'éléments du menu que ça complique la chose étant donné qu'il faut à chaque fois refaire l'image et les coordonnées.

Disons que cette solution marchera, mais n'est pas la plus simple si le menu a besoin d'être modifié, mais je l'adopterai si je ne trouve rien de mieux !

Smiley smile
Salut,

Ça a l'air pas mal du tout ton truc ! J'espère que je vais pouvoir intégrer mes images à l'intérieur de mes triangles par contre Smiley lol

En tout cas merci, je n'ai pas le temps de tester ça ce soir mais je le fais dès que possible !
oki,
pour IE, tu peut regarder l'alternative activex, comme on modifie le contexte de formatage/layout dans les IE et pas IE, c'est a priori compatible avec la base que j'ai mise sur dabbet.

++

<edit> un lien ou tu trouvera l'info pour les moins récent IE : http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/
Cependant :
http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/ a écrit :
In many cases, the best solution for dealing with Internet Explorer is to let it display a less-enhanced experience. I hope, however, the above solutions provide some options for working with CSS3 when a client wants a more accurate cross-browser experience.
</>
Modifié par gc-nomade (27 Aug 2012 - 22:22)
Sujet clos
Aller à