4) Menu fixe et bandeau à droite de la 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 à droite de la page
<!DOCTYPE html">
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Menu bandeau fixe à droite en CSS et HTML</title>
<style>
/******************************Code CSS*******************************/
html {
margin: 0px;
padding: 0px;
width: 100%;
}
body {
margin: 0px;
padding: 0px;
}
/********************************************************/
#menu {
position: fixed;
right: 2px;
top: 45%;
width: 150px;
margin: 0 0 0 0;
padding: 10px 0px 10px 35px;
font-weight: bold;
font-size: large;
text-align: left;
text-indent: 10px;
color: white;
border: 3px solid hsla(121, 73%, 17%, 0.5);
/*border-right: none;*/
border-radius: 35px 10px 10px 10px;
/* Générateur de code couleur -- http://www.workwithcolor.com/hsl-color-picker-01.htm */
background: hsla(121, 73%, 17%, 0.7);
z-index: 2;
}
#menu li {
margin: 0;
}
#menu a {
text-decoration: none;
color: inherit;
}
/******************************Fin Code CSS****************************/
</style>
</head>
<body>
<div>
<ul id=menu>
<li><a href="#">Menu 1</a>
<li><a href="#">Menu 2</a>
<li><a href="#">Menu 3</a>
</ul>
</div>
</body>
</html>
|