Discussion :

[gstratege]

Bonjour,

Est-ce que vous connaissez un script qui permet de faire coulissez un menu vertical ?

Je m'explique, en CSS je peux rendre le menu fixe, mais c'est plus subtile que ça, en fait, je veux que lorsque je commence à scroller ça mon monte en haut puis s'arrête lorsqu'il est en haut de l'écran et reste fixe.

Merci

[NoSmoking]

Bonjour,

Est-ce que vous connaissez un script qui permet de faire coulissez un menu vertical ?

cela s’appelle un menu accordion pour ta recherche. Cela peut se faire en CSS ou javascript en fonction du choix de la cible.

[Invité]

@NotSmoking,

Rectificatif :
Le menu accordion ne concerne que.. Céline Dion !

Pour les autres, c'est un menu accordéon.
et ce n'est pas Yvette qui me contredira.

N.B. A moins qu'il ne cherche un menu à coulisse ?
A accrocher avec un trombone, évidemment.

[Invité]

après ces bons mots, je pense avoir compris ce que tu cherches.

Dis-moi si le menu de ce site (vertical, à gauche) correspond à ton besoin : http://www.eqwos.fr/fr/401/associations-membres
Il s'agit là de jQuery.

[SylvainPV]

La question ferait plutôt référence à un menu sticky qu'un menu accordéon. Il y a un standard en cours de discussion, "position: sticky" en CSS, implémenté sur Firefox et Safari :
http://caniuse.com/#feat=css-sticky

avec le polyfill qui va bien :
http://philipwalton.github.io/polyfi...sition-sticky/

[NoSmoking]

@jreaux62 : I'm sorry but accordion in english !

@sylvainPV : j'ai zappé la deuxième partie de la question.

[Invité]

@NoSmoking

Therefore you meant: accordion menu ! N'est-il pas ?

Bon. Quoi qu'il en soit, ce n'est manifestement pas ça !

[NoSmoking]

Therefore you meant: accordion menu ! N'est-il pas ?

Yes oeuf de course, mais c'est la même chose dans mon englishpatoisamoi

Bon. Quoi qu'il en soit, ce n'est manifestement pas ça !

Une relecture ATTENTIVE te donne raison

[gstratege]

Bonjour, et merci pour vos réponses, en effet c'est bien comme dans le site eqwos ce que je veux faire.

[Invité]

Dans ce cas,

• 1/ soit tu utilises ce que SylvainPV a donné comme lien (position:sticky; est génial, mais pas encore accepté par tous les navigateurs... d'où la nécessité d'un js supplémentaire),
• 2/ soit mon script perso

Pour le site eqwos.fr, j'ai fait :
(nécessite jQuery !)

Code :

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

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

Code javascript :

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
// ------------------------------------------------
// MENU SIDE : Fixer au scroll si hauteur < fenetre
$(function(){
	var navSide	= $('#sideSousNav'); // id du sous-menu
	if( navSide.length )
	{
		var navSidetop = navSide.offset().top; // position initial du sous-menu
		$(window).scroll(function () // Au scroll on déclenche la fonction 
		{
		// le div '#bodyWrap1' va du haut de la fenêtre jusqu'à la limite la plus basse du sous-menu (ici, le footer n'est pas inclus : il reste en dessous)
		// (N.B. on peut remplacer par 'body', si le sous-menu peut aller jusqu'en bas de la page)
		var navSideHok = ($('#bodyWrap1').height() - navSide.height() ); 
//		var navSideHok = ($('#bodyWrap1').height() - navSide.height() - 60); // (60 à cause de l'arrondi en bas)
			// dès que le menu atteint le haut de la fenêtre, on le fixe
			if( navSide.height() < $(window).height() && $(this).scrollTop() > navSidetop ) 
			{ 
				navSide.addClass('navSideBoxFixTop');
				// on garde la largeur de la sidebar
				navSide.css( { 'width':$('#pageWrap2 aside.pageSideL').width()+'px' } );
				// si on atteint le bas de la div contenante, on ajuste la position
				if( $(this).scrollTop() > navSideHok ) 
				{ 
					navSide.css({ 'top':(navSideHok - $(this).scrollTop())+'px' });
				// sinon, on fixe en haut
				} else {
					navSide.css({ 'top':'0px' });
				}
			} else { // retour à la normal
				navSide.removeClass('navSideBoxFixTop');
				navSide.width( 'auto' );
			}
		});
	}
});
// ------------------------------------------------

CSS :

Code css :

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

.navSideBoxFixTop { position:fixed; top:0; }

Explications : voir les commentaires dans le code.

[gstratege]

Merci beaucoup !