18041 sujets

Questions générales et questions de débutants

Menu accordeon Jquery, probleme....

Bonjour à tous!
Me voici avec mon 1er post sur ce forum, où je me suis résous à m'inscrire pour ne pas rester un gros noob!
Tout le monde arrive a faire ces menus et moi je suis pas foutu de le faire proprement!

Voilà mon problème :
Je souhaite faire un menu accordéon. Ce menu est un menu "secondaire" c'est à dire qu'il n'apparaît QUE lorsque je suis sur une partie de mon site.
J'ai fait une feuille test de mon menu avec tout dedans, HTML, CSS et le script pour visualiser sur FF.
Jusque là tout marche. Je passe mon fichier en php (mon ancien menu était en php Smiley cligne )
Ca passe toujours!
Et le moment où ça part en sucette , c'est quand je remplace mon Menu.php existant par ce nouveau fichier Menuaccordeon.php! Smiley bawling

Le chemin d'accès au fichier est le suivant : www./content./menuaccordeon.php
est-ce la source du problème? dois-je mettre mon Menu à la racine du site?
Il va de soit que j'ai fais suivre mon js est que j'ai actualisé le chemin d'accès... Smiley cligne

Merci à vous d'aider une grosse buse qui rame pas mal!!! Smiley biggol

A+
kiko50
Bonjour,

Pourrais-tu donner la bonne URL vers ta page afin qu'on regarde ton code ?

Merci !
Bonjour à toi Kaaviar

Malheureusement non, je l'ai pas mis en ligne!!

Mais si tu veux ça marche parfaitement, le truc c'est que dès que je souhaite l'intégré à mon site , l'accordeon ne marche plus du tout!
Alors je pense que je mets pas les chose ou il faut!
mon site ce compose comme ça
www
-content
+ plus toutes mes pages de mon site en .php
+menuacc.php
+jquery.js
-img
-include
+main.php
-index.php

J'espère que c'est compréhensible!! Smiley biggrin Smiley biggrin

Merci
A+
kiko50
Modifié par kiko50 (09 Dec 2009 - 12:33)
kiko50 a écrit :
Bonjour à toi Kaaviar

Malheureusement non, je l'ai pas mis en ligne!!


Il nous faut soit une page en ligne, même temporaire, soit le code complet inséré dans le forum en utilisant les balises [ code ] Smiley cligne
Ca ressemble à jquery qui ne se charge pas.
Test avec firebug firebug si jquery se charge correctement ou non. Dans le doute appel la dernière version en ligne dans ton head : 


<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/jquery-1.3.2.js"></script>

ca évite les problèmes de chemin vers le fichier. Cherche s'il n'y a pas un équivalent pour ton script d'accordéon.

Quel plug-in utilises-tu ?
Merci les amis!!
Pffiou quelle galère je vous jure!! J'ai encore essayé et encore craqué!!
Bon je m'en remets à vous!



<!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"> 

