Menu vertical coulissant

Version imprimable

17/04/2015, 22h56
gstratege

Menu vertical coulissant

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 :)
18/04/2015, 15h01
NoSmoking

Bonjour,

Citation:

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.
18/04/2015, 16h28
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.
18/04/2015, 16h35
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.
18/04/2015, 16h40
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/
18/04/2015, 16h56
NoSmoking

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

@sylvainPV : :oops: j'ai zappé la deuxième partie de la question.
18/04/2015, 16h59
Invité

@NoSmoking

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

Bon. Quoi qu'il en soit, ce n'est manifestement pas ça ! :aie:
18/04/2015, 17h09
NoSmoking

Citation:

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

Yes oeuf de course, mais c'est la même chose dans mon english~~patois~~amoi :ptdr:

Citation:

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

Une relecture ATTENTIVE te donne raison :arf:
18/04/2015, 19h14
gstratege

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

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:

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

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
// ------------------------------------------------
// 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:

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

Explications : voir les commentaires dans le code.

18/04/2015, 22h11
gstratege

Merci beaucoup !