Forum d'entraide PHPFrance

Venez poser vos questions PHP, MySQL, HTML5, CSS, Javascript, Gestion de serveurs à la communauté PHPfrance
https://forum.phpfrance.com/

[RESOLU] Menu qui fonctionne sur l'index mais pas ailleurs

https://forum.phpfrance.com/viewtopic.php?f=8&t=270617

Page 1 sur 1

Menu qui fonctionne sur l'index mais pas ailleurs

Posté : 15 mars 2014, 17:03
par ninouee
Bonjour à tous,

Je suis en train de faire évoluer mon site en créant moi-même mes pages pour permettre aux gens qui naviguent dans le site de trouver des informations. Pour le moment je créée la structure avant de faire la forme puis le contenu.

Ma page d'index est fonctionnelle ainsi que le menu et le Hader.
Je travaille avec des "Include" en PHP pour ne pas avoir à modifier toutes les pages lorsque le site évoluera.

Quand j'ai créé ma nouvelle page qui est dans l'arborescence du site j'ai voulu tester si la base de mon CSS et mes includes fonctionnaient. J'ai bien tout qui s'affichent c'est à dire, le fond, le hader, et le menu. Sauf que... L'animation du menu ne fonctionne pas.
Voila un exemple: Normalement au survole de la souris sur le menu, les sous-menu s'affichent. Mais dans ma page test non.

Mon menu est issue de ce tutoriel http://tympanus.net/codrops/2010/07/16/ ... -box-menu/
Je l'ai quelque peut réadapté pour qu'il soit à la bonne largeur. Et je suppose que j'ai un problème avec le javascript ou du moins avec son adressage. Pourtant il est inclus dans mon fichier menu.

Voici un exemple d'adressage que j'ai utilisé dans ma page test pour appeler les différents éléments étant dans l'index: 
<!doctype html>
<html lang="fr">
<head>
   <meta charset="utf-8">
   <meta name="description" content="Forum sur les séries TV, mes films et Galerie d'avatars et de signature gratuite." />
    <meta name="keywords" content="avatar, avatars, signature, pix, set, wallpaper, série, TV show, télévision, cinéma, fond d'écran, image, séries, télévision, forum, galerie, acteur, actrice, personnage, épisode" />
    <meta name="google-site-verification" content="53JdXAPGwzb3Elbl8y_olptnWmfea8asGdXXF1L2cbU" />
  <title>L'homme de l'Atlantide</title>
  <link rel="icon" type="image/png" href="../../favicon.png" />
<link rel="stylesheet" type="text/css" href="../../entree.css">
</head>




<body>

<div class="corps">
<?php require ("../../header.php"); ?>
<?php include ("../../menu.php"); ?>
Les éléments de l'animation de menu sont dans le menu.php à la racine et dans le dossier /menu dans lequel ce trouve le fameux fichier jquery.easing.1.3.js

Je ne pense pas être bien loin de la solution à mon problème mais là j'avoue que je sèche.

Auriez-vous une idée d'où pourrait venir mon erreur?

Merci à vous. :D

Re: Menu qui fonctionne sur l'index mais pas ailleurs

Posté : 15 mars 2014, 19:21
par damien_55
Slt,

Ou est ton insertion de ton fichier js ??

Je vois du css, des includes php, mais pas d'appel à un fichier js. :?

il faudrait que tu l'appelles dans ton html.

Re: Menu qui fonctionne sur l'index mais pas ailleurs

Posté : 15 mars 2014, 19:49
par ninouee
Bonjour damien_55,

Mon fichier JS est compris dans mon "menu.php" dont voici le code.
<!doctype html>
<html lang="fr">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu</title>
 <link href="entree.css" rel="stylesheet" type="text/css"> 
</head>


<body>
<div class="corps">
        
<div class="content">
		