<?php
function menu3() {
?>

   <head>
<script type="text/javascript" src="jquery.min.js"></script>    
<script type="text/javascript"> 
<!-- 
$(document).ready( function () { 
    // On cache les sous-menus 
    // sauf celui qui porte la classe "open_at_load" : 
    $(".menuacc ul.subMenu:not('.open_at_load')").hide(); 
    // On sélectionne tous les items de liste portant la classe "toggleSubMenu" 
 
    // et on remplace l'élément span qu'ils contiennent par un lien : 
    $(".menuacc 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'évènement "click" sur les liens dans les items de liste 
    // qui portent la classe "toggleSubMenu" : 
    $(".menuacc li.toggleSubMenu > a").click( function () { 
        // Si le sous-menu était déjà 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 caché, on ferme les autres et on l'affiche : 
        else { 
            $(".menuacc 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>
<style type="text/css">
.menuacc { 
      margin: 0; 
      padding: 0; 
      list-style: none; 
      background: #000; 
      color: #f3ab21; 
      width: 100px; 
      font: 1.0em "times new roman"; 
      } 
   .menuacc a, .menuacc span { 
      display: block; 
      padding: 4px 10px; 
      color: #f3ab21; 
      text-decoration: none; 
      background: #000 url(menu-item.png) left bottom no-repeat; 
      } 
   .menuacc .toggleSubMenu a, .menuacc .toggleSubMenu span { <!-- -->
      background-image: url(menu-item-deroule.png); 
	  text-decoration: underline; 

      } 
   .menuacc .open a, .menuacc .open span { 
      background-image: url(menu-item-enroule.png); 
      } 
   .menuacc a:hover, .menuacc a:focus, .menuacc a:active { 
      text-decoration: underline; 
      } 
   .menuacc .subMenu { <!-- fond des sous menu-->
      font-size: .8em; 
      background: #000 url(subMenu.png) 0 0 repeat-x; 
      font-size: .9em; 
      margin: 0; 
      padding: 0; 
      border-bottom: 1px solid #666; 
      } 
   .menuacc ul.subMenu a { 
      background: none; 
      padding: 3px 20px; 
      }

</style>

<div class=gauche3>
<ul class="menuacc"> 
    <li class="toggleSubMenu"><span>Monnaies</span>
		<ul class="subMenu">
			<li><a href="index.php?id=dete&amp;art=01">Avant 1000</a></li>
			<li><a href="index.php?id=dete&amp;art=01">Avant 1789</a></li>
			<li><a href="index.php?id=dete&amp;art=011">Après 1789</a></li>
			<li><a href="index.php?id=dete&amp;art=013">Etrangères</a></li>
			<li><a href="index.php?id=dete&amp;art=012">Dénéraux</a></li>
		</ul> 
    </li>
    <li class="toggleSubMenu"><span>Boutons</span>
		<ul class="subMenu">
			<li><a href="index.php?id=dete&amp;art=02">Civils</a></li>
			<li><a href="index.php?id=dete&amp;art=021">Militaires</a></li>	
		</ul> 
    </li>
    <li class="toggleSubMenu"><span>Boucles</span>
		<ul class="subMenu">
		<li><a href="index.php?id=dete&amp;art=05">XIII-XIVème siècle</a></li>
		<li><a href="index.php?id=dete&amp;art=05">XV-XVIème siècle</a></li>
		<li><a href="index.php?id=dete&amp;art=05">XVII-XIXème siècle</a></li>
		</ul> 
    </li>
	<li class="toggleSubMenu"><span>Bijoux</span>
		<ul class="subMenu">
			<li><a href="index.php?id=dete&amp;art=05">Bagues</a></li>
			<li><a href="index.php?id=dete&amp;art=052">Médailles</a></li>
			<li><a href="index.php?id=dete&amp;art=051">Autres</a></li>
		</ul> 
    </li>
	<li class="toggleSubMenu"><span>Objets de la vie</span>
		<ul class="subMenu">
			<li><a href="index.php?id=dete&amp;art=03">Médiévale</a></li>
	    	<li><a href="index.php?id=dete&amp;art=09">Moderne</a></li>
		</ul> 
    </li>
	<li class="toggleSubMenu"><span>Pierres taillées</span>
		<ul class="subMenu">
			<li><a href="index.php?id=dete&amp;art=06">Nucléus</a></li>
			<li><a href="index.php?id=dete&amp;art=061">Lames+divers</a></li>
		</ul> 
    </li>
	<li class="toggleSubMenu"><a href="index.php?id=dete&amp;art=08">Insolites</a></li>
	
	<li class="toggleSubMenu"><a href="index.php?id=dete&amp;art=07">Exceptionnel</a></li>
</ul>
</div>
</body>
</html>
<?php
}
?>


Oui je sais ça fait une tartine!! Smiley biggrin Smiley biggrin Smiley biggrin

Et en plus je n'arrive même pas a ne souligné QUE les "toggleSubmenu <span>" Je suis vraiment une buse!

Je dois avoir des intéractions avec mon fichier, Style.css et ça fout la merde!

Merci à vous
A+
kiko50
Salut,

Alors voilà j'ai bidouillé hier soir, et Hop par Hasard, ça marche... Me demandez pas comment, avant ça ne fonctionnais pas, maintenant oui, j'ai rien fait de plus!!
Jquery dans le dossier WWW
et mon menu.php dans www/content/menu.php, et dans ce menu pas de chemin d'accès relatif pour le Jquery.js! Smiley biggol
Enfin ça marche!!

Merci à vous
Kiko
Sujet clos
Aller à