Menu Horizontal déroulant 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 Horizontal Déroulant en CSS et HTML</title>


<style>
/******************************Code CSS*******************************/
#menu {
height:20px;
}

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

#menu li {
float:left;
margin:auto;
padding:0;
width:129px;
border-right: #000000 solid 1px;
border-left: #4C4C4C solid 1px;
color: #E6E6E6;
background-color:#454545;
}

#menu li a {
display:block;
width:129px;
height:20px;
color:#ffffff;
text-decoration:none;
padding:5px;
}

#menu li a:hover {
color:#C1A500;
width:175px;
}

#menu ul li ul {
display:none;
width:175px;
}

#menu ul li:hover a {
display:block;
width:170px;
}

#menu ul li:hover ul {
display:block;
width:175px;
}

#menu li:hover ul li {
float:none;
border-top: #000000 solid 1px;
border-bottom: #4C4C4C solid 1px;
border-right: #000000 solid 1px;
border-left: #4C4C4C solid 1px;
width:175px;
}
/******************************Fin Code CSS****************************/
</style>
</head> <body> <div id="menu"> <ul> <li><a href="#">Menu Rubrique1</a></li> <li><a href="#">Menu Rubrique2</a> <ul> <li><a href="#">SousMenu-Rubrique2.1</a></li> <li><a href="#">SousMenu-Rubrique2.2</a></li> <li><a href="#">SousMenu-Rubrique2.3</a></li> </ul> </li> <li><a href="#">Menu Rubrique3</a> <ul> <li><a href="#">SousMenu-Rubrique3.1</a></li> </ul> </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 MenuHorizontal.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. Ainsi toute modification de ce menu se répercutera automatiquement dans chaque page web.


MenuHorizontal.php


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

<head>
<meta charset="utf-8" />
<title>Menu Horizontal Déroulant en CSS et HTML</title>


<style>
/******************************Code CSS*******************************/
#menu {
height:20px;
}

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

#menu li {
float:left;
margin:auto;
padding:0;
width:129px;
border-right: #000000 solid 1px;
border-left: #4C4C4C solid 1px;
color: #E6E6E6;
background-color:#454545;
}

#menu li a {
display:block;
width:129px;
height:20px;
color:#ffffff;
text-decoration:none;
padding:5px;
}

#menu li a:hover {
color:#C1A500;
width:175px;
}

#menu ul li ul {
display:none;
width:175px;
}

#menu ul li:hover a {
display:block;
width:170px;
}

#menu ul li:hover ul {
display:block;
width:175px;
}

#menu li:hover ul li {
float:none;
border-top: #000000 solid 1px;
border-bottom: #4C4C4C solid 1px;
border-right: #000000 solid 1px;
border-left: #4C4C4C solid 1px;
width:175px;
}
/******************************Fin Code CSS****************************/
</style>
</head> <body> <div id="menu"> <ul> <li><a href="#">Menu Rubrique1</a></li> <li><a href="#">Menu Rubrique2</a> <ul> <li><a href="#">SousMenu-Rubrique2.1</a></li> <li><a href="#">SousMenu-Rubrique2.2</a></li> <li><a href="#">SousMenu-Rubrique2.3</a></li> </ul> </li> <li><a href="#">Menu Rubrique3</a> <ul> <li><a href="#">SousMenu-Rubrique3.1</a></li> </ul> </li> </ul> </div> </body> </html>


PageRubriques.html


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







0460679