[semi-résolu] Menu difficile ?

Bonjour à toutes et à tous !

Je planche sur un menu récalcitrant ...

J'essaye d'obtenir ce résultat :
http://ekxaoproductions.com/images/menu.jpg

La difficulté pour moi est le fil à plomb qui doit se "déroulé" en face du menu survolé.

Je ne vois pas trop comment y parvenir ...

J'ai bien pensé à la technique des portes coulissantes, mais elle ne me permet pas d'avoir le fil qui se "déroule" jusqu'au menu survolé.
Ou alors si, mais je ne vois pas commment

Si vous aviez des pistes, vous m'auteriez une fière chandelle du pied

Merci d'avance à ceux qui prendront le temps de se pencher sur mon cas !
Modifié par barbe douce (02 Apr 2007 - 19:56)

Pas évident en effet. Peux-être une solution avec une pseudo-classe after sur le a:hover qui afficherait l'image du fil à plomb complet en absolute. Sinon si le fil ne bouge pas en rollover, ça doit être gérable en javascript ou en php.

Effectivement la pseudo-classe pourrait répondre à mon problème ...
Mais partiellement : le "déroulement" du fil ne serait pas géré, et la pseudo-classe after n'est pas particulièrement bien implantée sur les navigateurs si je ne m'abuse !

Pour le JS ou PHP, j'avoue ne pas trop maitrisé ces 2 langages ... donc difficile d'y trouver une solution !

En tout cas merci à toi de t'intéresser à mon problème

ça peut etre assez simple si tu gere la profondeur.

Tu mets ton mur en profondeur et ton menu au dessus.
Ton image de mur en png avec plusieurs etats selon x.
Tu fais varier la position x ton image de mur en fonction du menu survollé.

Si tu cherches à ce que le fil soit dynamique en fonction du menu (avec animation), je te conseille de faire un menu en flash.
(si tu a besoin je peux t'aider; je me débrouilles en flash).
Modifié par cazsan (01 Apr 2007 - 17:20)

a écrit :
ça peut etre assez simple si tu gere la profondeur.

Tu mets ton mur en profondeur et ton menu au dessus.
Ton image de mur en png avec plusieurs états selon x.
Tu fais varier la position x ton image de mur en fonction du menu survolé.

Désolé mais là j'ai rien compris ...
C'est quoi pour toi la profondeur ?
Ta technique s'appuie sur quelle langage ?

Pour préciser, je ne cherche pas à ce que le déroulement du fil soit dynamique. Juste que lorsqu'on survole un menu, le fil à plomb soit en face et que le fil ait la longueur approprié.
Sorry je me suis mal exprimé dans mes premiers posts

On pourrait effectivement bidouiller avec une image ou un bloc positionné en absolu et placé, via un z-index, en arrière-plan.

Mais ce genre d'effet serait tout de même bien plus robuste s'il était réalisé en Javascript.

Ok une solution en JS donc ...

Et par où je commence ? En sachant que je n'y connait à peu prés rien ...

(sinon en attendant je vais regarder l'option z-index, mais c'est vraiment pour me faire patienter ! Je tiens assez à une solution robuste/accessible/standard)

PS merci à toi cazsan pour ta proposition de flash, mais là tout de suite ça ne correspond pas vraiment à ce que je cherche. En tout cas c'st cool de trouver des gens prêt à donner de leur temps pour filer un coup de main

barbe douce a écrit :
Et par où je commence ?

Par le salon Javascript, par exemple.
(Créer un nouveau sujet en re-présentant l'effet voulu, faire un lien vers ce sujet-ci pour information.)

Je verrais bien un changement d'image de fond du conteneur du menu (ou tout simplement un changement du background-position) lors du survol et/ou du clic.

Au final, la seule partie qui a besoin de varier c'est le fil, il me semble. Le plomb lui-même peut être une image de fond des liens du menu.

Salut,
comme dit florent, javascript perso, je pense que c'est relativement simple, les rollovers sur le menu, peace of cake en css, en revanche, un petit div entre le mur du haut et la tête du fil à plomb avec... du fil en image de fond, et qui s'étend en hauteur, repoussant la tête du fil d'autant en fonction de l'élément de menu où on se trouve. je verrai bien ça avec un simple slider à la Mootools (je n'ai pas d'actions, d'ailleurs, c'est gratos )

jette un oeil au truc et si ça ne te parle pas, je m'essayerai à te pondre le truc, ça n'a pas l'air bien sorcier

have swing

Ce que tu peux essayer, c'est de mettre ton fil en arriére plan et créer un pour tes item trois classes, une transparente (avant le fil a plomb), une avec le fil a plomb comme background (l'item actif ou survolé) et enfin une avec un background blanc apres l'item choisi, de cette maniére ton fil a sera invisible aprés le plomb.

Ensuite avec javscript tu crees une boucle qui vat récupérer l'ensemble de tes item item[0], item[1], etc... imaginons que chaque item a un id "item1" tu peux faire en sorte que if(numitem<itemencour){classe = transparent} et if(numitem>itemencour){classe = blanc} et this.classe = fil_a_plomb

En gros il faut ecrire une fonction qui assigne a tout les item avant le numero actif la classe transparente, et à tout les item aprés, la classe avec le fond blanc. Tout ça varie sur en évenement onmouseover ainsi qu' au chargement de chaque page.

Par contre, atention, si tu fais ça avec javascript, il faut que tout les background utilisés pour réaliser l'effet soit générer par le script pour que sans celui ci le resultat reste agréable, par exemple avec un simple changement de couleur au passage de la souris.
Modifié par matmat (02 Apr 2007 - 05:48)

Waou cool ! Pleins de solutions à l'horizon

Je précise juste encore une fois que je suis une bille en JS ... Vos solutions me parle donc théoriquement mais en pratique ... c'est autre chose !

@ Florent V.
Je suit ton conseil et vais de ce pas créer un topic dans le bon salon

@ Virtualgadjo
C'est vrai que les effets à la mootools sont bien intéressants. Par contre ça me parle moyen niveau mise en oeuvre ... Si le temps et l'envie te prend de me filer un coup de main, c'est avec plaisir !


@ Matmat
Je visualise bien la solution préconisée mais comme (re)précisé plus haut Js et moi ça fait deux ... Donc je garde ta solution sous le coude et essayerais quand j'aurais un peu plus de temps (le temps d'apprendre JS )

