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

**NoSmoking** · 22/10/2013, 20h00

Bonjour,
regarde peut être du coté de la méthode scrollIntoView.

**jameson** · 23/10/2013, 10h01

bonjour,

le scrolintoview n'est valable que pour le top et le botom pas sur le centrage d'un element horizontal

**SpaceFrog** · 23/10/2013, 10h02

va falloir jouer sur le margin top par rapport à l'offset top de l'element selectionné

**NoSmoking** · 23/10/2013, 18h10

le scrolintoview n'est valable que pour le top et le botom pas sur le centrage d'un element horizontal

certes mais tu peux faire comme.

Petit détournement

Code html :

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
36
37
38
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div{
  height:100px;
  width:600px;
  overflow:hidden;
  border:1px solid #CCC;
}
div div {
  float:left;
  border:none;
}
#div_1{ background:#FEE;}
#div_2{ background:#EFE;}
#div_3{ background:#EEF;}
</style>
<script>
function showElem( id) {
  var oDiv = document.getElementById(id);
  oDiv.scrollIntoView();
}
</script>
</head>
<body>
  <button onclick="showElem('div_1');">DIV_1</button>
  <button onclick="showElem('div_2');">DIV_2</button>
  <button onclick="showElem('div_3');">DIV_3</button>
 
  <div>
    <div id="div_1">Texte de la DIV_1</div>
    <div id="div_2">Texte de la DIV_2</div>
    <div id="div_3">Texte de la DIV_3</div>
  </div>
</body>
</html>

**SpaceFrog** · 24/10/2013, 09h09

oui mais ...
a priori il demande un centrage ...
il me semble que scrollintoview ne s'occuppe pas de centrer ...

**NoSmoking** · 24/10/2013, 19h02

a priori il demande un centrage ...
il me semble que scrollintoview ne s'occuppe pas de centrer ...

c'est vrai, dans ce cas il faudra un GROS détournement

Mais comme effectivement

Envoyé par jameson

il y a 3 ou 4 categories visible à l'ecran

je ne pense pas qu'il y ait d'autres méthodes que de recalculer la position left, en jouant sur le margin-left du conteneur ou autre...

**jameson** · 29/10/2013, 10h34

actuellement je n'ai pas trouvé de solution.

en faite je voudrais faire une sorte de tabhost comme sur android mais en html css 3

**jameson** · 30/10/2013, 16h11

en faite avec le margin-left cela fonctionne mais, cela me diminue ma zone de scroll ce que je ne veux pas.

**NoSmoking** · 30/10/2013, 18h44

Pourrais tu nous mettre le code de ce que tu essaies de faire fonctionner que l'on se rende compte...?

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

JavaScript

Discussions similaires

Partager

Partager