Menu Vertical en CSS et HTML



1) Retrouvez ci-dessous une démo ainsi que le code HTML



Code HTML et CSS inclus dans un seul fichier


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

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



<style>
/******************************Code CSS*******************************/
#menu {
width: 180px;
}

#menu ul
{
margin:0;
padding:0;
list-style-type:none;
font-family: Helvetica, Verdana, Arial, sans-serif;
font-size: 15px;
}

#menu a
{
display:block;
padding: 10px;
width:150px;
height:15px;
color:#FFFFFF;
text-decoration:none;
background-color: #454545;
border-bottom: 1px solid #000000;
border-top: 1px solid #4C4C4C
}

#menu a:link, #menurubrique a:visited
{
color: #E6E6E6;
text-decoration: none;
}

#menu a:hover
{
background-color: #7C7C7C;
color: #FFFFFF;
} 
/******************************Fin Code CSS****************************/
</style>


</head>

<body>
<div id="menu">    
    <ul id="menurubrique">
	<li><a href="#">Menu Rubrique1</a></li>
	<li><a href="#">Menu Rubrique2</a></li>
	<li><a href="#">Menu Rubrique3</a></li>
	<li><a href="#">Menu Rubrique4</a></li>
	<li><a href="#">Menu Rubrique5</a></li>
    </ul>
</div>
    
</body>
</html>


2) Comment appeler le même menu dans chacune des pages de son site web

Pour cela on va utiliser le php et enregistrer un fichier MenuVertical.php que l'on va appeler et placer dans chaque page web 'PageRubriques.html'. Vous aurez ainsi un menu identique dans chacunes des pages demandées. Toute modification de ce menu se répercutera automatiquement dans chaque page web.


MenuVertical.php


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

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



<style>
/******************************Code CSS*******************************/
#menu {
width: 180px;
}

#menu ul
{
margin:0;
padding:0;
list-style-type:none;
font-family: Helvetica, Verdana, Arial, sans-serif;
font-size: 15px;
}

#menu a
{
display:block;
padding: 10px;
width:150px;
height:15px;
color:#FFFFFF;
text-decoration:none;
background-color: #454545;
border-bottom: 1px solid #000000;
border-top: 1px solid #4C4C4C
}

#menu a:link, #menurubrique a:visited
{
color: #E6E6E6;
text-decoration: none;
}

#menu a:hover
{
background-color: #7C7C7C;
color: #FFFFFF;
} 
/******************************Fin Code CSS****************************/
</style>


</head>

<body>
<div id="menu">    
    <ul id="menurubrique">
	<li><a href="#">Menu Rubrique1</a></li>
	<li><a href="#">Menu Rubrique2</a></li>
	<li><a href="#">Menu Rubrique3</a></li>
	<li><a href="#">Menu Rubrique4</a></li>
	<li><a href="#">Menu Rubrique5</a></li>
    </ul>
</div>
    
</body>
</html>


PageRubriques.html


<!DOCTYPE html">
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Fichier PageRubriques.html appelant un fichier MenuVertical.php</title>
  </head>
  
  <body>
  
  <div id="cadremenu">  
  <?php include('menus/MenuVertical.php'); ?>
  </div>
  
  </body>
</html>








0487953