Le problème est le suivant :
L'interface une collapsing site navigation with jquery
Il y a 4 menus avec des sous menu pour chacun d'eux.
Comme le tout est sur un seul est unique page html, les sous-menus sont des ancres. Le but est de par exemple depuis la page du sous menu 2 du menu 1 de cliquer sur un lien, pour aller dans la page du sous-menu 3 du menu 3.
La démarche complète en cliquant sur le lien de la page du sous menu 2 du menu 1 doit :
1 – fermer la page du sous-menu 2 du menu 1
2 – ouvrir la page du sous-menu 3 du menu 3
Pour le moment, j'arrive à faire l'étape 1
J'ai essayé plusieurs possibilité trouvée sur le net sans succès et suis dans la confusion avec toute la lecture faite sur le net.
Code de la page html :
voici le code du fichier animate.js
merci d'avance de vos réponse
============== sa 23.02.2013 ============
bonjour à tous!
voici mes test
cela fonctionne manuellement sans me servir du fichier d'amination animate.js
En faisant appel aux fonctions contenue dans le fichier JS - pas de résultat!
Malgrés mes recherches, je n'est pas trouvé comment faire appel à une des fonctions.
merci d'avance de vos réponse!
Modifié par mounirmabrouk (23 Feb 2013 - 21:21)
L'interface une collapsing site navigation with jquery
Il y a 4 menus avec des sous menu pour chacun d'eux.
Comme le tout est sur un seul est unique page html, les sous-menus sont des ancres. Le but est de par exemple depuis la page du sous menu 2 du menu 1 de cliquer sur un lien, pour aller dans la page du sous-menu 3 du menu 3.
La démarche complète en cliquant sur le lien de la page du sous menu 2 du menu 1 doit :
1 – fermer la page du sous-menu 2 du menu 1
2 – ouvrir la page du sous-menu 3 du menu 3
Pour le moment, j'arrive à faire l'étape 1
J'ai essayé plusieurs possibilité trouvée sur le net sans succès et suis dans la confusion avec toute la lecture faite sur le net.
Code de la page html :
<!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" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-language" content="fr" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<!-- feuilles de style -->
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/mhslideshow.css" type="text/css" />
<!-- AdOn Javascript Interface -->
<!-- <script type="text/javascript" src="js/jquery.min.js"></script> -->
<!-- <script type="text/javascript" src="js/jquery_1.4.2.js"></script> -->
<script type="text/javascript" src="js/jquery_1.8.2.js"></script>
<script type="text/javascript" src="js/cufon-yui.js" ></script>
<script type="text/javascript" src="js/Existence_Light_300.font.js" ></script>
<script type="text/javascript" src="js/Cicle_Gordita_700.font.js"></script>
<script type="text/javascript" src="js/Dekka_Dense_JL_400.js"></script>
<script type="text/javascript" src="js/initblinds.js"></script>
<script type="text/javascript" src="js/glossy.js"></script>
<script type="text/javascript" src="js/fancyzoom.min.js"></script>
<!-- <script type="text/javascript" src="js/SubMenu.js"></script> -->
<!-- AdOn Javascript iFrame Form -->
<script type="text/javascript" src="js/FormInf.js"></script>
<script type="text/javascript" src="js/FormRdV.js"></script>
<!-- AdOn Javascript Diapo -->
<script type="text/javascript" src="js/mhslideshow.js"></script>
<!-- AdOn Javascript Fonts -->
<script type="text/javascript" src="js/Font.js"></script>
<!-- AdOn Scrolling jScrollbar -->
<link rel="stylesheet" href="CSS/jScrollbar.jquery.css" type="text/css" />
<script type="text/javascript" src="js/jquery-ui-1.9.1.custom.js"></script>
<script type="text/javascript" src="js/jquery-mousewheel.js"></script>
<script type="text/javascript" src="js/jScrollbar.jquery.min.js"></script>
<style type="text/css">
.jScrollbar3 {margin:2px}
</style>
<script type="text/javascript" src="js/jScrollbarStep.js"></script>
<!-- AdOn Javascript Accordion -->
<link rel="stylesheet" href="css/jquery.ui.accordion.css">
<link rel="stylesheet" href="css/jquery.ui.theme.css">
<link rel="stylesheet" href="css/jquery.ui.core.css">
<!-- <script src="js/jquery.ui.widget.js"></script> -->
<script src="js/jquery.ui.accordion.js"></script>
<script src="js/AnimAccordion.js"></script>
<script>
$(document).ready(function(){
$('a.cc_back1').click(function (){
});
});
</script>
</head>
<body>
<div id="wrap">
<div id="top_wrap">
<div id="cc_menu" class="cc_menu">
<!-- menu -->
<div class="cc_item" style="z-index:4;">
<div class="cc_submenu">
<ul style="height:81px">
<li class="cc_content_1_1"><a href="index.html#1_1" title="1_1" rel="tag">1_1</a></li>
<li class="cc_content_1_2"><a href="index.html#1_2" title="1_2" rel="tag">1_2</a></li>
<li class="cc_content_1_3"><a href="index.html#1_3" title="1_3" rel="tag">1_3</a></li>
</ul>
</div>
</div>
<div class="cc_item" style="z-index:3">
<div class="cc_submenu">
<ul id="lu1">
<li class="cc_content_2_1"><a href="index.html#2_1" title="2_1" rel="tag">2_1</a></li>
<li class="cc_content_2_2"><a href="index.html#2_2" title="2_2" rel="tag">2_2 </a></li>
<li class="cc_content_2_3"><a href="index.html#2_3" title="2_3" rel="tag">2_3</a></li>
</ul>
</div>
</div>
<div class="cc_item" style="z-index:2;">
<div class="cc_submenu">
<ul>
<li class="cc_content_3_1"><a href="index.html#3_1" title="3_1" rel="tag">3_1</a></li>
<li class="cc_content_3_2"><a href="index.html#3_2" title="3_2" rel="tag">3_2</a></li>
</ul>
</div>
</div>
<div class="cc_item" style="z-index:1;">
<div class="cc_submenu">
<ul>
<li class="cc_content_4_1"><a href="index.html#4_1" title="4_1" rel="tag">4_1</a></li>
<li class="cc_content_4_2"><a href="index.html#4_2" title="4_2" rel="tag">4_2</a></li>
<li class="cc_content_4_3"><a href="index.html#4_2" title="4_2" rel="tag">4_2</a></li>
</ul>
</div>
</div>
<!-- //menu -->
<div id="cc_content" class="cc_content">
<span id="cc_back" class="cc_back"></span>
<div id="1_1" class="cc_content_1_1 block" >
<div class="scroll-wrap">
<div class="scroll-pane">
<div id="Cadre">
<div class="TitrePuce"><a id="cc_back1" class="cc_back1"><strong>lien pointant sur sous-menu3 page 3</strong></a></div>
</div>
</div>
</div>
</div>
<div id="3_3" class="cc_content_3_3 block" >
<div class="scroll-wrap">
<div class="scroll-pane">
<div id="Cadre">
</div>
</div>
</div>
</div>
voici le code du fichier animate.js
$(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
*/
function m_enter(){
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
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);
$('#cc_back1').bind('click',unfold);
/**
hides all the menu items except the clicked one
after that, the content is shown
*/
function fold($li_e){
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
*/
function unfold(){
$('#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
function showContent(idx){
$('#cc_content').stop().animate({'left':'231px'},200,function(){
$(this).find('.'+idx).fadeIn();
});
}
//function to hide the content
function hideContent(){
$('#cc_content').find('div.block').hide();
}
});
merci d'avance de vos réponse
============== sa 23.02.2013 ============
bonjour à tous!
voici mes test
<script type="text/javascript" language="javascript">
$(document).ready(function() {
/* Identification des Menus X */
alert('Contenu du menu 1 : ' + $('#cc_menu > .cc_item:eq(0)').text());
alert('Contenu du menu 2 : ' + $('#cc_menu > .cc_item:eq(1)').text());
alert('Contenu du menu 3 : ' + $('#cc_menu > .cc_item:eq(2)').text());
alert('Contenu du menu 4 : ' + $('#cc_menu > .cc_item:eq(3)').text());
/* Identification du 1er marqueur UL de liste du Sous-Menu */
$("#nav1 > ul").append("<span> - UL1</span>");
alert('Balise UL No.1 - du Item 1 - Contenant les sous-menu suivant : ' + $("#nav1 > ul").text());
/* Identification du 2ème marqueur UL de liste du Sous-Menu */
/* --- Les deux orthographes fonctionne --- */
/* $("#nav2 > ul").append("<span> - UL2</span>"); */
$("ul:eq(1)").append("<span> - UL2</span>");
/* alert('Balise UL No.2 - du Item 2 - Contenant les sous-menu suivant : ' + $("#nav2 > ul").text()); */
alert('Balise UL No.2 - du Item 2 - Contenant les sous-menu suivant ul:eq(1) : ' + $("ul:eq(1)").text());
/* Identification de la liste LI numéro 2 du 1er Marqueur UL de liste du Sous-Menu */
$("#nav1 > ul > li:nth-child(2)").append("<span> - LI2</span>");
alert('Liste LI No.2 - du Item 1 : ' + ' Texte de la liste : ' + $("#nav1 > ul > li:nth-child(2)").text());
/* Identification de la liste LI numéro 1 du marqueur CoffreTxT */
$('#CoffretTxT > ul > li:nth-child(1)').append("<span> - LI1</span>");
alert('Liste LI No.1 - contenue dans la balise CoffreTxT : #CoffreTxT > ul > li:nth-child(1) ' + '\n' + $('#CoffretTxT > ul > li:nth-child(1)').text());
/* Identification de la liste LI numéro 2 du marqueur CoffreTxT */
$('#CoffretTxT > ul > li:nth-child(2)').append("<span> - LI2</span>");
alert('Liste LI No.2 - contenue dans la balise CoffreTxT : #CoffreTxT > ul > li:nth-child(2) ' + '\n' + $('#CoffretTxT > ul > li:nth-child(2)').text());
/* Déplacement du marqueur No. 2 */
$('#CoffretTxT > ul > li:nth-child(1)').click(function () {
alert('Cacher le menu 1 ' + $('#cc_menu > .cc_item:eq(0)').hide(0).text());
alert('Afficher le menu 2 ' + $('#cc_menu > .cc_item:eq(1)').animate({'left':'231px'},0).text());
/* Indentification/Repostionnement/Affichage de l'image */
alert('Identifcation de l\'Image : ' + '\n' + $('#cc_menu > .cc_item:eq(1) > img').attr('src'));
alert('Indetification de la coordonnées de l\'image Left X : ' + $('#cc_menu > .cc_item:eq(1) > img').offset().left);
alert('Indetification de la coordonnées de l\'image Top Y : ' + $('#cc_menu > .cc_item:eq(1) > img').offset().top);
alert('Re-Positionnement de la coordonnées de l\'image Top Y : ' + $('#cc_menu > .cc_item:eq(1) > img').offset({top: 0}));
/* Indentification/Repostionnement/Affichage du Titre */
alert('Indetification de la coordonnées du Titre Left X : ' + $('#cc_menu > .cc_item:eq(1) > .cc_title').offset().left);
alert('Indetification de la coordonnées du Titre Top Y : ' + $('#cc_menu > .cc_item:eq(1) > .cc_title').offset().top);
alert('Re-Positionnement de la coordonnées du Titre Top Y : ' + $('#cc_menu > .cc_item:eq(1) > .cc_title').animate({'top':'449px'},400).css('background','#3c824e'));
/* Indentification/Repostionnement/Affichage du Sous-Menu */
alert('Indetification de la coordonnées du sous-menu Left X : ' + $('#cc_menu > .cc_item:eq(1) > .cc_submenu').offset().left);
alert('Indetification de la coordonnées du sous-menu Top Y : ' + $('#cc_menu > .cc_item:eq(1) > .cc_submenu').offset().top);
alert('Re-Positionnement de la coordonnées du sous-menu Top Y : ' + $('#cc_menu > .cc_item:eq(1) > .cc_submenu > ul').animate({'height':'81px'},400));
});
/* Identification de la liste LI numéro 2 du marqueur CoffreTxT */
$('#CoffretTxT > ul > li:nth-child(2)').click(function anime() {
alert("Liste No.2 - contenue dans le marqueur CoffreTxT : #CoffreTxT > ul > li:nth-child(2)");
alert($('#CoffretTxT > ul > li:eq(1)').text());
$('#cc_menu > .cc_item:eq(0)').click(function hideContent(){});
});
$('#CoffretTxT > ul > li:nth-child(3)').click(function() {
alert("Liste No.3 - contenue dans le marqueur CoffreTxT : #CoffreTxT > ul > li:nth-child(3)");
});
$('#CoffretTxT > ul > li:nth-child(4)').click(function() {
alert("Liste No.4 - contenue dans le marqueur CoffreTxT : #CoffreTxT > ul > li:nth-child(4)");
});
$('#CoffretTxT > ul > li:nth-child(5)').click(function() {
alert("Liste No.5 - contenue dans le marqueur CoffreTxT : #CoffreTxT > ul > li:nth-child(5)");
});
$('#CoffretTxT > ul > li:nth-child(6)').click(function() {
alert("Liste No.6 - contenue dans le marqueur CoffreTxT : #CoffreTxT > ul > li:nth-child(6)");
});
$('#CoffretTxT > ul > li:nth-child(7)').click(function() {
alert("Liste No.7 - contenue dans le marqueur CoffreTxT : #CoffreTxT > ul > li:nth-child(7)");
});
$('#CoffretTxT > ul > li:nth-child(8)').click(function() {
alert("Liste No.8 - contenue dans le marqueur CoffreTxT : #CoffreTxT > ul > li:nth-child(8)");
});
$('#CoffretTxT > ul > li:nth-child(9)').click(function() {
alert("Liste No.9 - contenue dans le marqueur CoffreTxT : #CoffreTxT > ul > li:nth-child(9)");
});
});
</script>
cela fonctionne manuellement sans me servir du fichier d'amination animate.js
En faisant appel aux fonctions contenue dans le fichier JS - pas de résultat!
Malgrés mes recherches, je n'est pas trouvé comment faire appel à une des fonctions.
/* Identification de la liste LI numéro 2 du marqueur CoffreTxT */
$('#CoffretTxT > ul > li:nth-child(2)').click(function anime() {
alert("Liste No.2 - contenue dans le marqueur CoffreTxT : #CoffreTxT > ul > li:nth-child(2)");
alert($('#CoffretTxT > ul > li:eq(1)').text());
$('#cc_menu > .cc_item:eq(0)').click(function hideContent(){});
});
merci d'avance de vos réponse!
Modifié par mounirmabrouk (23 Feb 2013 - 21:21)