11548 sujets

JavaScript, DOM et API Web HTML5

Comment faire pour que mon menu simple se déplace avec la page !

Salut , tout le monde Smiley biggrin !
J'ai un menu simpatoch tout simple seulement j'aimerais qu'il soit visible sur ma page meme quand l'user descendra avec le scroll !

Ce menu est placé dans un include

Le code du menu : HTML 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 FINAL//EN">
<html>
<head>

  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

  <meta name="Generator" content="NetObjects Fusion 4.0 for Windows">

  <link rel="stylesheet" media="screen" type="text/css" href="../css/stylmenu.css">
  <title>IT</title>


  <base target="_parent">
  <script>
<!--
function F_loadRollover(){} function F_roll(){}
//-->
  </script>
  <script language="JavaScript1.2" src="./rollover.js"></script><nolayer></nolayer>
  <style id="NOF_STYLE_SHEET">
<!--
DIV#LayoutLYR { position:absolute; top:2; left:2; z-index: 1; visibility:inherit; }
DIV#VerticalNavigationBar1LYR { position:absolute; visibility:inherit; top:0; left:8; width:120; height:247; z-index:1 }
-->
  </style>
</head>


<body style="color: rgb(0, 0, 0);" link="#0000ff" vlink="#800080">

<ul id="menu">

  <li class="txtbouton">
    <div align="left"><a target="_top" href="data_processing.php" title="IT">IT</a></div>

  </li>

  <li class="txtbouton">
    <div align="left"><a target="_top" href="data_processing_les_personnes.php" title="Les personnes">Les
personnes</a></div>

  </li>


CSS : 
ul#menu
{

	margin: 0;
	padding: 0;
	list-style-type: none;
	font-family: Arial, Helvetica, sans-serif;

	letter-spacing: normal;
	text-align: center;
/* Suppression du margin, du padding et des puces du <ul> */
}

ul#menu li
{
	margin: 0px 0 2px 0;
	padding: 0px;/* Suppression du padding du <li> et on définit une marge basse de 5px pour aérer le tout */
}

ul#menu li a
{
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 170px ;
	line-height: 30px ;
	text-indent:40px; /* On décale le texte de 40px du bord gauche */
	color: #FFFFCC;
	text-decoration: none;
	background: url(../images/bg_menu.gif) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	border: 0px solid #dbd ;
}

ul#menu li a:hover
{
	background: url(../images/bg_menu.gif) no-repeat 0 -30px; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: 0px solid #f97;
	color: #FFFFCC;
}
.txtbouton
{
	font-family:Arial, Helvetica, sans-serif;
	text-align:justify;
	font-size: 12px;
	cursor: crosshair;
	font-weight:bold;
}


Voilou , donc j'aimerais savoir si je peux le faire 'flotter' !

mici d'avance Smiley smile
La position:fixed sert à cela. Avec quelques arrangements pour IE (voir la FAQ).

Par contre ces menus "volants" sont souvent dérangeants. A réfléchir.


EDIT: Un script en javascript peut effectivement faire le même boulot. Mais le script n'arrive souvent pas à suivre le défilement de la page, et donc notre menu donne l'horrible impression de "sauter". C'est pourquoi on préférera généralement la solution CSS du position:fixed.
Modifié par <nicolas> (27 Jun 2007 - 11:42)
Et euh Smiley sweatdrop c'est quoi la solution CSS ??

A moins que j'ai loupé un truc Smiley confus .

Faut juste que je mette position: fixed ??
mici pour les réponses Smiley smile
Sujet clos
Aller à