Bonjour,

Et sans JS, juste css ? A parfaire, juste pour l'idée

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
			
<head> 

<title>Test</title>
<style type="text/css">	 
*{margin: 0; padding:0;}

#conteneur{
width: 199px;
border: 1px solid black;
margin: auto;

}  

#mur{
width: 199px;
height: 114px;
margin: auto;
background: url(mur.jpg);
background-repeat: no-repeat;

}

img{
position: absolute;
bottom: 0px;
left: 8px;
}

ul{	 
list-style-type: none;
padding-top: 50px;
padding-left: 45px;
padding-bottom: 48px;
overflow: hidden;
background: url(fil.jpg);
background-repeat: repeat-y;
background-position: 8px 22px; 
position: relative;
}
li{
width: 100px;
}

a{
display: block;
position: relative;
height: 46px;
line-height: 46px;
text-decoration: none;
color: #000;
}

a:hover{
background:#e6fde1;
}
  
a span{
display: none;

}

a:hover span.un{
display: block;
width: 37px;
height: 278px;
background: url(plomb1.jpg);
position: absolute;
z-index: 10;
top: 0;
left: -37px;
}


a:hover span.deux{
display: block;
width: 37px;
height: 232px;
background: url(plomb2.jpg);
position: absolute;
z-index: 10;
top: 0;
left: -37px;
}

a:hover span.trois{
display: block;
width: 37px;
height: 186px;
background: url(plomb3.jpg);
position: absolute;	
z-index: 10;
top: 0;
left: -37px;
}

a:hover span.quatre{
display: block;
width: 37px;
height: 92px;
background: url(plomb4.jpg);
position: absolute;
z-index: 10;
top: 0;
left: -37px;
}
</style>
</head>

<body>
<div id="conteneur">
	<div id="mur">	
	</div>
	
<ul>
	<li><a href="#" ><span class="un"></span>lien 1</a><li>
	<li><a href="#" ><span class="deux"></span>lien 2</a><li>
	<li><a href="#" ><span class="trois"></span>lien 3</a><li>
	<li><a href="#" ><span class="quatre"></span>lien 4</a><li>
	<img src="plomb.jpg" alt="" />
</ul>

</div>	
	
	 
</body>
</html>

Zut, il manque 2 images


Désolé

Ca à l'air intéressant tout ça ...
(Manquerait pas 2 images encore : mur.jpg et fil.jpg ?)

En tout cas je jette un oeil à ta solutions qui à le mérite de s'affranchir de JS (et là ça me parle grave )


au temps pour moi pour mur.jpg j'ai répondu vite fait sans vraiment maté le code mais pour fil.jpg ? Modifié par barbe douce (02 Apr 2007 - 11:09)[/edit]

Juste pour comprendre :

A quoi sert l'image du plomb intégrer dans le html ?
Et comment tu gére la "disparition" du fil ?

Re,

