[HTML/CSS] Menu en arbre ouvert [résolu merci Gatsu35]

Menu en arbre ouvert [résolu merci Gatsu35] [HTML/CSS] - HTML/CSS - Programmation

Marsh Posté le 01-12-2006 à 06:36:29    

Bonjour.
 
je sais comment faire des menu simple avec des rollover, mais je me trouve fasse à un probleme donc je ne trouve pas de piste de travail.
 
Je dois faire un menu en arbre deployé. exemple
 

Code :
  1. 1.
  2.        1.1
  3.        1.2
  4.        1.3
  5. 2.
  6.        2.1
  7.        2.2
  8. 3.


 
Seul les liens de type 1.1 1.2 sont utilisé.
Mais quand je passe avec la souris sur 1.1 je veux que le 1. soit egalement surligné.
 
QQun à une idée?
 
merci


Message édité par sixpack le 01-12-2006 à 07:23:42
Reply

Marsh Posté le 01-12-2006 à 06:36:29   

Reply

Marsh Posté le 01-12-2006 à 06:43:45    

Reply

Marsh Posté le 01-12-2006 à 06:46:20    

oui c'est pas mal mais y'a pas de rollover et les de premier niveau sont "cliquable"

Reply

Marsh Posté le 01-12-2006 à 06:53:03    

Ben tu le fais toi meme :/

Reply

Marsh Posté le 01-12-2006 à 07:02:14    

http://perso.latribu.com/six-pack/ [...] cence.html
 
 
je vois pas comment quand la souris est sur un sous-menu,
 
le menu parent se surligne aussi

Reply

Marsh Posté le 01-12-2006 à 07:02:50    

Javascript :/

Reply

Marsh Posté le 01-12-2006 à 07:19:36    

En fait nan, c'est pas en JS.

 

mais en CSS en declarant le hover sur le li

 

http://gatsu.ftp.free.fr/html/menuoveronparent.html

 

au passage j'ai intégré une méthode JS que j'ai codé hier qui me permet de simuler la pseudo classe :hover sur un élément en utilisant une classe CSS au passage, bien sur il faut écraser cette valeur dans le style inline (style.behavior=" " ) sinon on risque d'avoir un loopback permanent de la fonction. Maintenant tu as un hover finger in da nose.
Remarquez que j'utilise les events onmouseenter et onmouseleave qui d'après PPK sont les évènements qui correspondent plus à la pseudo classe :hover. Ce sont des events propriétaires de IE. Donc on garde quand même onmouseover et onmouseout de libre.

 


Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html><head>
  4. <title></title>
  5. <style type="text/css">
  7. #menu, #menu ul, #menu li {margin:0; padding:0;list-style: none; display:block;}
  8. #menu {width:160px; background:#CCC; font-size:13px;}
  9. #menu ul {margin-left:15px;}
  10. #menu a {text-decoration: none; color:#000; display:block;  zoom:1;}
  11. #menu li:hover span, #menu li.hover span, #menu a:hover {background:#999;}
  12. #menu li {behavior:expression(addHover(this));} /*Add Hover on LI for IE*/
  14. </style>
  15. <script type="text/javascript">
  16. /* Ajoute la pseudo methode hover sur un élément, via CSS, utilise la classe CSS .hover */
  17. function addHover(elm) {
  18. elm.style.behavior = " ";
  19. elm.onmouseenter = function() {
  20.  this.className+= ' hover';
  21. }
  22. elm.onmouseleave = function() {
  23.  this.className = this.className.replace(/\bhover\b/,"" );
  24. }
  25. }
  27. </script>
  28. </head>
  29. <body>
  30. <ul id="menu">
  31. <li><span>Menu 1</span>
  32.  <ul>
  33.   <li><a href="#">Sous Menu 1.1</a></li>
  34.   <li><a href="#">Sous Menu 1.2</a></li>
  35.  </ul>
  36. </li>
  37. <li><span>Menu 2</span>
  38.  <ul>
  39.   <li><a href="#">Sous Menu 2.1</a></li>
  40.   <li><a href="#">Sous Menu 2.2</a></li>
  41.  </ul>
  42. </li>
  43. <li><span>Menu 3</span>
  44.  <ul>
  45.   <li><a href="#">Sous Menu 3.1</a></li>
  46.   <li><a href="#">Sous Menu 3.2</a></li>
  47.  </ul>
  48. </li>
  49. <li><span>Menu 4</span>
  50.  <ul>
  51.   <li><a href="#">Sous Menu 4.1</a></li>
  52.   <li><a href="#">Sous Menu 4.2</a></li>
  53.  </ul>
  54. </li>
  55. </ul>
  57. </body>
  59. </html>


Message édité par gatsu35 le 01-12-2006 à 07:28:03
Reply

Marsh Posté le 01-12-2006 à 07:20:35    

Personne à un exemple svp http://miyutanto.free.fr/blog/themes/test/smilies/manga_sad.gif

Reply

Marsh Posté le 01-12-2006 à 07:21:50    

parfait
 
je te connais pas mais je t'aime deja :D
 
Merci 1000 fois et plus


Message édité par sixpack le 01-12-2006 à 07:24:04
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed