Bonjour à tous,
depuis le temps que je regarde vos forums, me voici intervenant.
J'ai un menu créé en css3, avec l'aide d'exemples sur ce même site.
Très inspiré de cet exemple là :
http://www.alsacreations.com/xmedia/tuto/exemples/transitions/menu2.html
La petite différence sur mon menu, c'est que sous les images qui glissent sur la droite, j'y ai mis des liens dans les balises <li>, en deuxième niveau donc.
Et bien, ces liens ne sont pas cliquables, le lien qui reste activable c'est celui qui dépend de l'image qui vient de glisser.
J'ai fait plein d'essais, et je ne trouve pas, j'ai même l'impression que ce n'est pas possible, vu que pour que l'image glisse à droite, il faut qu'elle soit un lien, et ce lien reste actif.
Je mets le code css et le html :
Je reviens, j'ai lu sur un autre message, un auteur se faire réprimander pour la présentation de son message.
Alors avant que ce gentil (gentille en fait) vienne me gronder, je fais de l'autocorrection, car il est vrai que mon message est assez illisible.
Normalement, maintenant, ça passe mieux.
et le html :
Je ne suis pas habitué des forums, pas en tant qu'acteur du moins, alors veuillez m'excuser pour la présentation de ce post.
Si vous avez bien compris mon souci, je serais de lire vos conseils.
Merci et bonne soirée.
Modifié par chezmachin (05 Mar 2012 - 19:01)
depuis le temps que je regarde vos forums, me voici intervenant.
J'ai un menu créé en css3, avec l'aide d'exemples sur ce même site.
Très inspiré de cet exemple là :
http://www.alsacreations.com/xmedia/tuto/exemples/transitions/menu2.html
La petite différence sur mon menu, c'est que sous les images qui glissent sur la droite, j'y ai mis des liens dans les balises <li>, en deuxième niveau donc.
Et bien, ces liens ne sont pas cliquables, le lien qui reste activable c'est celui qui dépend de l'image qui vient de glisser.
J'ai fait plein d'essais, et je ne trouve pas, j'ai même l'impression que ce n'est pas possible, vu que pour que l'image glisse à droite, il faut qu'elle soit un lien, et ce lien reste actif.
Je mets le code css et le html :
Je reviens, j'ai lu sur un autre message, un auteur se faire réprimander pour la présentation de son message.
Alors avant que ce gentil (gentille en fait) vienne me gronder, je fais de l'autocorrection, car il est vrai que mon message est assez illisible.
Normalement, maintenant, ça passe mieux.
ul
{
margin:0 0 0 25px;
padding:0;
list-style:none;
}
#menu>li
{
position: relative;
display: inline-block;
vertical-align: top;
background:#333;
font-family: Arial, Helvetica, sans-serif;
font-size:100%;
color: #fff;
height: 200px;
width: 200px;
margin: 0 0 0 10px;
padding: 0;
}
li ul
{
font-size: 0.85em;
margin: 8px;
line-height: 1.4;
}
li img
{
position: absolute;
left: 0;
top: 0;
border: none;
/* webkitpour chrome et safari */
-webkit-transition-property: padding-left;
-webkit-transition-duration: .5s;
-webkit-transition-timing-function: ease-out;
/* moz pour firefox mozilla */
-moz-transition-property: padding-left;
-moz-transition-duration: .5s;
-moz-transition-timing-function: ease-out;
/* mos pour ie a partir du 10 */
-mos-transition-property: padding-left;
-mos-transition-duration: .5s;
-mos-transition-timing-function: ease-out;
/* … pour quand ça sera standard */
transition-property: padding-left;
transition-duration: .5s;
transition-timing-function: ease-out;
}
li img:hover, img:focus
{
padding-left:140px;
}
li a
{
color:#cf9909;
text-decoration:none;
}
li a:hover
{
color:#ffffff;
}
et le html :
<ul id="menu">
<li id="option_1">
<ul>
<li><a href="index.php?contenu=presentation" title="Présentation">Présentation</a></li>
</ul>
<a href="#"><img alt="Présentation" src="style_css/presentation_menu.jpg" /></a>
</li>
<li id="option_2">
<ul>
<li><a href="index.php?contenu=classique" title="La Classique">La Classique</a></li>
<li><a href="index.php?contenu=passe-partout" title="La Passepartout">La PassePartout</a></li>
<li><a href="index.php?contenu=transat" title="La transat">La Transat</a></li>
</ul>
<a href="#"><img alt="Les Balancelles" src="style_css/balancelle_menu.jpg" /></a>
</li>
<li id="option_3">
<ul>
<li><a href="index.php?contenu=banc" title="Banc">Les Bancs</a></li>
<li><a href="index.php?contenu=etagere" title="Les Etageres">Les Etagères</a></li>
<li><a href="index.php?contenu=divers" title="Divers">Divers</a></li>
</ul>
<a href="#"><img alt="Autres Choses" src="style_css/autreschoses_menu.jpg" /></a>
</li>
<li id="option_3">
<ul>
<li><a href="index.php?contenu=devis" title="Devis">Devis-Contact</a></li>
<li><a href="index.php?contenu=faire_connaitre" title="Faire Connaître">Faire Connaître</a></li>
<li><a href="index.php?contenu=faire_connaitre" title="Actualité/Blog">Actualité / Blog</a></li>
</ul>
<a href="#"><img alt="Communication" src="style_css/communication_menu.jpg" /></a>
</li>
</ul>Je ne suis pas habitué des forums, pas en tant qu'acteur du moins, alors veuillez m'excuser pour la présentation de ce post.
Si vous avez bien compris mon souci, je serais de lire vos conseils.
Merci et bonne soirée.
Modifié par chezmachin (05 Mar 2012 - 19:01)
bien dans le sens où le lien se lance au click et pas bien dans le sens où je n'ai pas tes autres pages alors le navigateur ne dit page introuvable).
. Ah si c'est bon je vois ce que tu veux dire. Essaie encore mais va doucement avec ta souris et tu verra quand ton image se décale, descend doucement ta souris sur le mot présentation et quand ten ai presque "sortie" (du mot "présentation") ta souris se transforme en main et j'ai remplacé ton lien par un à moi et sa fonctionne. 
