28172 sujets

CSS et mise en forme, CSS3

Afficher les sous-éléments lors du survol d'un élément d'une liste

Bonjour,

J'ai une liste de liens qui elle-même contient des sous-listes.
J'aimerais que les sous-listes soient cachées et que lors du survol d'un élément de la liste, les sous-listes contenues dans celle-ci s'affichent.

Voici mon code :

CSS :
#liste li ul {
	position: absolute;
	left: -999em;
}
#liste li:hover ul,
#liste li.sfhover ul {
	left: auto;
	min-height: 0;
}

Javascript :
        sfHover = function() {
        var sfEls = document.getElementById("menu").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);


xHTML :
<div id="liste">
  <ul>
    <li><a href="#">element</a></li>
    <li><a href="#">element</a>
      <ul>
        <li><a href="#">sous-element</a></li>
        <li><a href="#">sous-element</a></li>
      </ul>
    </li>
    <li><a href="#">element</a>
      <ul>
        <li><a href="#">sous-element</a></li>
      </ul>
    </li>
    <li><a href="#">element</a>
      <ul>
        <li><a href="#">sous-element</a></li>
        <li><a href="#">sous-element</a></li>
      </ul>
    </li>
  </ul>
</div>

La page de test : http://blaisephoto.fr/autres/testliste.html

Ce que je veux réaliser :

La liste à son état initial :
upload/21118-liste1.jpg

La liste lorsque le deuxième élément est survolé :
upload/21118-liste2.jpg

J'ai fait de nombreuses tentatives mais tout ce que j'ai réussi à obtenir est ce "truc" :
upload/21118-liste3.jpg

Merci de votre aide Smiley smile [/i][/i]
Modifié par Blaise18 (27 Apr 2009 - 17:29)
Désolé, j'ai édité mon post.
Merci pour le lien je vais regarder ça Smiley smile
Modifié par Blaise18 (27 Apr 2009 - 17:22)
J'ai suivi le tuto que tu m'as indiqué.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<title>Test liste 2</title>
<script type="text/javascript">  
         <!--
$(document).ready( function () {
	// On cache les sous-menus
	// sauf celui qui porte la classe "open_at_load" :
	$("ol.sous_element:not('.open_at_load')").hide();
	// On selectionne tous les items de liste portant la classe "toggleSubMenu"
    
	// et on remplace l'element span qu'ils contiennent par un lien :
	$("li.toggle span").each( function () {
	// On stocke le contenu du span :
	var TexteSpan = $(this).text();
	$(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '</a>') ;
} ) ;
    
	// On modifie l'evenement "click" sur les liens dans les items de liste
	// qui portent la classe "toggleSubMenu" :
	$("li.toggle > a").mouseover( function () {
	// Si le sous-menu etait deja ouvert, on le referme :
	if ($(this).next("ol.sous_element:visible").length != 0) {
                $(this).next("ol.sous_element").slideUp("normal", function () { $(this).parent().removeClass("open") } );
	}
	// Si le sous-menu est cache, on ferme les autres et on l'affiche :
	else {
		$("ol.sous_element").slideUp("normal", function () { $(this).parent().removeClass("open") } );
		$(this).next("ol.sous_element").slideDown("normal", function () { $(this).parent().addClass("open") } );
		}
	// On empêche le navigateur de suivre le lien :
	return false;
});
    
} ) ;
// -->
</script>
</head>
<body>
<ol>
  <li class="toggle"><span><a href="http://www.alsacreations.com">element</a></span>
    <ol class="sous_element">
      <li><a href="#">sous-element</a></li>
      <li><a href="#">sous-element</a></li>
    </ol>
  </li>
  <li class="toggle"><span><a href="http://www.alsacreations.com">element</a></span>
    <ol class="sous_element">
      <li><a href="#">sous-element</a></li>
    </ol>
  </li>
  <li class="toggle"><span><a href="http://www.alsacreations.com">element</a></span>
    <ol class="sous_element">
      <li><a href="#">sous-element</a></li>
      <li><a href="#">sous-element</a></li>
    </ol>
  </li>
</ol>
</body>
</html>

J'ai simplement remplacé le "click" par "mouseover" pour que les sous-éléments s'affichent lors du survol.
Cependant, j'aimerais que les liens des éléments (classe "toggle") puissent jouer leur rôle de liens Smiley sweatdrop

La page de test : http://blaisephoto.fr/autres/testliste2.html

Je ne connais pas le Javascript donc si vous pouviez m'aider un peu... Smiley smile
Modifié par Blaise18 (28 Apr 2009 - 06:06)
Sujet clos
Aller à