1) Menu fixe et bandeau en haut de page



Comment ajouter un encadré contenant un menu ou un bandeau en position fixe dans votre page web. C'est un cadre que vous placez à un endroit particulier de votre page et qui reste visible pendant la navigation et la consultation d'une page. Je présente dans ce tuto quatre exemples de menus mais cela pourrait aussi bien être utilisé pour être affiché comme un cadre ou un bandeau d'information fixe.

1) Demo d'un menu fixe en haut de page

2) Demo d'un menu fixe en bas de page

3) Demo d'un menu fixe à gauche

4) Demo d'un menu fixe à droite



Code HTML et CSS pour le menu fixe en haut de page


<!DOCTYPE html">
<html lang="fr">

<head>
<meta charset="utf-8" />
<title>Menu bandeau fixe en haut en CSS et HTML</title>


<style>

/******************************Code CSS*******************************/
#PageCentrale {
 margin-left: auto;
 margin-right: auto;
}
/********************************************************/
#BandeMenuHaut {
 display: block;
 position: fixed;
 margin-top: 0px;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 55px;
 /* z-index: 999;*/
 /* padding-top: 10px;*/  /*décalage du texte vers le bas*/
 text-align: center;
 text-indent: 0px; /*décalage du texte vers la droite*/
 font-size: 18px;
 color: #FFFFFF;
 background-color: #111;
}

  .ParamOpaciteMenu{
    filter : alpha(opacity=90); /* code en plus pour IE9 */
    opacity : 0.9;
  }
  
/********************************************************/  
  
 ul#MenuRubriques
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

#MenuRubriques li
{
display: inline;
list-style-type: none;
}

#MenuRubriques a {
padding: 3px 10px;
}

#MenuRubriques a:link, #MenuRubriques a:visited
{
text-decoration: none;
color: #FF0FF0;
background-color: #102D49;
}

#MenuRubriques a:hover
{
text-decoration: none;
color: #FF0FF0;
background-color: #1E5388;
}

/******************************Fin Code CSS****************************/
</style>


</head>

<body>
<div id="PageCentrale">
<div id="BandeMenuHaut" class="ParamOpaciteMenu">
<ul id="MenuRubriques">
<li id="active"><a href="#" id="current">Rubrique 1</a></li>
<li><a href="#">Rubrique 2</a></li>
<li><a href="#">Rubrique 3</a></li>
<li><a href="#">Rubrique 4</a></li>
<li><a href="#">Rubrique 5</a></li>
</ul>
</div>
</div>
    
</body>
</html>



Lire la suite »










0492053