[JQuery] Menu déroulant vertical 3 niveaux avec le plug-in Collapsor
1 message
• Page 1 sur 1
- Splouch
- Nouveau WRInaute
- Messages: 1
- Inscription: 17 Juil 2009
[JQuery] Menu déroulant vertical 3 niveaux avec le plug-in Collapsor
le Ven Juil 17, 2009 10:46
Bonjour !
Je me tourne vers vous car j'essaye désespérément 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 combiner :
- le menu exemple du plug-in Collapsor : http://www.jesuscarrera.info/demos/collapsor/
- le menu donné en exemple sur Alsacréations : http://www.alsacreations.com/tuto/lire/602-Creer-un-menu-accordeon-avec-jQuery.html
Je ne trouve pas la solution et sur internet les forums qui parlent de Collapsor sont plutôt rare.
Si quelqu'un pouvait me sortir de ce mauvais pas ce serait génial.
Je joins le code dudit menu.
Merci de votre aide !
Je me tourne vers vous car j'essaye désespérément 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 combiner :
- le menu exemple du plug-in Collapsor : http://www.jesuscarrera.info/demos/collapsor/
- le menu donné en exemple sur Alsacréations : http://www.alsacreations.com/tuto/lire/602-Creer-un-menu-accordeon-avec-jQuery.html
Je ne trouve pas la solution et sur internet les forums qui parlent de Collapsor sont plutôt rare.
Si quelqu'un pouvait me sortir de ce mauvais pas ce serait génial.
Je joins le code dudit menu.
Merci de votre aide !
- Code: Tout sélectionner
<!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>
1 message
• Page 1 sur 1
Lectures recommandées sur ce thème :
- Menu déroulant vertical => Pb de préchargement Javascript
- menu déroulant vertical invisible en javascript
- Menu déroulant vertical création selon book Dreamw. mais ??
- Menu déroulant (scroll) ou menu effetjquery qui disparait ?
- Menu déroulant avec sous menu horizontale.
- menu accordeon 3 niveaux
- js et menu vertical
- Menu ul vertical
- [AJAX] Menu accordéon 3 niveaux !
- Recherche menu vertical extensible
Qui est en ligne
Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités
Contact
Confidentialité