11486 sujets

JavaScript, DOM et API Web HTML5

Superfish : comment garder un sous-menu ouvert à l'ouverture ?

Bonjour,

j'ai besoin d'avoir un menu animé (donc j'ai choisi Superfish). J'ai aussi besoin qu'à l'ouverture de la page, le menu soit ouvert sur la sous-rubrique dont l'URL correspond à celle de la page en cours.

Je dois manquer quelque chose, mais je ne comprend pas pourquoi cela ne fonctionne pas.

Je vous mets le code de ma page intitulée "example2.html"

J'ai bien mis un lien vers cette page dans un des sous-menu, mais cela ne change rien. Le menu ne s'ouvre pas à l'ouverture de la page.

Merci de votre aide.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>A very basic Superfish menu example</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen">
		<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
		<script type="text/javascript" src="js/hoverIntent.js"></script>
		<script type="text/javascript" src="js/superfish.js"></script>
		<script type="text/javascript">

		// initialise plugins
		jQuery(function(){
			jQuery('ul.sf-menu').superfish();
		});

		</script>
        
<script type="text/javascript"> 
 
    $(document).ready(function() { 
        $('ul.sf-menu').superfish({ 
            delay:       1000,                            // one second delay on mouseout 
			hoverClass      : 'sfHover',
			pathClass:     'overideThisToUse', // the class you have applied to list items that lead to the current page 
            animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation 
            speed:       'fast',                          // faster animation speed 
            autoArrows:  false,                           // disable generation of arrow mark-up 
            dropShadows: false                            // disable drop shadows 
			pathLevels:    3,                  // the number of levels of submenus that remain open or are restored using pathClass 
			disableHI : false,
        }); 
    }); 
 
</script>
	</head>
	<body>
		<ul class="sf-menu">
			<li class="current">
				<a href="#a">menu item</a>
				<ul>
					<li>
						<a href="#aa">menu item that is quite long</a>
					</li>
					<li class="current">
						<a href="#ab">menu item</a>
						<ul>
							<li class="current"><a href="#">menu item</a></li>
							<li><a href="example2.html">menu item</a></li>
							<li><a href="#abb">menu item</a></li>
							<li><a href="#abc">menu item</a></li>
							<li><a href="#abd">menu item</a></li>
						</ul>
					</li>
					<li>
						<a href="#">menu item</a>
						<ul>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
						</ul>
					</li>
					<li>
						<a href="#">menu item</a>
						<ul>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">menu item</a>
			</li>
			<li>
				<a href="#">menu item</a>
				<ul>
					<li>
						<a href="#">menu item</a>
						<ul>
							<li><a href="#">short</a></li>
							<li><a href="#">short</a></li>
							<li><a href="#">short</a></li>
							<li><a href="#">short</a></li>
							<li><a href="#">short</a></li>
						</ul>
					</li>
					<li>
						<a href="#">menu item</a>
						<ul>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
						</ul>
					</li>
					<li>
						<a href="#">menu item</a>
						<ul>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
						</ul>
					</li>
					<li>
						<a href="#">menu item</a>
						<ul>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
						</ul>
					</li>
					<li>
						<a href="#">menu item</a>
						<ul>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">menu item</a>
			</li>	
		</ul>
	</body>
</html>
Bonjour,

atlantide a écrit :
J'ai bien mis un lien vers cette page dans un des sous-menu, mais cela ne change rien. Le menu ne s'ouvre pas à l'ouverture de la page.

Euh... oui. Pourquoi, le simple fait qu'il y a un lien vers la page en cours dans un sous-menu devrait faire que le sous-menu s'affiche par magie, et donc ne respecte pas les styles déclarés ou le comportement appliqué par le script JS?

Je ne comprends pas exactement la logique que tu appliques ici. Est-ce que SuperFish propose cette fonctionnalité (garder un sous-menu ouvert)? Ça me semblerait étrange, car le principe d'un menu déroulant est généralement que les sous-menus viennent s'afficher par dessus le contenu, donc garder un sous-menu visible en permanence poserait problème.
Alors si je lis ton code:

1. Tu initialises une première fois le script (on lui disant de s'appliquer à ul.sf-menu), sans lui passer de paramètre donc ce sont les options par défaut qui sont utilisées.

2. Puis tu initialises une deuxième fois le script, cette fois en passant des paramètres, et parmi ces derniers tu as: 
pathClass: 'overideThisToUse',
Il faudrait peut-être redéfinir cette classe? À priori il faudrait utiliser 'current' comme valeur vu que c'est la classe que tu utilises dans ton code HTML.
Sujet clos
Aller à