11548 sujets

JavaScript, DOM et API Web HTML5

[JQuery] Menu 3 niveaux avec collapsor

Bonjour !

J'essaye de coder un menu déroulant sur trois niveaux. N'y connaissant pas grand chose en Jquery et autre JS, j'essaye tant bien que mal d'associer des morceaux de code.

Là j'en suis à l'affichage du menu qui fonctionne de manière basique. Il coulisse et se ferme. Mon problème c'est que je n'arrive pas à intégrer la classe "open_at_load" pour le laisser ouvert sur certaines pages de mon site.

J'ai tenté de mixer :
- le menu exemple du plug-in collapsor :Collapsor
- le menu donné en exemple sur Alsacréations : Menu alsacreations

Je ne trouve pas la solution et sur internet les forums qui parlent de collapsor sont plutôt rare.

Merci de votre aide !


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script src="/collapsor/jquery-1.2.6.min.js" type="text/javascript"></script>
	<script src="/collapsor/jquery.collapsor.js" type="text/javascript"></script>

<style type="text/css">
		#navigation {
			margin: 0;
			padding: 0;
			list-style: none:
			background: #000;
			color: #fff;
			width: 200px;
			font: 1.2em "Trebuchet MS", sans-serif;
			}
		#navigation a, #navigation span {
			display: block;
			padding: 4px 10px;
			color: #fff;
			text-decoration: none;
			background: #000 url(menu-item.png) left bottom no-repeat;
			}
		#navigation .toggleSubMenu a, #navigation .toggleSubMenu span {
			background-image: url(menu-item-deroule.png);
			}
		#navigation .open a, #navigation .open span {
			background-image: url(menu-item-enroule.png);
			}
		#navigation a:hover, #navigation a:focus, #navigation a:active {
			text-decoration: underline;
			}
		#navigation .subMenu {
			font-size: .8em;
			background: #ccc url(subMenu.png) 0 0 repeat-x;
			font-size: .9em;
			margin: 0;
			padding: 0;
			border-bottom: 1px solid #666;
			}
		#navigation ul.subMenu a {
			background: none;
			padding: 3px 20px;
			}
	</style>


<script type="text/javascript">
		$(function(){
			$('ul a').collapsor();
			$('dl strong').collapsor({sublevelElement:'dl', speed: 1000});
		});
	</script>

<script type="text/javascript">
    <!--
    $(document).ready( function () {
        // On cache les sous-menus
        // sauf celui qui porte la classe "open_at_load" :
        $("ul.subMenu: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.toggleSubMenu 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.toggleSubMenu > a").click( function () {
            // Si le sous-menu etait deja ouvert, on le referme :
            if ($(this).next("ul.subMenu:visible").length != 0) {
                $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
            }
            // Si le sous-menu est cache, on ferme les autres et on l'affiche :
            else {
                $("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
                $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
            }
            // On empêche le navigateur de suivre le lien :
            return false;
        });
    
    } ) ;
    // -->
    </script>


</head>

<body>

<ul id="navigation">
			<li class="toggleSubMenu">
				<a href="#menu_1">Menu 1</a>
				<ul>
					<li>
						<a href="#menu_1_1">Menu 1-1</a>
					</li>
					<li>
						<a href="#menu_1_2">Menu 1-2</a>
						<ul>
							<li>
								<a href="#menu_1_2_1">Menu 1-2-1</a>
							</li>
							<li>
								<a href="#menu_1_2_2">Menu 1-2-2</a>
							</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				<a href="#menu_2">Menu 2</a>
			</li>
			<li>
				<a href="#menu_3">Menu 3</a>
			</li>
		</ul>


</body>
</html>

Modifié par Splouch (11 Jul 2009 - 14:01)
Personne pour m'aiguiller ?

Je sèche carrément et je ne sais même pas si ce que je demande est réalisable.

Merci.
k3isch a écrit :
Ton menu à trois niveau m'interesse ! Je vais m'en servir et peut être pouvoir t'aider Smiley cligne


Et bien ton aide sera la bienvenue parceque là je suis en train de m'arracher les cheveux. Smiley biggol
Sujet clos
Aller à