Voilà, j'ai un site HTML à faire et j'ai (pour bien faire les choses) inclus un seul fichier de menu pour l'ensemble du projet.
Seulement mon souci arrive ici. Je voudrais que lorsqu'on est sur la page index (par exemple), l'élément du menu de la page index soit affiché différemment (dans mon cas, souligné.)
Je vous mets en lien mes fichiers :
Mon fichier HTML de menu :
Code : Tout sélectionner
<ul>
<li><a href="./index.php">Accueil</a></li>
<li><a href="./ba.php">Bandes annonces</a></li>
<li class="right"><a href="./liens.php">Liens & Contacts</a></li>
</ul>Code : Tout sélectionner
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="keywords" content="###, BA, bande-annonce, bande annonce, bandes, annonce, thierry, cohen, thierry cohen, littérature, livre, lecture" />
<meta name="description" content="###, Le premier site de Bandes annonces consacrées à la littérature" />
<link rel="stylesheet" href="design.css" />
<title>###</title>
</head>
<body>
<div id="container">
<header>
</header>
<nav>
<? require_once("nav.php"); ?>
</nav>
<div id="content">
</div>
<div id="foot">
<? require_once("foot.php"); ?>
</div>
</div>
</body>
</html>Code : Tout sélectionner
@charset "utf-8";
/* CSS Document */
@font-face{
font-family:'myriadpro';
src:url('http://thierry-cohen.fr/siteBA/MyriadPro-Regular.otf');
}
* {
}
body {
font-family : 'myriadpro';
}
#container {
width : 800px;
margin : auto;
}
#header {
}
nav {
height: 30px;
background-image : url("./rsc/a-p-menu.png");
background-repeat: repeat-x;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
-khtml-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 5px 5px 10px #888;
-ms-box-shadow: 5px 5px 10px #888;
-o-box-shadow: 5px 5px 10px #888;
-khtml-box-shadow: 5px 5px 10px #888;
-webkit-box-shadow: 5px 5px 10px #888;
box-shadow: 5px 5px 10px #888;
}
nav ul {
padding-top : 6px;
font-size:14px;
}
nav ul li {
display : inline;
list-style-type:none;
width : 150px;
}
nav ul li .right {
margin-left : 450px;
}
nav ul li a {
height : 18px;
color : white;
-moz-border-radius: 9px;
-ms-border-radius: 9px;
-o-border-radius: 9px;
-khtml-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
padding : 0 10px 0 10px;
text-decoration: none;
}
nav ul li a:hover {
-moz-box-shadow: 3px 3px 3px #888;
-ms-box-shadow: 3px 3px 3px #888;
-o-box-shadow: 3px 3px 3px #888;
-khtml-box-shadow: 3px 3px 3px #888;
-webkit-box-shadow: 3px 3px 3px #888;
color : black;
text-decoration: none;
background-image : url("./rsc/a-p-lienhover.png");
}
#content {
}
#foot {
font-size : 10px;
}
prefooter {
}
prefooter p {
}
footer {
}Ceci me permettrait par la suite d'attribuer un style CSS spécifique à l'élément du menu en question, sans avoir besoin pour autant de faire un menu par page. Je voudrais que la maintenance soit aisée, et pour ce faire, il est hors de question de forcer mes "successeurs" à changer le menu dans chaque page.
Du coup je galère ^^"
J'avais essayé de récupérer le nom de la page "active" avec ce code :
Code : Tout sélectionner
switch($_SERVER['DOCUMENT_ROOT']){
case 'index.php':
echo 'index';
break;
case 'ba.php':
echo 'ba';
break;
case 'liens.php':
echo 'liens';
break;
case 'default':
echo 'def';
break;
}PS : Je suis prêt à utiliser un script JS si c'est plus simple qu'en PHP...
Voilà, merci par avance de votre aide.
