Discussion :

[erichou7]

Hello tout le monde,

Mon cas est le suivant : j'ai un menu de navigation interne (pas celui du header) qui sert avec des ancres à aller à une partie de la page et qui est en fixed. Je vous montre ci-dessous des images de ce que j'ai fait, avec le code. Ce que je voudrais : mettre les chiffres au dessus des <li>, pas à côté à gauche.

Quand la navigation interne est tout en haut de page :

________
Quand elle est sollicitée :

________
Code correspondant :

HTML : -------

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<ul style="padding-left: 0;">
**<span class="steps-how3">1</span><li><a href="#join">Adhérer</a></li>
**<span class="steps-how3">2</span><li><a href="#find-parking">Trouver son parking</a></li>
**<span class="steps-how3">3</span><li><a href="#parking-minute">Parking à la minute</a></li>
**<span class="steps-how3">4</span><li><a href="#reserve">Réserver sa place</a></li>
**<span class="steps-how3">5</span><li><a href="#parking-mounth">Parking au mois</a></li>
**<span class="steps-how3">6</span><li><a href="#getin-getout">Entrer et sortir du parking</a></li>
**<span class="steps-how3">7</span><li><a href="#comunity">La communauté Zenpark</a></li>
</ul>

CSS : ------

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.steps-how3
{
**visibility: hidden;
}

JS, en gros si le scroll dépasse les 80px à partir du top de la fenêtre, executer ceci : ------

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
$(window).scroll(function () {
**var scrollPos = $(window).scrollTop() + $('#headerHeight').height() + 80;
*
**if (scrollPos >= navOffset) {
****$(".sub-nav ul span").removeClass("steps-how3");
**} else {
****$(".sub-nav ul span").css({"color" : "white", "backgroundColor" : "black",
******"padding" : "5px" }).addClass("steps-how3");
**}
});

== Quand on est tout en haut de page : mettre la class="steps-how3" au span qui sera donc en hidden. Et quand on Scroll dans la page à >80px du top : on rajoute la enlève la class, et le hidden avec.

Avez-vous idée de comment je pourrai mettre mes span avec la class steps-how3 au dessus de leur texte respectif ? Comme ci-dessous (maquette modèle). J'ai eu le réflexe de mettre div au lieu de span mais ça les met les uns en dessous des autres car div = block


Merci d'avance les amis, en espérant des suggestions

[SylvainPV]

Je déplace sur le forum CSS, ne s'agissant pas d'une question à régler en JavaScript.

[Jacques Beauregard]

Bonjour,

J'ai réalisé un exemple simple en travaillant sur des divs pour réaliser l'alignement souhaité.

Code :

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
<div class="menu-bloc">
<div>
    1
</div>
<div>
    menu 1
 </div>
</div>
 
<div class="menu-bloc">
<div>
    2
</div>
<div>
    menu 2
 </div>
</div>
 
<div class="menu-bloc">
<div>
    3
</div>
<div>
    menu 3
 </div>
</div>
 
<div class="menu-bloc">
<div>
    4
</div>
<div>
    menu 4
 </div>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.menu-bloc{
width:50px;
    display:inline-block;
    margin-right:10px;
}

Ceci est un exemple : A toi d'adapter le css souhaité