bonjour à tous!
voilà 3 semaines que je galère! j'ai fais de nombreux test sans succès!
j'ai une menu type collapsing de 4 éléments. Chaque élément étant un menu avec un sous-menu.
J'espère que je vais m'exprimer au mieux pour une bonne compréhension à votre lecture.
Le but est en cliquant sur un lien de la page (contenu) du sous menu 2 du menu 1,le menu actuel collapsing se ferme puis ouvre le menu collapsing cible avec la bonne page (contenu) du sous-menu cible (ex: page (contenu) du sous menu 2 du menu 2).
voici le js original de l'animation du collapsing
voici mon ajout de code :
Une fois le rafraichissment de la page html, le collapsing se cale sur le menu 2 au lieu d'un callage représentant les 4 menus.
voici une partie HTML
j'ai fais des test depuis le html pour effectuer le process mais sans succès car je perds deux menu (invisble). cela m'a permis de mieux comprendre le JQ et j'ai compris que le solution viens depuis le fichier JS lui même. j'ai testé la fonction type $.fn.fold1($li_e1) = function { mais echec à la clef!
merci d'avance pour la lecture et espère trouver une direction pour résoudre le problème.
a+
voilà 3 semaines que je galère! j'ai fais de nombreux test sans succès!
j'ai une menu type collapsing de 4 éléments. Chaque élément étant un menu avec un sous-menu.
J'espère que je vais m'exprimer au mieux pour une bonne compréhension à votre lecture.
Le but est en cliquant sur un lien de la page (contenu) du sous menu 2 du menu 1,le menu actuel collapsing se ferme puis ouvre le menu collapsing cible avec la bonne page (contenu) du sous-menu cible (ex: page (contenu) du sous menu 2 du menu 2).
voici le js original de l'animation du collapsing
$(function () {
//all the menu items
var $items = $('#cc_menu .cc_item');
//number of menu items
var cnt_items = $items.length;
//if menu is expanded then folded is true
var folded = false;
//timeout to trigger the mouseenter event on the menu items
var menu_time;
/**
bind the mouseenter, mouseleave to each item:
- shows / hides image and submenu
bind the click event to the list elements (submenu):
- hides all items except the clicked one,
and shows the content for that item
*/
$items.unbind('mouseenter')
.bind('mouseenter',m_enter)
.unbind('mouseleave')
.bind('mouseleave',m_leave)
.find('.cc_submenu > ul > li')
.bind('click',function(){
var $li_e = $(this);
//if the menu is already folded,
//just replace the content
if(folded){
hideContent();
showContent($li_e.attr('class'));
}
else //fold and show the content
fold($li_e);
});
/**
mouseenter function for the items
the timeout is used to prevent this event
to trigger if the user moves the mouse with
a considerable speed through the menu items
*/
$.fn.m_enter() = function {
var $this = $(this);
clearTimeout(menu_time);
menu_time = setTimeout(function(){
//img
$this.find('img').stop().animate({'top':'0px'},400);
$this.find('.cc_title').stop().animate({'top':'449px'},400).css('background','#3c824e');
//cc_submenu ul
$this.find('.cc_submenu > ul').stop().animate({'height':'81px'},400);
},200);
}
//mouseleave function for the items
/* Survole de la souris sur les menus */
function m_leave(){
var $this = $(this);
clearTimeout(menu_time);
//img
$this.find('img').stop().animate({'top':'-600px'},400);
$this.find('.cc_title').stop().animate({'top':'267px'},400).css('background','none');
//cc_submenu ul
$this.find('.cc_submenu > ul').stop().animate({'height':'0px'},400);
}
//back to menu button - unfolds the menu
$('#cc_back').bind('click',unfold);
/**
hides all the menu items except the clicked one
after that, the content is shown
*/
$.fn.fold($li_e) = function {
var $item = $li_e.closest('.cc_item');
var d = 100;
var step = 0;
$items.unbind('mouseenter mouseleave');
$items.not($item).each(function(){
var $item = $(this);
$item.stop().animate({
'marginLeft':'-231px'
},d += 200,function(){
++step;
if(step == cnt_items-1){
folded = true;
showContent($li_e.attr('class'));
}
});
});
}
/**
shows all the menu items
also hides any item's image / submenu
that might be displayed
*/
$.fn.unfold() = function {
$('#cc_content').stop().animate({'left':'-693px'},600,function(){
var d = 100;
var step = 0;
$items.each(function(){
var $item = $(this);
$item.find('img')
.stop()
.animate({'top':'-600px'},200)
.andSelf()
.find('.cc_submenu > ul')
.stop()
.animate({'height':'0px'},200)
.andSelf()
.find('.cc_title')
.stop()
.animate({'top':'267px'},200).css('background','none');
$item.stop().animate({
'marginLeft':'0px'
},d += 200,function(){
++step;
if(step == cnt_items-1){
folded = false;
$items.unbind('mouseenter')
.bind('mouseenter',m_enter)
.unbind('mouseleave')
.bind('mouseleave',m_leave);
hideContent();
}
});
});
});
}
//function to show the content
$.fn.showContent(idx) = function {
$('#cc_content').stop().animate({'left':'231px'},200,function(){
$(this).find('.'+idx).fadeIn();
});
}
//function to hide the content
$.fn.hideContent = function (){
$('#cc_content').find('div.block').hide();
}
});
voici mon ajout de code :
/* $.fn.fold1($li_e1) = function { */
function fold1($li_e1) {
var $item = $li_e1.closest('.cc_item');
alert('JS - MSG-Fonction : fold($li_e1) ' + '\n' + 'Identification du menu par un clique sur un des liens : ' + '\n' + $item.text());
alert('JS - MSG-Fonction : fold($li_e1) ' + '\n' + 'Identification du lien cliqué : ' + '\n\n' + $li_e1.text());
var d = 100;
var step = 0;
$items.unbind('mouseenter mouseleave');
$items.not($item).each(function(){
var $item = $(this);
alert('JS - MSG-Fonction : fold($li_e1) ' + '\n' + 'Identification des trois autres menus : ' + '\n' + $item.text());
$item.stop().animate({
'marginLeft':'-231px'
},d += 200,function(){
++step;
if(step == cnt_items-1){
folded = true;
showContent($li_e1.attr('class'));
alert('JS - MSG-Fonction : fold($li_e1) ' + '\n' + 'Affiche le Menu et Lien cible : ' + '\n' + $li_e1.text());
}
});
return $(this);
});
}
Une fois le rafraichissment de la page html, le collapsing se cale sur le menu 2 au lieu d'un callage représentant les 4 menus.
voici une partie HTML
<head>
<script type="text/javascript" src="js/jquery_1.8.2.js"></script>
<script type="text/javascript" src="js/animate.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.cc_submenu a').click(function(){
$('.cc_submenu a').removeClass('current');
$(this).addClass('current');
});
});
</script>
<!-- AdOn Javascript Test -->
<script type="text/javascript" language="javascript">
$(document).ready(function() {
/* Identification de la liste LI numéro 2 du 2ème Marqueur UL de liste du Sous-Menu */
$("#nav2 > ul > li:nth-child(2)").append("<span> - LI2</span>");
/*
alert('Liste LI No.2 du Sous-Menu 2 - Titre de la liste : ' + '\n\n' + $("#nav2 > ul > li:nth-child(2)").text());
alert('Menu 2 - Titre du Menu No.2 & Titres des listes LIx : ' + '\n' + $("#cc_menu > .cc_item:eq(1)").text());
alert('Sous-Menu 2 - Titres des listes LIx : ' + '\n' + $("ul:eq(1)").text());
alert('Titre de la liste No.2 - Texte de la liste : ' + '\n\n' + $("ul:eq(1) li:nth-child(2)").text());
*/
/*
$(".test").click(function(){
alert('Titre de la liste No.2 - Texte de la liste : ' + '\n\n' + $("ul:eq(1) li:nth-child(2)").text());
/* $(".test").fold1($li_e1).click(); */
/* $(".ctaille").MonTest1().show(); */
/*});*/
$(".test").fold1();
});
</script>
</head>
<body>
<div id="cc_menu" class="cc_menu">
<!-- menu -->
<div class="cc_item" style="z-index:4;">
<img src="images/1/1.jpg" alt="1" /> <!-- style="padding-top:0px" -->
<span class="cc_title" style="top:449px;"><h3><a>titre menu 1</a></h3></span>
<div class="cc_submenu">
<ul style="height:81px">
<li class="cc_content_1_1"><a href="index.html#1" title="1" rel="tag">SM1</a></li>
<li class="cc_content_1_2"><a href="index.html#2" title="2" rel="tag">SM2</a></li>
<li class="cc_content_1_3"><a href="index.html#3" title="3" rel="tag">SM3</a></li>
</ul>
</div>
</div>
<div class="cc_item" style="z-index:3">
<img src="images/2/2.jpg" alt="2" />
<span class="cc_title"><h3><a>Titre Menu 2</a></h3></span>
<div class="cc_submenu">
<ul>
<li class="cc_content_2_1"><a href="index.html#1" title="1" rel="tag">SM1</a></li>
<li class="cc_content_2_2"><a href="index.html#2" title="2" rel="tag">SM2</a></li>
<li class="cc_content_2_3"><a href="index.html#3" title="3" rel="tag">SM3</a></li>
</ul>
</div>
</div>
<div class="cc_item" style="z-index:2;">
<img src="images/3/3.jpg" alt="3" />
<span class="cc_title"><h3><a>Titre menu 3</a></h3></span>
<div class="cc_submenu">
<ul>
<li class="cc_content_3_1"><a href="index.html#1" title="1" rel="tag">SM1</a></li>
<li class="cc_content_3_2"><a href="index.html#2" title="2" rel="tag">SM2</a></li>
</ul>
</div>
</div>
<div class="cc_item" style="z-index:1;">
<img src="images/1/1.jpg" alt="1" />
<span class="cc_title"><h3><a>Titre menu 4</a></h3></span>
<div class="cc_submenu">
<ul>
<li class="cc_content_4_1"><a href="index.html#1" class="ClassTop" title="1" rel="tag">SM1</a></li>
<li class="cc_content_4_2"><a href="index.html#2" class="ClassTop" title="2" rel="tag">SM2</a></li>
<li class="cc_content_4_3"><a href="index.html#3" class="ClassTop" title="3" rel="tag">SM3</a></li>
</ul>
</div>
</div>
<div class="cc_content_1_2 block">
<div class="scroll-wrap">
<div id="Cadre">
<div id="CoffretTxT">
<ul>
<li class="test"><div class="TitrePuce"><strong><a href="#">lien1</a></strong></div></li>
<li><div class="TitrePuce"><strong><a href="#">Lien2</a></strong></div></li>
<li><div class="TitrePuce"><strong><a href="#">Liens3</a></strong></div></li>
</ul>
</div>
</div>
</div>
</div>
<div class="cc_content_2_2 block">
<div class="scroll-wrap">
<div id="Cadre">
<div> contenu page à afficher </div>
</div>
</div>
</div>
</body>
j'ai fais des test depuis le html pour effectuer le process mais sans succès car je perds deux menu (invisble). cela m'a permis de mieux comprendre le JQ et j'ai compris que le solution viens depuis le fichier JS lui même. j'ai testé la fonction type $.fn.fold1($li_e1) = function { mais echec à la clef!
merci d'avance pour la lecture et espère trouver une direction pour résoudre le problème.
a+
