Menu accordéon, ouverture du menu à un endroit précis

(reprise du message précédent)

je ne sais pas ce qui ne vas pas
si le test fonctionne en copiant collant ton code complet sur une page lambda
dès que j'intègre par copier coller ds ma page, l'item 3 ne se déroule pas

en somme:
ds le 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(http://www.alsacreations.com/xmedia/tuto/exemples/accordeon/menu-item.png) left bottom no-repeat;

			}

		#navigation .toggleSubMenu a, #navigation .toggleSubMenu span {

			background-image: url(http://www.alsacreations.com/xmedia/tuto/exemples/accordeon/menu-item-deroule.png);

			}

		#navigation .open a, #navigation .open span {

			background-image: url(http://www.alsacreations.com/xmedia/tuto/exemples/accordeon/menu-item-enroule.png);

			}

		#navigation a:hover, #navigation a:focus, #navigation a:active {

			text-decoration: underline;

			}

		#navigation .subMenu {

			font-size: .8em;

			background: #ccc url(http://www.alsacreations.com/xmedia/tuto/exemples/accordeon/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;

			}

		.hasJS #navigation ul.subMenu {display: none;}

		.hasJS #navigation ul.open_at_load, .hasJS #navigation ul.open {display: block;}

dans la head:

<link href="style.css" rel="stylesheet" type="text/css">
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<!--[if lte IE 6]>
	<style type="text/css">
		#navigation li {
			height: 1px;
			}
	</style>
	<! endif -->
	<script type="text/javascript">
		document.documentElement.className+=" hasJS";
	</script>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="accordeon.js"></script>
</head>

DAns le body:

<td>   <ul id="navigation">
        <li><a href="" title="">Item 1</a></li>
        <li class="toggleSubMenu"><span>Item 2</span>
            <ul class="subMenu open_at_load">
                <li><a href="" title="">Item 2.1</a></li>
                <li><a href="" title="">Item 2.2</a></li>
                <li><a href="" title="">Item 2.3</a></li>
            </ul>
        </li>
        <li class="toggleSubMenu"><span>Item 3</span>
            <ul class="subMenu">
                <li><a href="" title="">Item 3.1</a></li>
                <li><a href="" title="">Item 3.2</a></li>
            </ul>
        </li>
        <li><a href="" title="">Item 4</a></li>
    </ul>    
  

et le .js:

<script type="text/javascript">


			$(document).ready( function () {


				$("#navigation li.toggleSubMenu span").each( function () {


					var TexteSpan = $(this).text();

					$(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;

				} ) ;

			


				$("#navigation li.toggleSubMenu > a").click( function () {


					if ($(this).next("ul.subMenu:visible").length != 0) {

						$(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );

					}


					else {

						$("#navigation ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") });

						$(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );

					}


					return false;

				});

qu'est ce que je na fais pas correctement??

bon..
en laissant le script en bas de page au lieu de le mettre ds une autre page l'item 3 fonctionne..

donc je vais le laisser là je pense

sokebana a écrit :
qu'est ce que je na fais pas correctement??

Sans une page en ligne c'est difficile à dire, mais il faut laisser les scripts en bas de page. Je subodore une mise en page avec des tableaux, serais-tu du côté obscur?

heu ... wouiii

voilà je mets en ligne www.sokebana.net/test/photographe-mariage.html

le menu saccade pr le moment

et je voudrais bien mettre les puces des sous sous menu plus proche de leur titre (au lieu de au bord)

Ouille. Déjà pour une mise-en-page aussi simple les tableaux n'étaient pas nécessaire.

Deuxièmement, il y a une erreur dans le code css :

			list-style: none:

Qui devrait être :

			list-style: none;

Ce qui fera sauter les puces par défaut...

Pour ajouter tes propres puces, tu peux utiliser une image d'arrière-plan sur les <li>.

Exemple :

/* au premier niveau*/

#navigation li {background: #000 url(image1.png) top left no-repeat;}

/*au deuxième niveau*/
#navigation li ul li {background: #000 url(image2.png) top left no-repeat;}

Etc.

oui j'ai vu la faute et l'ai corrigée tout à l'heure
ça m'ennuie un peu de mettre une image, celle ci me vont bien, j'aurai juste aimé les décaler (sou sou menu) sans pour autant décaler le texte du (sous sous menu, par exemple tendresse tatouée)

c'est bon j'ai réussi à supp toutes les puces, c'est tout simplement parfait! sous firefox

sous IE 6, les items de racine ne marchent pas du tout, rien ne se déroule (sauf celui demandé à l'ouverture qui est ouvert)... argggggg je pensais en voir le bout...

quelqu'un peut il m'expliquer pourquoi ça ne tourne pas sous IE6? merci de votre aide

Le code que je t'ai donné tournait bien sur IE6 au boulot… J'ai pas essayé avec ton site.

je viens te tester sur une autre machine sous IE www.sokebana.net/test/photographe-mariage.html et ça ne tourne pas

bon je vais me coucher.... je suis honteuse..
j'ai tout mis en ligne et là ça tourne très bien, alors un grand grand merci à toi sans qui je n'y serais pas arrivée!!

MERCI

voilà le site est terminé et en ligne
www.sokebana.net

par contre visiblement quand on va ds le portfolio (là où se trouve le menu accordéon) sous IE7, ça ne charge pas la page

y a t il un moyen de contourner ce PB!!

merci par avance de votre aide

Je ne peux pas tester sous IE7, par contre je te conseille de poster ton site dans la partie demande d'avis sur ce forum car il y a pas mal de choses à améliorer.

la poisse le site est en ligne...

où se trouve cette rub auquel tu fais référence

Je te rassure : tu peux laisser ton site en ligne. C'est juste histoire de corriger le code html & css pour qu'il soit plus conforme et plus efficace.

oui mais le souci c'est que j'ai de la visite avec un bon positionnement google, pas le droit trop à déconner ma saison approche...

Normalement ça ne devrait rien changer, au niveau référencement ça devrait peut-être même améliorer les choses... Enfin, tu fais comme tu veux.

pardon je me susi mal exprimé, je veux dire que le site est visité par des clients potentiels et s'ils ne peuvent voir la galerie et bien ils vont voir ailleurs!!!

d'où mon inquiétude!!

Ok je comprends. Si j'ai le temps ces prochains jours je posterai un exemple de site bidon géré par un cms, tu verras si ça te conviens.

je fouille sur le web, je ne trouve pas de réponse, qqu aurait il un peu de temps à m'accorder pour me décrotter de cette situation, comme tu le dis Patidou, ce n'est certainement pas grand chose, mais c'est quand meme une page noire!!

bon j epense que c'est bon...
c'est ça qui me mettait le bazar

<!--[if lte IE 6]>

<style type="text/css">

#navigation li {

height: 1px;

}

</style>

<! endif -->