Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
652 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1484695
sixpack
Posté le 01-12-2006 à 06:36:29  profilanswer
 

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
mood
Publicité
Posté le 01-12-2006 à 06:36:29  profilanswer
 

n°1484696
gatsu35
Posté le 01-12-2006 à 06:43:45  profilanswer
 
n°1484697
sixpack
Posté le 01-12-2006 à 06:46:20  profilanswer
 

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

n°1484699
gatsu35
Posté le 01-12-2006 à 06:53:03  profilanswer
 

Ben tu le fais toi meme :/

n°1484701
sixpack
Posté le 01-12-2006 à 07:02:14  profilanswer
 

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

n°1484702
gatsu35
Posté le 01-12-2006 à 07:02:50  profilanswer
 

Javascript :/

n°1484705
gatsu35
Posté le 01-12-2006 à 07:19:36  profilanswer
 

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


Message édité par gatsu35 le 01-12-2006 à 07:28:03
n°1484706
sixpack
Posté le 01-12-2006 à 07:20:35  profilanswer
 

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

n°1484707
sixpack
Posté le 01-12-2006 à 07:21:50  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
[CSS] Une div devant une autre!Aide sur un Arbre binaire container
Menu déroulant CSS/JS et DIVAS - Menu de navigation sans boutons (texte interactif)
ipconfig /all > Vers page htmlUpload phot dans un fichier html
insertion code source php dans menu déroulant html ?[ORACLE-PL/SQL] [Résolu] Trigger et appel de procédure externe
Plus de sujets relatifs à : [HTML/CSS] Menu en arbre ouvert [résolu merci Gatsu35]


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR