Menu toujours visible à gauche

Version imprimable

03/01/2013, 17h13
sohnic

Menu toujours visible à gauche

Bonjour,
J'ai un site, de structure classique :
un menu à gauche et le contenu à droite (pas de frames).
J'aimerais que ce menu suive le scroll, essentiellement pour des raisons d'esthétique.
Sur le net, j'ai trouvé de nombreuses méthodes qui n'ont pas fonctionné (ou que je n'ai pas su mettre en oeuvre).
J'en ai trouvé une basée sur JQuery, à laquelle il me manque un petit quelque chose. Et là je sèche lamentablement.

Plutôt qu'un long discours, j'ai fait ersatz de présentation, purement html/CSS/javascript (donc tous les codes accessibles), ultra simplifié.
http://www.noctinfo.fr/menuFloatFixe/.
Si quelqu'un a une solution, elle est la bienvenue !

Merci et tous mes voeux à l'ensemble des contributeurs.

Sohnic
03/01/2013, 19h50
SylvainPV

Bonjour,

La position css fixed peut suffire à ce que tu veux faire. Si tu veux restreindre à une certaine zone de la page, ça demande un peu de Javascript. Tu peux trouver un tuto ici : http://desgeeksetdeslettres.com/prog...rollbar-js-css
03/01/2013, 20h20
sohnic

Bonjour,
C'est exactement le tuto que j'ai utilisé.
Mon problème est que quand on passe de la position du haut de page (float) qui permet donc de descendre tout en bas du menu, à la position fixed (donc quand on descend jusqu'à un certain niveau de la page), je retombe sur le problème d'un fixed tout court : sur un écran trop petit, le menu est tronqué.
Certes, on peut le retrouver en entier en remontant dans la page (donc en repassant en float), mais franchement, ça manque d'élégance.

S.

Bonsoir,

Citation:

sur un écran trop petit, le menu est tronqué.

j'ai l'impression qu'il y a un problème de conception de menu dans ce cas.

Sinon faire flotter simplement le menu avec
Code:

1 2 3 4 5 6 7 8 9 jQuery(document).ready(function(){ $(window).scroll( function(){ var posY = $(window).scrollTop(); $('#menu').stop().animate({ 'top': posY }, 1000); }); });

Bonsoir

Une solution jQuery qui fonctionne avec vos codes (HTML, CSS) sous Chrome et Firefox. Je vous laisse le soin de tester les autres navigateurs.

Pour tester il suffit de copier-coller le code ce-dessous :

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		* {
			border:0;
			margin:0;
			padding:0;
		}
		body {
			color:#000000;
			font-family:Times New Roman;
			font-size:18px;
		}
		#content {
			height:auto;
			margin:0 auto;
			width:900px;
		}
		#sidebar {
			float:left;
			position : absolute;
			border:none;
			left:0px;
			top:0px;
		}
		#main {
			position : absolute;
			left:235px;
			width:697px;
		}
		#main .contenu {
			position : absolute;
			left:0px;
		}
	</style>
</head>
<body>
	<div id="content">
		<div id="sidebar">
			<img src="http://www.noctinfo.fr/menuFloatFixe/img/side.jpg">
		</div>
		<div id="main">
			<div id="contenu" name="contenu" class="contenu">
				<table>
					<tbody>
						<tr>
							<td valign="top">
								L'image de gauche est en realité un div,<br><br><br><br>contenant 2 images 
								superposées<br><br><br><br>dont l'une est mappée<br><br><br><br>Ceci 
								permet :<br><br><br><br>1- de créer des liens sur l'image<br><br><br><br>
								2- d'associer un effet lors du clic en basculant brièvement sur la seconde
								 image.<br><br><br><br>Le contenu du site dépasse souvent<br><br><br><br>la 
								 hauteur<br><br><br><br>de l'image de gauche<br><br><br><br>ce qui crée<br>
								 <br><br><br>un problème<br><br><br><br>d'esthétique et de lisibilité,<br>
								 <br><br><br>surtout si<br><br><br><br>le contenu<br><br><br><br>est  si 
								 long<br><br><br><br>qu'on ne voit plus l'image,<br><br><br><br>c'est à dire, 
								 les menus d'entrée de mon site.<br><br><br><br>Il faut alors remonter dans 
								 la page.<br><br><br><br>
							</td>
							<td valign="top">
								2 solutions... qui ne résolvent pas tout le problème :<br><br><br>
								<a href="reso1.html">Résolution 1</a> : fixed<br><br><br>
								<a href="reso2.html">Résolution 2</a> : JQuery<br><br><br>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script>
		"use strict";
 
		$(function(){
			$( window ).on( "scroll", function(){
				$( "#sidebar" ).delay( 500 ).stop( true, false ).animate({ "top" : $( this ).scrollTop() }, 2000 );
			});
		});
	</script>
</body>
</html>

Edit : je vois que NoSmoking devient bon en jQuery.

04/01/2013, 09h41
sohnic

Merci beaucoup !
Je n'ai pas réussi à faire fonctionner la méthode de NoSmoking et j'ai commencé à fouiller plus avant dans JQuery sur cette base de départ... sans grand succès (passé une certaine heure, mon cerveau se met en veille automatique).
Et ce matin, la réponse de danielhagnoul (qui a visiblement une mise en veille plus tardive que la mienne) est là, parfaitement efficace.
C'est exactement l'effet que je souhaitais et franchement, je ne pense pas que j'aurais trouvé seule, ou alors ça m'aurais pris beaucoup de temps.

Ca marche aussi sous IE.

Encore merci pour votre efficacité.

Sohnic
04/01/2013, 16h46
NoSmoking

Citation:

Envoyé par danielhagnoul

Edit : je vois que NoSmoking devient bon en jQuery.

Merci Daniel :ave: