Problème id avec backstretch.js
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:
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:
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:
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:
<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:
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.