Désolé mais le code précédent au un gros problème de compatibilité avec IE,
Juste pour une idée pour faire plus robuste (cette fois j'ai testé ie7, 6 opréra ) et donc plus simple.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
			
<head> 

<title>Test</title>
<style type="text/css">	 
*{margin: 0; padding:0;}

#conteneur{
width: 199px;
overflow: hidden;
border: 1px solid black;
margin: auto;
background: url(fond_mur.jpg);
background-repeat: no-repeat;
}  



ul{	 
list-style-type: none;
margin-top: 114px;
padding-left: 44px;
padding-bottom: 48px;
overflow: hidden;

}
li{
width: 75px;
height: 46px;
position: relative;
}

a{
display: block;
height: 46px;
line-height: 46px;
text-decoration: none;
color: #000;
}

a:hover{
background:#e6fde1;
}
  
a span{
display: none;

}

a:hover span{
display: block;
width: 37px;
background: white url(plomb4.jpg);
background-repeat: no-repeat;
position: absolute;
top: 0;
left: -37px;
}

.un{
height: 230px;
}

.deux{
height: 184px;
}

.trois{
height: 138px;
}

.quatre{
height: 92px;
}


</style>
</head>

<body>
<div id="conteneur">
	
<ul>
	<li><a href="#"><span class="un"></span>lien 1</a></li>
	<li><a href="#"><span class="deux"></span>lien 2</a></li>
	<li><a href="#"><span class="trois"></span>lien 3</a></li>
	<li><a href="#"><span class="quatre"></span>lien 4</a></li>

</ul>
	
</div>	
	
	 
</body>
</html>

J'espère n'avoir rien oublié cette fois !!

Des petits retours sur cette solutions tout css forte intéressante, mais non dénuée de faiblesse :

- ne supporte pas le redimensionement des polices
- ne permet pas d'avoir un item sur 2 lignes (height fixe)
- Impossibilité de positionner le fil à plomb en haut du menu est de le faire "descendre" en fonction des items survolés
- En cas de redesign léger (changement couleurs) obligation de refaire les images du fil à plomb pour avoir un background équivalent

Malgrès tout ça c'est une solution que je garde pour l'instant (pas d'alternative JS en vue)
Je met le post en semi-résolu donc ...

Encore merci à tous pour votre implication !

Salut,

Bon, concernant la fragilité liée au redimensionnement des polices, c'est un problème intrinsèque à ce genre de menu, il sera difficile de mieux faire (à mon niveau )

Pour Les items à 2 lignes, le correctif devrait aller mais il faut implémenter la classe à la main sur les items longs.

Pour l'inversion du sens du fil à plomb, sans problème réalisé (ie6à7, ff et opera)

Voilou

<style type="text/css">	 

*{margin: 0; padding:0;}

#conteneur{
width: 200px;
overflow: hidden;
border: 1px solid black;
margin: auto;
background: url(fond_mur2.jpg);
background-repeat: no-repeat;
}  

ul{	 
list-style-type: none;
padding-top: 160px;
padding-left: 44px;
padding-bottom: 48px;
overflow: hidden;
}

li{
width: 80%;
height: 46px;
position: relative;
}

a{
display: block;
text-decoration: none;
color: #000;
height: 46px;
font-size: 1em;
line-height: 46px;
}

a.deux_ligne{
line-height: 1.4em;
}

a:hover{
background:#e6fde1;
}

a span{
display: none;
}

a:hover span{
display: block;
width: 37px;
background: white url(fil.jpg);
background-repeat: repeat-y;
position: absolute;
left: -37px;
}

.un{
height: 92px;
top: -46px;
}
.deux{
height: 138px;
top: -92px;
}

.trois{
height: 184px;
top: -138px;
}

.quatre{
height: 230px;
top: -184px
}

 em{
position: absolute;
display: block;
background: url(plomb4.jpg);
width: 37px;
height: 46px;
left: 0;
bottom: 0;
}

</style>
</head>
<body>
<div id="conteneur">
<ul>
	<li><a href="#"  class="deux_ligne"><span class="un"><em></em></span>lien 1 bla bla bla bla bla</a></li>
	<li><a href="#"><span class="deux"><em></em></span>lien 2</a></li>
	<li><a href="#"><span class="trois"><em></em></span>lien 3</a></li>
	<li><a href="#"><span class="quatre"><em></em></span>lien 4</a></li>
</ul>
</div>	
</body>

C'est vraiment trop cool !!!

Merci à toi ghost !

C'est pile poil ce que je cherchais à faire !

Vraiment agréable d'avoir des réponses aussi rapide/complète/pertinentes.

Si ça en intéressent certains voilà le résultat
Modifié par barbe douce (03 Apr 2007 - 10:48)