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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [HTML/CSS] Menu en arbre ouvert [résolu merci Gatsu35]

sixpack

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 :

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

Publicité

gatsu35

Blablaté par Harko

http://gatsu.ftp.free.fr/html/Exem [...] cence.html :??:

sixpack

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

gatsu35

Blablaté par Harko

Ben tu le fais toi meme

sixpack

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

gatsu35

Blablaté par Harko

Javascript

gatsu35

Blablaté par Harko

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 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title></title>
<style type="text/css">
#menu, #menu ul, #menu li {margin:0; padding:0;list-style: none; display:block;}
#menu {width:160px; background:#CCC; font-size:13px;}
#menu ul {margin-left:15px;}
#menu a {text-decoration: none; color:#000; display:block; zoom:1;}
#menu li:hover span, #menu li.hover span, #menu a:hover {background:#999;}
#menu li {behavior:expression(addHover(this));} /*Add Hover on LI for IE*/
</style>
<script type="text/javascript">
/* Ajoute la pseudo methode hover sur un élément, via CSS, utilise la classe CSS .hover */
function addHover(elm) {
elm.style.behavior = " ";
elm.onmouseenter = function() {
this.className+= ' hover';
}
elm.onmouseleave = function() {
this.className = this.className.replace(/\bhover\b/,"" );
}
}
</script>
</head>
<body>
<ul id="menu">
<li><span>Menu 1</span>
<ul>
<li><a href="#">Sous Menu 1.1</a></li>
<li><a href="#">Sous Menu 1.2</a></li>
</ul>
</li>
<li><span>Menu 2</span>
<ul>
<li><a href="#">Sous Menu 2.1</a></li>
<li><a href="#">Sous Menu 2.2</a></li>
</ul>
</li>
<li><span>Menu 3</span>
<ul>
<li><a href="#">Sous Menu 3.1</a></li>
<li><a href="#">Sous Menu 3.2</a></li>
</ul>
</li>
<li><span>Menu 4</span>
<ul>
<li><a href="#">Sous Menu 4.1</a></li>
<li><a href="#">Sous Menu 4.2</a></li>
</ul>
</li>
</ul>
</body>
</html>

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

sixpack

Personne à un exemple svp

sixpack

parfait

je te connais pas mais je t'aime deja

Merci 1000 fois et plus

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

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 DIV	AS - Menu de navigation sans boutons (texte interactif)
ipconfig /all > Vers page html	Upload 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]

Page générée en 0.071 secondes