Menu horizontal centrer automatiquement l’élément selectionné
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:
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:
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.