<ul id="sdt_menu" class="sdt_menu">



	<!--1 accueil du site-->
    <li>
    	<!--1er niveau-->
        <a href="http://ddstv.fr/"> <!--Lien du 1er niveau-->
        <img src="Menu/images/menuhome.jpg" alt=""/> <!--Image accueil-->
            <span class="sdt_active"></span>
            <span class="sdt_wrap">
            <span class="sdt_link">Accueil</span> <!--Titre menu-->
            <span class="sdt_descr">Dingues de séries TV et Avatar Land</span> <!--Commentaire menu-->
           </span>
        </a>
        <!--Fin 1er niveau-->
	</li>
    <!--Fin 1 accueil du site-->
         
                
              
	<!--2 Galerie-->
	<li>
    	<!--1er niveau-->
        <a href="/galerie/"> <!--Lien du 1er niveau-->
        <img src="Menu/images/menugalerie.jpg" alt=""/> <!--Image Galerie-->
            <span class="sdt_active"></span>
            <span class="sdt_wrap">
            <span class="sdt_link">Galerie</span> <!--Titre menu-->
            <span class="sdt_descr">Galerie Coppermine</span> <!--Commentaire menu-->
            </span>
        </a>
		<!--Fin 1er niveau-->
        
		<!--Sous menu-->
        <div class="sdt_box">
        	<a href="/galerie/thumbnails.php?album=lastup&cat=0">Nouveautés</a>

            <a href="/galerie/search.php">Rechercher</a>
            <a href="/galerie/index.php?cat=0">Albums</a>
            <a href="/galerie/thumbnails.php?album=topn&cat=0">Images populaires</a>
        </div>
        <!--Fin sous menu-->
    </li>
    <!--Fin 2 Galerie-->
                
                
                
  	<!--3 Forum Avatar Land-->              
	<li>
    	<!--1er niveau-->
		<a href="/forum/"> <!--Lien du 1er niveau-->
		<img src="Menu/images/menuforavat.jpg" alt=""/> <!--Image Forum avatars-->
            <span class="sdt_active"></span>
            <span class="sdt_wrap">
            <span class="sdt_link">Avatar Land</span> <!--Titre menu-->
            <span class="sdt_descr">Forum de la galerie</span> <!--Commentaire menu-->
            </span>
        </a>
		<!--Fin 1er niveau-->
        
		<!--Sous menu-->
        <div class="sdt_box">
            <a href="/forum/">Forums</a>
            <a href="/forum/viewtopic.php?f=2&t=133">Principe du forum</a>
            <a href="/forum/viewforum.php?f=5">Commandes d'avatars</a>
            <a href="/forum/viewforum.php?f=6">Commandes de signatures</a>
            <a href="/forum/viewforum.php?f=7">Commandes diverses</a>
            <a href="/forum/viewforum.php?f=16">Tutoriels</a>
            <a href="/forum/viewforum.php?f=17">Ressources</a>
        </div>
        <!--Fin sous menu-->
    </li>
	<!--Fin 3 Forum Avatar Land-->           
                
         
                
   	<!--4 DdSTV-->             
	<li>
    	<!--1er niveau-->
        <a href="http://dinguedeserietele.activebb.net/"> <!--Lien du 1er niveau-->
        <img src="Menu/images/menuddstv.jpg" alt=""/> <!--Image Ddstv-->
        	<span class="sdt_active"></span>
        	<span class="sdt_wrap">
        	<span class="sdt_link">Dingues de séries TV!</span> <!--Titre menu-->
       		<span class="sdt_descr">Forum séries et films</span> <!--Commentaire menu-->
        	</span>
        </a>
		<!--Fin 1er niveau-->
        
		<!--Sous menu-->
        <div class="sdt_box">
            <a href="http://ddstv.fr/">Forums</a>
	    	<a href="http://dinguedeserietele.activebb.net/t7759-liste-des-series">Liste des séries</a>
	    	<a href="http://dinguedeserietele.activebb.net/t2404-liste-des-films">Liste des films</a>
            <a href="http://dinguedeserietele.activebb.net/f26-encyclopedie"> Encyclopédie</a>
            <a href="http://dinguedeserietele.activebb.net/f61-l-ile-de-k-lant"> L'ile de K-Lant (jeu)</a>
        </div>
        <!--Fin sous menu-->
        
    </li>
	<!--Fin 4 DdSTV-->              
                
        
                
    <!--5 Partenaires-->      
	<li>
    	<!--1er niveau-->
        <a href="http://ddstv.fr/"> <!--Lien du 1er niveau-->
        <img src="Menu/images/menupart.jpg" alt=""/> <!--Image Partenaires-->
       		<span class="sdt_active"></span>
        	<span class="sdt_wrap">
        	<span class="sdt_link">Partenaires</span> <!--Titre menu-->
        	<span class="sdt_descr">Tous les partenaires</span> <!--Commentaire menu-->
       		</span>
        </a>
		<!--Fin 1er niveau-->
        
		<!--Sous menu-->
        <div class="sdt_box">
            <a href="/forum/viewtopic.php?f=11&t=2">Partenaires Avatar Land</a>
            <a href="http://dinguedeserietele.activebb.net/t3119-tous-nos-partenaires">Partenaires Dingues de Séries TV</a> <!--Commentaire menu-->
        </div>
        <!--Fin sous menu-->
    </li>
    <!--Fin 5 Partenaires-->           
          
   
                
</ul>
</div>
<div>
<span class="reference">
  
