Création d'un menu à deux niveaux en Jquery : pas évident !
Bonjour à tous,
J'ai commencé la création d'un menu qui fonctionnerait comme sur cette image
Comme vous le voyez, il y a un bloc à gauche fixe (si possible qui prend toute la hauteur de la page) et qui contient des liens. Selon le lien cliqué, il "ouvre" un autre bloc qui apparait du bord droit du premier bloc
Pour cela, j'ai utilisé ce script qui me parait bien mais après réflexion, je ne suis plus certain :roll:
Il faudrait appliquer au second bloc un mouvement horizontal et non vertical et faire en sorte que le contenu varie selon le lien cliqué. C'est là que je cale ! D'où ma demande d'aide sur le forum.
Voici néanmoins ce que j'ai fait, et le code suit plus bas.
. Comment dois-je m'y prendre ?
. Il y a peut-être un script meilleur pour faire ce que je veux ?
> page de test
code html
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <div class="slidePanel">
<div class="slideHeader">
<h3>Menu principal</h3>
<ul>
<li><a href="">Lien sous-menu 01</a></li>
<li><a href="">Lien sous-menu 02</a></li>
<li><a href="">Lien sous-menu 03</a></li>
<li><a href="">Lien sous-menu 04</a></li>
<li><a href="">Lien sous-menu 05</a></li>
</ul>
</div>
<div class="slideBody">
<h3>Sous-menu 01</h3>
<ul>
<li><a href="">Lien numéro 1</a></li>
<li><a href="">Lien numéro 2</a></li>
<li><a href="">Lien numéro 3</a></li>
<li><a href="">Lien numéro 4</a></li>
</ul>
</div>
</div> |
code CSS
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| body {
background-color: #666;
height: 100%;
padding: 0;
margin: 0;
}
a {
color: #FF6;
}
.slidePanel {
background-color:#333;
width: 100%;
min-height: 100%;
}
.slideHeader {
float: left;
width: 20%;
height: 100%;
background: Blue;
color: White;
}
.slideBody {
float: left;
background: Gray;
width: 15%;
padding: 5px;
} |
et le JS
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <script type="text/javascript">
$(document).ready(function(){
//Fixes an animation glitch caused by the
//div's dynamic height. Need to set the
//height style so the slide functions work
//correctly.
$("div.slideBody").each(function(){
$(this).css("height", $(this).height() + "px");
});
//hook the mouseup events to each header
$("div.slidePanel").children(
"div.slideHeader").mouseup(function(){
//find the body whose header was clicked
var body = $(this).parent().children("div.slideBody");
//slide the panel
if(body.is(":hidden"))
body.slideDown();
else
body.slideUp();
});
});
</script> |
Merci d'avance :)
