Bonjour,

j'ai un menu horizontal avec 10 categories, il y a 3 ou 4 categories visible à l'ecran, on peux scroller horizontalement pour voir les autres categorie.


je vous explique mon problème,j'ai un menu horizontal avec la possibilité de scroller sur ce menu car il n'est pas affiché entièrement à l’écran.

j'aimerai que lorsque je clique sur un element du menu pouvoir automatiquement centrer cette element sur ma page.

c'est à dire, j'ai un menu "actu , news , france, monde, cinema , rub1, rub2.

quand je vais cliquer sur cinema j'aimerai faire slider ma vue pour que cinema soit au millieu de ma page....

voici mon code pour le moment:
si vous pensez que je mis prend mal, je suis preneur d'autre solution.


html
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
 <div id="menuContainer">
    <nav id="menu">
      <ul>
        <li><a href="#">actu</a></li>
        <li><a href="#">news</a></li>
        <li><a href="#">france</a></li>
        <li><a href="#">monde</a></li>
        <li><a href="#">cinema</a></li>
        <li><a href="#">rub1</a></li>
        <li><a href="#">rub2</a></li>
      </ul>
    </nav>
  </div>


css
Code css : 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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
#menuContainer{
    width: 100%;
    overflow-x: scroll;
    white-space: nowrap;
}
 
#black{
    width:100%;
    height: 20px;
    background-color: black;
    position:relative;
}
 
nav ul {
    list-style: none;
    float:left;
    margin: 0;
    padding: 0;
    background-color: black;
    /*height: 24px;*/
    white-space:nowrap;
}
 
nav ul li {
    display:inline-block;
    padding: 0px 20px 5px 10px;
    height: 24px;
}
 
nav ul li a {
    color: #EFD3D3;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
}

je vous remercie d'avance.