</span>
</div>


        <!-- The JavaScript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script type="text/javascript" src="Menu/jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(function() {
				/**
				* for each menu element, on mouseenter, 
				* we enlarge the image, and show both sdt_active span and 
				* sdt_wrap span. If the element has a sub menu (sdt_box),
				* then we slide it - if the element is the last one in the menu
				* we slide it to the left, otherwise to the right
				*/
                $('#sdt_menu > li').bind('mouseenter',function(){
					var $elem = $(this);
					$elem.find('img')
						 .stop(true)
						 .animate({
							'width':'200px',
							'height':'200px',
							'left':'0px'
						 },400,'easeOutBack')
						 .andSelf()
						 .find('.sdt_wrap')
					     .stop(true)
						 .animate({'top':'140px'},500,'easeOutBack')
						 .andSelf()
						 .find('.sdt_active')
					     .stop(true)
						 .animate({'height':'200px'},300,function(){
						var $sub_menu = $elem.find('.sdt_box');
						if($sub_menu.length){
							var left = '200px';
							if($elem.parent().children().length == $elem.index()+1)
								left = '-200px';
							$sub_menu.show().animate({'left':left},200);
						}	
					});
				}).bind('mouseleave',function(){
					var $elem = $(this);
					var $sub_menu = $elem.find('.sdt_box');
					if($sub_menu.length)
						$sub_menu.hide().css('left','0px');
					
					$elem.find('.sdt_active')
						 .stop(true)
						 .animate({'height':'0px'},300)
						 .andSelf().find('img')
						 .stop(true)
						 .animate({
							'width':'0px',
							'height':'0px',
							'left':'85px'},400)
						 .andSelf()
						 .find('.sdt_wrap')
						 .stop(true)
						 .animate({'top':'25px'},500);
				});
            });
        </script>
  </div>
 
    </body>
</html>
.
Il faudrait donc que je mettre le fichier JS en include tout comme le "menu.php"? Je n'ai pas pensé à cette solution. Je vais voir ce que ça donne.

Re: Menu qui fonctionne sur l'index mais pas ailleurs

Posté : 15 mars 2014, 20:33
par damien_55
Ok pour le js.

Mais si je suis ton raisonnement, ton code et tes includes, on arrive à ça:
<!doctype html>
<html lang="fr">
<head>
   <meta charset="utf-8">
   <meta name="description" content="Forum sur les séries TV, mes films et Galerie d'avatars et de signature gratuite." />
    <meta name="keywords" content="avatar, avatars, signature, pix, set, wallpaper, série, TV show, télévision, cinéma, fond d'écran, image, séries, télévision, forum, galerie, acteur, actrice, personnage, épisode" />
    <meta name="google-site-verification" content="53JdXAPGwzb3Elbl8y_olptnWmfea8asGdXXF1L2cbU" />
  <title>L'homme de l'Atlantide</title>
  <link rel="icon" type="image/png" href="../../favicon.png" />
<link rel="stylesheet" type="text/css" href="../../entree.css">
</head>
<body>

<div class="corps">
<?php require ("../../header.php"); ?>
 
/* include de ton menu.php */

<!doctype html>
<html lang="fr">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu</title>
 <link href="entree.css" rel="stylesheet" type="text/css"> 
</head>


<body>
<div class="corps">
.........
Tu te retrouves avec un code invalide, avec des ouverture de doc hmtl dans tous les sens, des appels css dans tous les sens, de meme pour les js dans un seul doc. ça ne peut pas marcher ta page.

Re: Menu qui fonctionne sur l'index mais pas ailleurs

Posté : 15 mars 2014, 20:41
par ninouee
Tu m'as mise sur la voix et j'ai trouvé ce qui n'allait pas grace à toi. :D

Alors voila l'explication: je n'avais pas pensé qu'il fallait que l'appel le fichier du JS tout comme le menu.php et le hader.php.
Il m'a aussi fallu modifier le code de mon menu pour bien spécifier l'emplacement de mes images dans mon menu car elles étaient manquante.

Pour ceux qui auraient le même problème que moi, le code qui fonctionne chez moi est le suivant: 
<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="description" content="Forum sur les séries TV, mes films et Galerie d'avatars et de signature gratuite." />
    <meta name="keywords" content="avatar, avatars, signature, pix, set, wallpaper, série, TV show, télévision, cinéma, fond d'écran, image, séries, télévision, forum, galerie, acteur, actrice, personnage, épisode" />
    <meta name="google-site-verification" content="53JdXAPGwzb3Elbl8y_olptnWmfea8asGdXXF1L2cbU" />
    <title>L'homme de l'Atlantide</title>
    <link rel="icon" type="image/png" href="../../favicon.png" />
	<link rel="stylesheet" type="text/css" href="../../entree.css">

</head>




<body>

<div class="corps">
<?php include ("../../header.php"); ?>
<?php include ("../../menu.php"); ?>
<script src="../../Menu/jquery.easing.1.3.js"></script>

&nbsp;
La suite du document...
Merci beaucoup pour ton aide qui m'a permise d'avance un peu sur mon projet. =D>
Heures au format UTC+02:00
Page 1 sur 1
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/