Menu horizontal centrer automatiquement l’élément selectionné

**jameson** · 22/10/2013, 17h14

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.

**SpaceFrog** · 22/10/2013, 17h20

en jouant sur le srcollTop

**jameson** · 22/10/2013, 17h27

mon menu est horizontal c'est à dire scrolltop.

en faite quand je clic sur n' importe quelle element je veux que mon scroll ce fasse est que mon element soit centrer dans ma vue sans changer le positionnement de mes categorie du menu