Bonjour à tous,

Je rencontre un petit soucis sur un menu qui devrait charger du contenu (logique vous me diriez !) et par la même changer l'image de fond en utilisant backstretch.js.

Le menu :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
<ul id="navigation">
     <li><a href="#métiers">métiers</a></li>
     <li><a href="#expertises">expertises</a></li>
     <li><a href="#contacts">contacts</a></li>
     <li><a href="#xxxx">XXXX</a></li>
</ul>
Le contenu :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
<!-- métiers -->
<div id="métiers" class="panel">
     <div class="content">
          <h2>métiers</h2>
          <p>Du contenu</p>
     </div>
</div>
Et le script :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
<script>
     $.backstretch("img/bg-home.jpg", {speed: 500});
            
     $("#test").click(function (e) {
          e.preventDefault();
          $.backstretch("img/bg-interne.jpg");
     });
</script>
Donc pour utiliser, le script ci-dessus il suffit de rajouter un id à chaque éléments du menu. Par exemple :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
<li><a id="test" href="#métiers">métiers</a></li>
Seulement quand je fais cela, j'ai bien l'image de fond qui change mais le contenu n'apparait plus.

Le css utilisé est le suivant :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.panel  {
	min-width: 55%;
	height: 98%;
	overflow-y: hidden;
	overflow-x: hidden;
	position: absolute;
	margin-top: -150%;
	opacity: 0;
	z-index:2;
	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	-ms-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
}
 
.panel:target {
	opacity: 1;
	margin-top: 0%;
}
Si quelqu'un à 1 piste de recherche, je suis preneur.
Bonne journée.